Route Guards💂 to guard routes with ng-oidc-client

Using Route Guards to guard routes with NG OIDC Client

This is a follow up post of “Securing your Angular 7+ application with OIDC and NgRx”. We’ll be building in this example right on top of the previously created DraftApp. If you want to follow along but skip the initialization of the Angular App, grab the final code from GitHub and continue right away:
https://github.com/alx-andru/draft

First, we need to add more components and a guard. The HomeComponent will be publicly available and we will use the ProtectedComponent as an example to apply the AuthGuard. It will be only accessible after the user authenticated successful. In addition we’ll use the UnauthorizedComponent to prompt the user to login if not authenticated.

ng g c home
ng g c protected
ng g c login
ng g g providers/auth

We replace our app.component.html and app.component.ts to add the simplified navigation to /home and the secured /protected route. We’ll also add a signout button to sign our authenticated user out from our application.

As we now have a dedicated LoginComponent we have to move our Login button from the previous AppComponent to the LoginComponent.

We leave the previously generated HomeComponent and ProtectedComponent untouched.

Finally we get to implement our AuthGuard. The implementation is opinionated and depending on your case and UI flow you might want to handle things different.

In case the client is just in the process of waiting to obtain a new token, the guard first waits until the authentication is loaded. If the loading flag is set to false, we’ll try to read the resolved identity from the oidc state. If the user exists and hasn’t expired yet, the route change can pass and we’ll be able to see our protected route, otherwise the user will be routed the login where we show the button to login.

To tie everything together we need to add the RouterModule and the corresponding routes to our AppModule.

Our final result should look and behave like following:

Redirecting back to protected route after successful signin using state

— Leave a comment if you’d like to see a full article on the optional arguments

TLDR: you’ll have to add the routing information into state by passing the data attribute into the signinRedirect() or signinPopup() function as an argument.

this.oidcFacade.signinRedirect({
  data: {
    redirect_url: 'http://localhost:4200/protected'
  }
});

In your callback.html you’ll have to read the information from state and and adjust the location.

new Oidc.UserManager().signinRedirectCallback().then(user => {
  window.location.href = user.state.redirect_url || '/';
});

Keep exploring the capabilities of the library:

• Using HttpInterceptor to add a Bearer 🐻 token to API calls with ng-oidc-client
• Ready, Set, OidcActions! 🎬

Restricting access to your entire application or parts of it is one of the most common tasks when adding authentication. If you’d like to learn more about Route Guards and how to use them in Angular, look at some of the following tutorials and posts that I found incredible helpful:

• Offical Angular Documentation on Route Guards
• Angular Authentication: Using Route Guards
• Protecting Routes using Guards in Angular

Feel free to leave comments with any questions, feedback or ideas 🙌 …