NG OIDC Client
An Angular package wrapping oidc-client-js to manage authentication with OIDC and OAuth2 in a reactive way using NgRx.
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-clientif not already the case, install the necessary peer dependencies
npm install -s @ngrx/store
npm install -s @ngrx/effects
npm install -s oidc-clientAdd 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.htmlExample 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