Authentication Syndication with React and Auth0

The needs for identifying a user on your application is very common. Identity, personal data, preferences, permissions, etc are some of the cases where you will require to user a mechanism to authenticate a user who is accessing your app.

Authentication

Authentication is the process of confirming a users identity against an entity capable of doing so. This entity on software development is referred commonly as an Authentication Provider.

Authentication Provider

In modern web applications the Authentication Provider is responsible to confirm the users identity in one of several ways, for example:

A Username / Password combination on a database

A third party service

A directory service

A social network. ex: Google, Facebook,

An Identification Service: Github, Microsoft, etc

An authentication provider can be an entity built within the system, a separate service built for this purpose or also can be a third party service.

This last way, can also be referred as Authentication as a Service, and has grownth considerably the last few years and the most popular services on this space are:

If successful, it generates a token to identify him against any other entity

The user receives the token and saves it to use with any subsequent request to access protected services

The User makes a request to a protected service or resource

The protected service checks the validity of the token with the Auth Provider

If successful, allows the use of the resource

Auth0

In this tutorial we’ll show you how to use React.js and Auth0 to create and to handle User Authentication for a web application.

Auth0 provides authentication and authorization as a service, this help Front-End Developers build applications that need authentication without backend service.

Features

Auth0 allows to perform features like:

OAuth 2.0 (OAuth 2.0 is the industry-standard protocol for authorization)

Dashboard (Latest Logins, New Signups, Login Activity)

Create an Application (SPA, Native, RWA)

APIs

SSO Integrations

Connections (Database, Social, Enterprise, Passwordless)

Universal Login

Users & Roles

Rules

Hooks

Multifactor Authentication

Emails (Templates, Providers)

Logs (Successful Logins, Issues)

Intended Audience

This tutorial is mainly aimed at users who are familiar with React.js and who want to expand their knowledge by implementing technologies that allow the authentication of users without knowledge in the backend.
Getting Started
The developers at Auth0 created this platform to solve the most complex and large scale identity use cases for global companies with its extensible and easy to integrate platform, ensuring billions of logins every year. We will only use some of the simplest features to perform our authentication in simple steps.
1. Create an Account on Auth0 (auth0 it's also free servic to use as a platform and pricing changes.)
See pricing details here: https://auth0.com/pricing
2. Once you registered your email and password in Auth0 UI, you need to set a TENANT DOMAIN, you can set as you want.
We will call tutorial-react-auth0.auth0.com and set our region as ES (United States) (Step 1 of 2)
3. Once you set TENANT DOMAIN and REGION, you need to select an account type, role, and main challenge.
In our case, we need to choose account type: Personal, Role: Developer, Main Challenge: Fast setup + seamless auth
(Step 2 of 2) and that's all for now, you'll be redirect to the dashboard of auth0 note that's included the features that I introduced previously, now we need to setup our project.
4. Go a head and click on the dashboard "Create Application" you may notice there's a lot of application types.
We need to choose as SPA (Single Page Application) you will able to call it with a name. In our case we set to
React-Auth0-Tutorial and click on "Create".
5. Nicely done, at this point auth0 want to ask us what tecnhology we are using. We need to select "React" as our Technology,
and now we got our first application on Auth0, we need now to integrated with React.js, you can see the overview of our application. QuickStart, Settings, Addons, Connections for now, leave empty, and stay connect in the Auth0 web.
6. We need configure React.js Enviroment, you previously need to had a npx create-react-app. So, after that we need open the terminal and open the react project that we set for our project and handling authentication.

Now, we need to configure our routes, and our connection with auth0.
Creating our project structure.
1. Create a folder called /modules
2. Inside of modules folder create a folder called authentication
3. Inside of modules folder create a folder called main this is for the principal view.
4. Inside of modules folder create a folder called profile this is for the profile view.
5. Inside of main folder create a JavaScript File called "MainView.js" and inside of profile folder create a "ProfileView.js"
6. For Views, import React, and set it to a Class Component, with a render method, and return an
<React.Fragment></React.Fragment> for now and export default this views.
7. Inside authentication folder create a file called config.js

Setting our App.js

Now that we have already made our views, and exported, we need to import into our App.js
Look at the code below. For now just import the MainView.

Check these images below, you can easily copy all information to set in our config.js file.
Some of these features are:
* Application Name
* Domain
* Client ID
* Client Secret
* Description
* Application Logo
* Application Type (e.g You can also switch from SPA to Native)
* Allowed Callback URLs (Check the second image below)
* Allowed CORS, Origins, Application LOGO URI, Allowed Logout URLS.
In the same picture, you can read all about each option that can be setting.
See the last image in this step, the code will looks like this.
Also you can declare constant for the naming of Domain, and Client for mantain the code.

Go to main/MainView.js to set up the Auth0 functionality.

Look the image of the code below.
We're using a simple default button tag, and set a attribute onClick, after that we bind a function
openLockWidgetAuthenticator, and this function will toggle the modal of auth0.
Look at the image of the auth0 authenticator modal.
Now we need to define, our callback view, for parsing our athentication.

Creating a Callback View.

1. We need to creating our CallbackView and set as a functional component.
2. Check the image below, we add a method to our App.js, handleAuthentication.