Skip to content

A package for managing OpenID-Connect authentication in Angular apps, wrapping oidc-client-js

License

Notifications You must be signed in to change notification settings

source-inc/ng-oidc-client

Repository files navigation

NG OIDC Client

npm npm Maintenance

An Angular package wrapping oidc-client-js to manage authentication with OIDC and OAuth2 in a reactive way using NgRx.

OIDC State in Redux DevTools

Getting started 🚀

The configuration for the examples are based on running IdentityServer4 on localhost. A ready-to-go reference implementation for testing purposes can be found at ng-oidc-client-server.

Install the package

npm install -s ng-oidc-client

if not already the case, install the necessary peer dependencies

npm install -s @ngrx/store 
npm install -s @ngrx/effects 
npm install -s oidc-client

Add the NgOidcClientModule to your AppModule

export interface State {
  router: RouterReducerState;
}
export const rootStore: ActionReducerMap<State> = {
  router: routerReducer
};

@NgModule({
  declarations: [AppComponent, ProtectedComponent, HomeComponent, LoginComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(rootStore),
    EffectsModule.forRoot([]),
+    NgOidcClientModule.forRoot({
+     oidc_config: {
+       authority: 'https://localhost:5001',
+       client_id: 'ng-oidc-client-identity',
+       redirect_uri: 'http://localhost:4200/callback.html',
+       response_type: 'id_token token',
+       scope: 'openid profile offline_access api1',
+       post_logout_redirect_uri: 'http://localhost:4200/signout-callback.html',
+       silent_redirect_uri: 'http://localhost:4200/renew-callback.html',
+       accessTokenExpiringNotificationTime: 10,
+       automaticSilentRenew: true,
+       userStore: new WebStorageStateStore({ store: window.localStorage })
+     },
+     log: {
+       logger: console,
+       level: Log.NONE
+     }
+   })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

For a complete list of configuration options please see the official oidc-client-js documentation.

Coming soon: Example configuration Using ng-oidc-client with Auth0 and Okta

Inject the OidcFacade in your Component

...
export class HomeComponent {
  constructor(private oidcFacade: OidcFacade) {
    // Call to get user from storage
    this.oidcFacade.getOidcUser();
  }

  loginPopup() {
    this.oidcFacade.signinPopup();
  }

  logoutPopup() {
    this.oidcFacade.signoutPopup();
  }
}

Alternatively you can you also use .signinRedirect(); or .signoutRedirect();.

Create a new directory called static below the src folder, to serve the static callback HTML sites.

src/static
├── callback.html
├── renew-callback.html
└── signout-callback.html

Example for a callback.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Callback</title>
  <link rel="icon"
        type="image/x-icon"
        href="favicon.png">
  <script src="oidc-client.min.js"
          type="application/javascript"></script>
</head>

<body>
  <script>
    var Oidc = window.Oidc;

    var config = {
      userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
    }

    if ((Oidc && Oidc.Log && Oidc.Log.logger)) {
      Oidc.Log.logger = console;
    }
    var isPopupCallback = JSON.parse(window.localStorage.getItem('ngoidc:isPopupCallback'));

    if (isPopupCallback) {
      new Oidc.UserManager(config).signinPopupCallback();
    } else {
      new Oidc.UserManager(config).signinRedirectCallback().then(t => {
        window.location.href = '/';
      });
    }
  </script>
</body>

</html>

Example for a renew-callback.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Renew Callback</title>
    <link rel="icon"
          type="image/x-icon"
          href="favicon.png">
</head>

<body>
    <script src="oidc-client.min.js"></script>
    <script>
        var config = {
            userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
        }
        new Oidc.UserManager(config).signinSilentCallback().catch(function (e) {
            console.error(e);
        });
    </script>
</body>

</html>

Example for a signout-callback.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Signout Callback</title>
  <link rel="icon"
        type="image/x-icon"
        href="favicon.png">
  <script src="oidc-client.min.js"
          type="application/javascript"></script>
</head>

<body>
  <script>
    var Oidc = window.Oidc;

    var config = {
      userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
    }

    if ((Oidc && Oidc.Log && Oidc.Log.logger)) {
      Oidc.Log.logger = console;
    }

    var isPopupCallback = JSON.parse(window.localStorage.getItem('ngoidc:isPopupCallback'));

    if (isPopupCallback) {
      new Oidc.UserManager(config).signoutPopupCallback();
    } else {
      new Oidc.UserManager(config).signoutRedirectCallback().then(test => {
        window.location.href = '/';
      });
    }
  </script>
</body>

</html>

Modify your angular.json to include the static assets and oidc-client

...
"assets": [
    "src/favicon.ico",
    "src/assets",
+   {
+     "glob": "**/*",
+     "input": "src/static",
+     "output": "/"
+   },
+   {
+     "glob": "oidc-client.min.js",
+     "input": "node_modules/oidc-client/dist",
+     "output": "/"
+   }
  ],
...

You will be able to authenticate against your configurated identity provider and the obtained user will be accessible in through the created state.

Protecting Routes using an AuthGuard 💂

Create a new Service and implement the AuthGuard interface

export class OidcGuardService implements CanActivate {
  constructor(private router: Router, private oidcFacade: OidcFacade) {}

  public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    return this.oidcFacade.identity$.pipe(
      take(1),
      switchMap(user => {
        console.log('Auth Guard - Checking if user exists', user);
        console.log('Auth Guard - Checking if user is expired:', user && user.expired);
        if (user && !user.expired) {
          return of(true);
        } else {
          this.router.navigate(['/login']);
          return of(false);
        }
      })
    );
  }
}

The guard needs to inject the OidcFacade to check if the user exists and is not expired. It is up to the application flow if the unauthenticated user is redirected to a login route or not.

Add the Guard to the list of providers in your AppModule

...
providers: [
+   OidcGuardService,
  ],
...

Using HTTP Interceptor to add the Bearer token to API calls 🐻

In case an API requires a valid access token to interact with it, an HTTP Interceptor can be used to add the required Bearer token to each call.

Create a new Service and implement the HttpInterceptor interface

export class OidcInterceptorService implements HttpInterceptor {
  static OidcInterceptorService: any;
  constructor(private oidcFacade: OidcFacade) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.oidcFacade.identity$.pipe(
      take(1),
      switchMap(user => {
        if (user && !user.expired && user.access_token) {
          req = req.clone({
            setHeaders: {
              Authorization: `Bearer ${user.access_token}`
            }
          });
        }
        return next.handle(req);
      })
    );
  }
}

The interceptor needs to inject the OidcFacade to check if the user exists, is not expired and has an access token. The outgoing request will be cloned and an Authorization Header will be added to the request. Additionally, the requests should be filtered to only add the Bearer token where it is needed.

Add the Interceptor to the list of providers in your AppModule

...
providers: [
+   {
+     provide: HTTP_INTERCEPTORS,
+     useClass: OidcInterceptorService,
+     multi: true
+   }
  ],
...

Docs

You'll find a more detailed Documentation in our Wiki

Articles

Examples

Coming soon

Licence

This software is licensed under the MIT