Configure Angular Routes with Auth0s AuthGuard

Question

I would like to configure my lazy loaded routes nested, which are only available if the users is logged in. Authentication works with Auth0s and it's corresponding AuthGuard. So for example my routes look like this :

const routes: Routes = [
  {
    path: ':id',
    children: [
      {
        path: '',
        children: [        {
            path: 'first-component',
            loadChildren: () => import('./first-component.module').then((m) => m.FirstComponentModule),
            canLoad: [AuthGuard],
          },
            {
            path: 'second-component',
            loadChildren: () => import('./second-component.module').then((m) => m.SecondComponentModule),
            canLoad: [AuthGuard],
          },
        
        ],
      },
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'first-component',
      },
    ],
  },
  {
    path: ':id',
    redirectTo: ':id',
    pathMatch: 'full',
  },
  {
    path: '**',
    component: PageNotFoundComponent,
  },
];

the :id paramter is needed, and should stay in the url so it should look like this:

my-app/ID123/first-component

But authentication I am redirected to /ID123 -> not found

What am I missing?

Answer 1

The guard should not be the problem.

You can try this simplified routes configuration:

const routes: Routes = [
  {
    path: 'not-found',
    component: PageNotFoundComponent,
  },
  {
    path: ':id',
    canLoad: [AuthGuard],
    children: [
      {
        path: 'first-component',
        loadChildren: () => import('./first-component.module').then((m) => m.FirstComponentModule),
      },
      {
        path: 'second-component',
        loadChildren: () => import('./second-component.module').then((m) => m.SecondComponentModule),
      },
      {
        path: '**',
        pathMatch: 'full',
        redirectTo: 'first-component',
      },
    ],
  },
  {
    path: '**',
    redirectTo: 'not-found',
  },
];

If this configuration does not work, please send your parent routing configuration.
It is possible that the issues is there.