JWT Token-Based Auth with AngularJs

Recently I developed a large customer portal where users should be able to login via different authentication providers. The backend is purely written in C# where as the frontent is basically a AngularJS Application.
Authentication Flow

As our entry point is an AngularJS application, we decided to use the Hybrid-Authentication Flow as defined in this RFC and explained in this article (http://www.heise.de/developer/artikel/Flexible-und-sichere-Internetdienste-mit-OAuth-2-0-2068404.html?artikelseite=2)


From the backend perspective, the whole authentication process is delegated to the Identity Server from ThinkTecture, a C# Component which provides an OpenId-Connect (also known as OIDC) compilant authentication-server.

Check it out at https://identityserver.github.io/Documentation/docsv2/, the version 2.0 was just released a few days ago.

As per this delegation, a trusted relationship needs to be established between the backend-system (a .NET Application in our case) an the Identity Server. Mostly this is done with PKI and a signature to check the validity of the token when the client (the browser in our case) sends the token back to the server as Http-Header like Authentication: Bearer id....

Existing Libraries

The following libraries are more or less compatible with AngularJS and the given approach

Anvil Connect

Page: http://anvil.io/

  • Works with OpenId and some small adjustments
  • Has no refresh functionality

heise.de Sample

Page: https://github.com/manfredsteyer/angular-with-openid-connect
Blog: http://www.heise.de/developer/artikel/Tipps-und-Tricks-fuer-AngularJS-Teil-3-OAuth-2-0-2620374.html?artikel

  • Validates Issuer, Audience, Nonce
  • Refresh included
  • Claims Parsing included
  • Does not not Logout at IdServer (destroy session on idServ)
  • Nonce must be generated @ Server (stateful somehow)


Page: https://github.com/sahat/satellizer

  • Does not handle token response in client
  • Needs server component who exchanges accesstoken to a idtoken


Page: http://andreareginato.github.io/oauth-ng/
Code: https://github.com/andreareginato/oauth-ng

  • Not OIDC-Compatible
  • Does not directly handle callbacks


Page: https://github.com/JamesRandall/AngularJS-OAuth2
Blog: http://www.azurefromthetrenches.com/?p=2241

  • Wrapped in a directive
  • Not OIDC Compatible
  • No Refresh Handling

Active Directory Authentication Library m(ADAL) for Javascript

Page: https://github.com/AzureAD/azure-activedirectory-library-for-js

  • Conceptual fine
  • Tightly coupled to Azure AD


All of the mentioned libraries have different benefits (i.e. well styled, nice community or support for various external Identity Providers). All I wanted was a AngularJS-Compatible module to integrate with a OpenId-Connect capable Identity Server. I didn't expect that there will be no library which addresses this requirements. So I ended up at this point thinking of writing such a library itself.



The Angular-JS Module has the following capabilities:
  • Login / Logout from an Idp
  • Stores token in Browser-Storage and reaccess it later
  • Configurable API-Urls to intercept with Authentication-Header
  • Hightly Configurable
  • Several Events (i.E. TokenExpiration, MissingToken, Login, Logout, etc.)
  • Fully integrated into client-Code (no server component needed)

Check out the sources on: https://github.com/michaelschnyder/oidc-angular or, as common in the Javascript-World

bower install michaelschnyder/oidc-angular


Popular posts from this blog

Home Assistant in Docker with Nginx and Let's Encrypt on Raspberry Pi

Use Bodmer TFT_eSPI Library with PlatformIO

Migrating from Arduino IDE to Visual Studio Code to PlatformIO