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?

Can you show your AuthGuard code? – Norbert Bartko Apr 28 '22 at 13:14 — Norbert Bartko, Apr 28 '22 at 13:14
It is the Auth0s AuthGuard, sorry should have mentioned it – Alex Janßen Apr 28 '22 at 13:44 — Alex Janßen, Apr 28 '22 at 13:44

score 0 · Accepted Answer · answered May 04 '22 at 13:15

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.

Configure Angular Routes with Auth0s AuthGuard

1 Answers1