Start React with Auth0

How to integrate Auth0 on React applications?

Open a terminal, issue the following command:

This may take a couple of minutes depending on your internet connection to create the whole thing. However, when this tool finishes, issue the following commands to run your react app.

This will start a development server that listens at port 3000 and will open the new app in your default web browser.

Now back to your terminal, run the following command:

This command will install two libraries that will handle a navigation in our app.

Update index.js :

In the new version of this file, you are just importing BrowserRouter from the react-router-dom library, and encapsulating your App component inside this router. That's all you need to start using React Router.

Dialog box will appear, you will have to insert a name of our application (for example, “React with auth0”) and then choose Single Page Web Application as its type. Then click create button, this will redirect you to its Quick start section. After that, you will have to click on the setting tab to change the configuration of your Auth0 application and also to copy some values from it.

The reason why you need this URL is that, while authenticating through Auth0, your users will be redirected to its Universal Login Page and, after the authentication process (successful or not), they will be redirected back to your application. For security reasons, Auth0 will redirect your users only to URLs registered on this field.

Then add Allowed Web Origins and Allowed Logout URLs:

Now to secure our react app, we need one library: auth0-js. This is official library provided by Auth0 to secure SPA like ours. To intsall it, go to terminal and run the following command:

Then, create a class which will help for Auth0 authentication functionality. For that create a new file Auth.js inside src folder in our react app and insert following code.

As you can see, in this file, you are creating a module that defines the Auth class with seven methods:

To handle the callback route (http://localhost:3000/callback),lets define this component, create a new file called Callback.js inside the src directory and insert the following code into it:

The component you just defined is responsible for two things. First, it calls the handleAuthentication method to fetch the user information sent by Auth0. Second, it redirects your users to the home page (history.replace('/')) after it finishes the handleAuthentication process. In the meantime, this component shows the following message: "Loading profile".

Update our App.js .

create a new file Home.js inside src folder in our react app and insert following code.

Here, at componentDidMount we are just validating the user if it is authenticated or not.

This article is just an introduction of React with Auth0 . There are lot to improve to make our application more secure with Auth0.

This article is just a summary of article below.

Related posts:

This poem is an edited version of an original from my debut poetry collection, Portrait of a City on Fire, which is currently available on Amazon worldwide via Impspired Publishing.

Breast cancer is a disease in which malignant (cancer) cells form in the tissues of the breast. Breast cancer begins when there is uncontrollable growth of cells in the breast. Gradually these cells…

This is a sort of follow-up to Drop lazy loaded modules like they’re hot … with Angular + Webpack now that Angular 6 has been out for awhile and usage of the CLI (v6) is quite compelling given the…