Angular SPA with Auth0 Implementation

As part of Authorization Code flow implementation, we developed a sample Angular SPA, which made use of Auth0 as the Identity Provider and Validator.

Auth0 provides authentication and authorization as a service. We can connect any application (written in any language or on any stack) to Auth0 and define the identity providers we would want to use (how would we want our users to log in). Based on app’s technology, we just have to choose one Auth0 SDKs, or just call Auth0 APIs, and hook it up into our app. Now each time a user tries to authenticate, Auth0 will verify their identity and send the required information back to the app. Key thing to make note of is, Auth0 supports OAuth2 and OpenID Connect. Sad part is, Auth0 is not completely free. There is a free tier with limited resources available at our doorstep.

Let’s see how our sample app made use of Auth0:

This is the basic page, which is shown if user is not logged in. Upon logging out, this is also the page that will be called back from Auth0 upon logging out.

When clicked on login, we are calling the “auth0.authorize()” method, where auth0 is object initialized from ‘auth0-js’ node dependency where it takes in parameters like clientID, domain, responseType, scope etc. The clientID needs to be obtained upon registering our SPA app at Auth0 website.
We have allowed self-registration and allowing logging in through Microsoft Accounts/WindowsLive.

Once we have given our consent, we are redirected to the main page of our SPA from where we can access resources/resource server.

Users who have logged in/got access, are shown in the Auth0 dashboard. Anytime from the dashboard we can revoke/delete the user.

Code for this sample app is available at the following Github location: