Auto Login

The library supports route-based automatic login thanks to the functional route guard: autoLoginPartialRoutesGuard. The guard can be used with canActivate, canActivateChild and canMatch, and will preserve the route upon completing a successful login.

The guard only checks whether valid tokens are already in storage; it does not run checkAuth() itself. If the user is not authenticated, the guard saves the requested URL (key redirect in the configured storage) and starts the login. After the callback, a successful checkAuth() navigates back to that URL and removes it from the storage.

Common Scenarios

Here are a couple of the common use cases.

Auto Login when the default route is not guarded

In this use case, some of your routes should be freely accessible, while others should be protected by a login, which should start when the user enters the protected route.

import { autoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  { path: 'home', component: HomeComponent },
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [autoLoginPartialRoutesGuard],
  },
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.routes').then((m) => m.customerRoutes),
    canMatch: [autoLoginPartialRoutesGuard],
  },
  { path: 'unauthorized', component: UnauthorizedComponent },
];

In this case, the /home and /unauthorized routes are not protected, and they are accessible without a login. Please make sure to call checkAuth() on the component that is bootstrapped (e.g. app.component.ts) to check the authentication status at the beginning of your application, or use the withAppInitializerAuthCheck function to automatically check the authentication status when the application starts.

Custom Params for the guard

If you need to pass custom params to the login request you can use the data attribute of the route. These parameters will then be appended to the login request. All keys of the route's data object are sent as custom parameters, so keep only parameters meant for the authorize request in it. The class-based canLoad does not pass data along.

import { autoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [autoLoginPartialRoutesGuard],
    data: { custom: 'param' },
  },
  { path: 'callback', component: CallbackComponent }, // does nothing but setting up auth
];

Guard for a specific configuration

To guard a route using a specific configuration, you can use the autoLoginPartialRoutesGuardWithConfig function. This function takes the configuration ID as a parameter and will use the specified configuration to perform the login process.

import { autoLoginPartialRoutesGuardWithConfig } from 'angular-auth-oidc-client';

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [autoLoginPartialRoutesGuardWithConfig('config-id')],
  },
];

NgModule (Guard classes)

Instead of the functional guards, you can also use the guard classes.

info

If you use multiple configurations, both the functional autoLoginPartialRoutesGuard and the AutoLoginPartialRoutesGuard class select the first provided configuration to perform the login. Use autoLoginPartialRoutesGuardWithConfig('configId') to choose another one.

note

The AutoLoginPartialRoutesGuard class implements canActivate, canActivateChild and canLoad, but not canMatch. Angular has deprecated canLoad; to guard lazy-loaded routes with canMatch, use the functional autoLoginPartialRoutesGuard instead, which also works in NgModule based applications.

import { AutoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  { path: 'home', component: HomeComponent },
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AutoLoginPartialRoutesGuard],
  },
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then((m) => m.CustomersModule),
    canLoad: [AutoLoginPartialRoutesGuard],
  },
  { path: 'unauthorized', component: UnauthorizedComponent },
];

AutoLoginAllRoutesGuard (deprecated)

warning

AutoLoginAllRoutesGuard is deprecated and will be removed in a future version. Use autoLoginPartialRoutesGuard instead. More information: Why is AutoLoginAllRoutesGuard not recommended?