I have been blogging and writing code for Angular and OpenID Connect since Nov 1, 2015. Now after all this time, I have decided to create my first npm package for Angular: angular-auth-oidc-client, which makes it easier to use the Angular Auth OpenID client. This is now available on npm.
npm package: https://www.npmjs.com/package/angular-auth-oidc-client
github code: https://github.com/damienbod/angular-auth-oidc-client
issues: https://github.com/damienbod/angular-auth-oidc-client/issues
Using the npm package: see the readme
OpenID Certification
This library is certified by OpenID Foundation. (Implicit RP)
Features:
- Angular 4 onwards
- Supports OpenID Implicit Flow http://openid.net/specs/openid-connect-implicit-1_0.html
- Complete client side validation for REQUIRED features
- OpenID Connect Session Management 1.0 http://openid.net/specs/openid-connect-session-1_0.html
- AOT build, rollup build
- Can be lazy loaded
Notes:
FabianGosebrink and Roberto Simonetti have decided to help and further develop this npm package which I’m very grateful. Anyone wishing to get involved, please do and create some issues and pull-requests. Help is always most welcome.
The next step is to do the OpenID Relying Parties certification.
Software Engineering 
[…] angular-auth-oidc-client Release, an OpenID Implicit Flow client in Angular (Damien Bowden) […]
Hi @damienbod,
Any reason why you didn’t use oidc-client-js created by brockallen (https://github.com/IdentityModel/oidc-client-js)?
Thanks
Christian
Hi Christian
brockallen’s lib is great, I just wanted one which is fully integrated in Angular and easy to change, optimise or use with Angular routing, AoT, lazy loading.
Greetings Damien
Hey Damien thanks for the reply.
It would be really great to include in the github readme a comparison of the features between your library and the following:
* oidc-client-js
* angular-oauth2-oidc (https://github.com/manfredsteyer/angular-oauth2-oidc)
Hi Christian, In general I don’t like to compare. All I know is that brockallen’s is OpenID certified, or feature complete for OpenID Connect Implicit Flow, and I’m getting mine certified now.
Greetings Damien
OK, fair enough! Good to know about the certification.
BTW, thanks for making all this information and solutions available.
thanks
Damien , just wanted to say this sounds great to me! i am using brock’s package right now but as i am doing an angular project having the code start in typescript has a lot going for it…. will see how this looks and if i can swap packages w/o to many issues.
Thanks, if anything is missing let me know, greetings Damien
one thing i have not had time to look at yet: does your package support doing the OIDC auth in a pop up window ?
the folks i work with do not like having a redirect to the sts and then re-loading the app.
in brock’s package i am able to do a popup for login and that is preferred by boss.
also so far as passing tokens to service calls i am using https://github.com/gund/ng-http-interceptor and have it working very well.
i would say that if your package stays on point to only handle OIDC / OAuth that you could recommend to folks that package to handle passing the tokens to http calls.
then you do not have to mess with covering to many things, stay focused on doing one thing really well.
This lib has no popup support. Adding the Bearer token to the header is not part of this lib, sounds good. Thanks
[…] angular-auth-oidc-client Release, an OpenID Implicit Flow client in Angular […]
hi damien, great work! how do we handle multiple browser login. for example if a user has 2 tabs open and logs out from one, expected behavior would be for the user to be logged out from the other tab as well. Is this something that the library handles?
Hi Mons, thanks
yes, the localStorage is used per default, after a logout, this is cleaned up. The access_token will no long be sent and the user will have to login again
excellent! thank you for your reply.
Hi Damien, this is great! Thank you SOO much for sharing all of your knowledge and code. Question: with Angular 4.3, they released the
HttpClient
( https://angular.io/guide/http#httpclient )
and the HttpInterceptor
( https://angular.io/guide/http#intercepting-all-requests-or-responses )
allowing you to centralize the “Authentication” “Bearer ….” headers on each request.
( https://angular.io/guide/http#setting-new-headers )
I tried updating your AngularClient project in your Visual Studio Implicit Flow sample
(https://github.com/damienbod/AspNet5IdentityServerAngularImplicitFlow/tree/master/src/AngularClient), but am having a little trouble getting all of it converted.
Is this something you might consider updating? …(ie) updating your AngularClient package to use the Angular 4.3 HttpClient along with the HttpInterceptor to automate/centralize those Bearer Token headers?
Thanks so much again for all of your hard work, I truly appreciated it!!
Great idea! Is the update available already?
Hey, just saw a notice and need to check back on how this is going, HttpCLient
yes if you use 4.3 / 4.4 then it’s in the runtime you just need to start using it.
the new HttpClient and interceptor work together so if you setup the interceptor is will not deal with the old Http service.
we have been updating our apps and the changes have not been hard to make, there are a few details that can pop up but nothing that has held us back from making it wiork.
the OIDC token and the interceptor work great.
also HttpClient allows you to use generics like Get(foo)
and for things like a fuile upload you can create a request and subscribe to get status events that can drive a progress bar.
Great article. Thanks for the informative blog.
Can the code be upgraded to Angular 5 and Core 2?
When I am upgrading, it is breaking.
Hi Kc Sahoo, yes, I’m updating now to Angular 5
silent_renew = true , I’m not sure if something wrong with my playground but that setting seem to hit the server to refresh token every seconds. Anyway to control it frequency?
This is a setting on the STS server, increase the lifespan of the id_token