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)

Sequence

Backend-Implementation

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....

Frontend (AngularJS)

As you see in the the sequence, there is no direct communication between the Portal-Api and the Idp for Authentication and Authorisation or an user to a specified resource. The whole authentication process is handled by the Idp and the Browser (or the AngularJS) application itself. This includes

  • Check existence of valid token in Browser-Store
  • Redirect to Idp with correct redirect_uri (back to the SPA)
  • Storing token in the Browser-Store
  • Validate Expiration of Token
  • Add Autnentication-Header to Api-Calls to the Portal-Api
  • Logout-Functionality
  • (Optional): Self-Update issued token as long user is active

Please note, some of the tasks should also be done in the server (i.E. Token Expiration Checks). This is already handled by the OAuth-Owin-Middleware in .NET.

With these requirements in mind, i found the following client libraries to support the Auth-Process in the client.

Existing Libraries

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

Anvil Connect

Page: http://anvil.io/

Notes:

  • 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

Notes:

  • 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)

Satellize

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

Notes:

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

oauth-ng

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

Notes:

  • Not OIDC-Compatible
  • Does not directly handle callbacks

AngularJs-Oauth2

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

Notes:

  • 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

Notes:

  • Conceptual fine
  • Tightly coupled to Azure AD

Decision

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.

Tada!

OIDC-Angular

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