ReactJS Authentication with Auth0 – Part 1 ( Configure your Auth0 account )
ReactJS Authentication with Auth0– Part 1
After a new trend of Single page applications, it became more popular and used by many domains. Before that authentication for the traditional web apps for a round-trip to the server was working great. Then how do we do authentication in single page applications?
Well, there are various OAuth authentication methods, here I'm going to explain to use Auth0 server for our react application for authentication.
So, What is Auth0?
Auth0 provides authentication and authorization as a service. You can connect any Single page application to Auth0 and customize the identity providers that you will need to use. For example Facebook, Google, Microsoft or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
Auth0 can help you to add authentication to your SPAs (Single Page Applications) using your social media accounts as well as unique identity accounts. Auth0 Support for generating signed JSON Web Tokens to call your APIs and flow the user identity securely. It Provides analytics on how, when and where users are logging in. Fetch data from other sources and add it to the user profile using Javascript standard and rules.
Identity industry standards that used in Auth0 are OAuth 1, OAuth 2, JSON Web Tokens, Security Assertion Markup Language (SAML), WS-Federation.
Creating an account on Auth0
It's free for an initial start and paid when it is scaled on larger bases. You will simply need to go to https://auth0.com/signup and select any of your GitHub, Google or Microsoft account to login. I'm going to use JSON Web Token for authenticating user request with Auth0 server.
JSON Web Token basically have three components, a Header, Payload, and Signature. As you can see above picture.
1. Header: Header describes the token, and type of token
2. Payload: Payload has multiple properties like JSON object
{ subscriber, User-id, any info. about user or roles)
3. Signature: Ensure the integrity of our JSON web token. All components are base64 encoded. Similar to a given image.
All three parts of JWT token are encrypted like below and concatenated with 3 dots. This can be used as a query parameter in Get request.
Steps to get started
Steps 1: Register with your Google, GitHub or Microsoft
You can sign up by clicking on a sign-up button or with any Github account, Google, Microsoft like below
Steps 2: Enter Tenant name
Next step is once you logged on you will need to give a domain name to your account that will be created for you and region of your choice. After that Account Type and some use full info.
Auth0 offers you about 7000 users before they charged you. You will have a dashboard as given below.
In the dashboard, you can see every useful information like every login, users, graph and so on.
Steps 3: Create client account
Next step is to create a client account.
Now you will need to select the type of your application. Here I'm using Single Page Applications. Then you will need to click to Create Button. You will see below the screen for selection web application type. In this Auth0 demo, I'm using React but you can use any of your choices like Vue or angular or anything.
Then you will see a list of applications of your account.
After once you click on the gear icon you will be redirected to the setting page for selected web application type.
You will find your client id and secret here and allowed callback URL for your web application as a response. In the next Part, I'll show you how to add authentication layer to you react application using Auth0.
Posted by: Nikunj Patel
Software Developer
Comments