Angular 4 Authentication With Auth0

Before getting into this, we need to understand how auth0 authentication works. In the traditional approach we store user related information in the server as a session to track the authentication related permission. But later we came to the concept of JWT (JSON Web Token) stateless authentication since user state will not be maintained in server side.

In JWT stateless authentication approach, once the user is authenticated token will be generated at server side then that will be passed to client side to store it in browser’s local storage so that in subsequent requests we can call the api with this stored JWT.

JWT comprises some sort of useful information with respect to user such as Id, Name, Roles, etc. Let’s dive into the implementation of the same.



Third party authentication provider Auth0 has various sets of pricing models but they do have a free plan as well with 7000 users registration and two social media accounts (Facebook, Github, Google, Twitter, etc…).

Pre-requisites

• js version > 6
• Angular Cli (Once installed Node.js , then use with “npm install –g @angular/cli@latest”
• Typescript (“npm install –g typescript@latest”)

We will go step by step to proceed with auth0 authentication.

Setup Auth0 Account

• Go to http://auth0.com login with your credentials
• Once done with above step, click on clients tab from left tab navigation
• Create new Client with app name and client type as single page app
• If you want to show social login in login widget then enable corresponding social login through clicking on connections -> Social.
• Up to now we’re ok to go ahead.

Create Angular App

• First, let’s create angular 4 app with cli using
  • ng new ng4Auth0 (generates the angular app structure)

• Then, we need to install two important libraries of Auth0 to deal with JWT and login widget.
  • npm install –g angular2-jwt auth0-lock --save

• we need to give the reference of lock0 script file in an index.html.
  
  
  

• In app.module.ts file, we need to wire up the reference of Angular2-JWT module as given below in an exported function way.