The AuthenticatorService status is `configuring` when evalutating canActivate

Question

I want to protect part of my angular application with a route guard, my route structure is therefore as follows:

export const ROUTES: Routes = [
  {
    path: '',
    component: FirmSignup2Component,
    children: [
      {
        path: 'user-or-admin',
        component: UserOrAdminComponent,
        children: [
          {
            path: 'user',
            component: UserComponent,
          },
          {
            path: 'admin',
            component: AdminComponent,
          },
        ],
      },
      {
        path: 'secure',
        component: SecureComponent,
        canActivate: [
          () => {
            console.log(inject(AuthenticatorService).authStatus);
            return inject(AuthenticatorService).authStatus === 'authenticated';
          },
        ],
        children: [
          {
            path: 'page1',
            component: Page1Component,
          },
          {
            path: 'page2',
            component: Page2Component,
          },
        ],
      },
    ],
  },
]

Where '/secure' and its child routes require authentication through either the user or admin components. I don't want to replicate the entire subtree of secure under each of the login components, so I create a separate part of the routes of login as opposed to wrapping '/secure' with the <amplify-authenticator /> component.

However, when I evaluate the authStatus in canActivate it is always 'configuring'. Once the view has loaded it is authorised. What's happening? How can I use an Auth guard with the Amplify Angular Authenticator?

Answer 1

The workaround that I have is to assess the authentication status only on lazy-loaded routes:

app.routes.ts

...
{
    path: 'private',
    loadChildren: () => import('./private/private.routes').then((m) => m.routes),
    canActivate: [MyAuthGuard],
  },
...

And then in MyAuthGuard we can access the auth status

...
export const MyAuthGuard: CanActivateFn = async (route, state) => {
  return inject(AuthenticatorService).authStatus == 'authenticated';
};
...

Note that we seem to need to inject the AuthenticatorService in the top-level component for this to work

app.component.ts

...
export class AppComponent {
  constructor(
public authenticatorService: AuthenticatorService,
...