Configuring angular-auth-oidc-client with the new functional APIs

Modified July 08, 2023

Tim Deschryver

timdeschryver.dev

The last versions of Angular included new APIs to configure your application(s) in a functional way. Think of the new functional guards, and the new APIs for the HTTP client including functional interceptors. Of course, there are also standalone components, which introduced EnvironmentProviders.

The latest version of angular-auth-oidc-client (v16.0.0) includes new functionality to support the new Angular APIs. In this blog post, I'll show you how to use them.

format_quote

If you prefer to just see the code, you can find the sample application here. You can also run this example to see it in action.

provideAuth link

Let's start with configuring the authentication module, which is the first step towards using the library.

Instead of using the AuthModule, you can use the provideAuth method to configure the authentication flow. Pass it the same configuration options as you would with the AuthModule (the config object is the same) while invoking the provideAuth method.

 main.ts content_paste
import { provideAuth } from 'angular-auth-oidc-client';
 
bootstrapApplication(AppComponent, {
    providers: [
        provideAuth({
            config: {
                /* Config options comes here */
            },
        }),
    ],
});

authInterceptor link

To pass add the user's access token to the HTTP requests, you can now use the authInterceptor function. Previously, you had to use the HTTP_INTERCEPTORS injection token to register the AuthInterceptor class provided by the library. Using authInterceptor is easier as you'll see in a second.

To use authInterceptor, simply include it within the withInterceptors method while registering the HTTP client using provideHttpClient.

 main.ts content_paste
import { authInterceptor } from 'angular-auth-oidc-client';
 
bootstrapApplication(AppComponent, {
    providers: [
        provideHttpClient(withInterceptors([authInterceptor()])),
    ],
});

autoLoginPartialRoutesGuard link

Lastly, to protect the Angular routes, you can use the autoLoginPartialRoutesGuard method. Using the guard secures the route, and ensures that the user is authenticated before the route is activated. A route that is protected by this guard will redirect the user to the login page if she's not authenticated.

With the previous version, you had to use the class-based guards AutoLoginAllRoutesGuard or AutoLoginPartialRoutesGuard to protect the Angular routes.

To protect a route, append autoLoginPartialRoutesGuard to the canActivate or canMatch property of the route.

 main.ts content_paste
import { autoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';
 
bootstrapApplication(AppComponent, {
    providers: [
        provideRouter([
            {
                path: 'protected',
                component: ProtectedComponent,
                canActivate: [autoLoginPartialRoutesGuard],
            },
            {
                path: 'feature',
                loadChildren: () => import('./feature/feature.routes').then((m) => m.routes),
                canMatch: [autoLoginPartialRoutesGuard],
            },
        ])
    ],
});

Putting it all together link

When putting all of this together, you'll end up with something like this:

 main.ts content_paste
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import {
  provideAuth,
  authInterceptor,
  autoLoginPartialRoutesGuard,
} from 'angular-auth-oidc-client';
import { AppComponent } from './app/app.component';
import { ProtectedComponent } from './protected/protected.component';
 
bootstrapApplication(AppComponent, {
  providers: [
    provideAuth({
      config: {
        /* Config options comes here */
      },
    }),
    provideHttpClient(withInterceptors([authInterceptor()])),
    provideRouter([
      {
        path: 'protected',
        component: ProtectedComponent,
        canActivate: [autoLoginPartialRoutesGuard],
      },
      {
        path: 'feature',
        loadChildren: () => import('./feature/feature.routes').then((m) => m.routes),
        canMatch: [autoLoginPartialRoutesGuard],
      },
    ]),
  ],
});

You can a working example here.

To have an overview of all the new APIs, check out the migration guide.

Feel free to update this blog post on GitHub, thanks in advance!

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Share this post