Tab Bar not displaying on Mobile Browser when using AWS Amplify Authenticator with Angular

Question

I am building an app with Ionic 6, Angular 13, and using AWS Amplify Authenticator. I have successfully implemented this but the issue I am running in to is that the tab more does not render on mobile browsers.

I added the amplify authenticator component to the app.component.html file based on the documentation here.

app.component.html code:

<ion-app>
    <amplify-authenticator [socialProviders]="['apple', 'google']">
      <ng-template amplifySlot="header">
        <div style="padding: var(--amplify-space-large); text-align: center">
          <img
            class="amplify-image"
            alt="Amplify logo"
            src="https://docs.amplify.aws/assets/logo-dark.svg"
          />
        </div>
      </ng-template>
      <ng-template 
        amplifySlot="authenticated" 
        let-user="user"
        let-signOut="signOut"
      >
        <ion-router-outlet></ion-router-outlet> 
      </ng-template>
    </amplify-authenticator>
</ion-app>

The one problem I have with this is that the tab bar does not render on mobile browser e.g. iPhone Chrome or Safari browser. It will show on desktop browser without any issues and oddly enough if I turn the phone horizontally it will show the tab bar but not vertically.

iPhone:

Web (Desktop):

If I changed the app.component.html code to this, it will work:

<ion-app>
    <amplify-authenticator [socialProviders]="['apple', 'google']">
      <ng-template amplifySlot="header">
        <div style="padding: var(--amplify-space-large); text-align: center">
          <img
            class="amplify-image"
            alt="Amplify logo"
            src="https://docs.amplify.aws/assets/logo-dark.svg"
          />
        </div>
        <ion-router-outlet></ion-router-outlet> 
      </ng-template>
      
    </amplify-authenticator>
</ion-app>

However, the issue with this is, I will never see the login page and can access the app unauthenticated.

Any ideas on how to get this working correctly and to have the tab bar show on mobile browsers?

Answer 1

I would use a service to check if user is authenticated and redirecting user based on this condition.

Something like:

import { AuthenticatorService } from '@aws-amplify/ui-angular';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private authenticator: AuthenticatorService) { }

  public isAuthenticated = () => this.authenticator?.authenticated;
}

Then you may implement a CanActivate guard:

@Injectable({
  providedIn: 'root'
})
export class CanActivateLoginGuard implements CanActivate {

  constructor(
    private authService: AuthService) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {

    return this.authService.isAuthenticated() || this.router.createUrlTree(['/login']);
  }
}

Now you should use Angular Router properly in order to check if user can access the home page, something like:

const routes: Routes = [
  {
    path: '',
    canActivate: [CanActivateLoginGuard],
    loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And finally TabsPageRoutingModule:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
      }
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule {}