Skip to content

negarineh/react-auth0

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This project was bootstrapped with Create React App.

Setting Up an Auth0 Application To represent your React application in your Auth0 account, you will need to create an Auth0 Application. So, head to the Applications section on your Auth0 dashboard and proceed as follows:

1. click on the [Create Application button](https://manage.auth0.com/#/applications/create);
2. then define a 'Name' to your new application (e.g., "React Demo");
3. then select 'Single Page Web Applications' as its type.
4. and hit the 'Create' button to end the process.

After creating your application, Auth0 will redirect you to its' Quick Start' tab. From there, you will have to click on the 'Settings' tab to whitelist some URLs that Auth0 can call after the authentication process. This is a security measure implemented by Auth0 to avoid the leaking of sensitive data (like ID Tokens).

So, when you arrive at the 'Settings' tab, search for the 'Allowed Callback ' URLs field and add http://localhost:3000/callback into it. For this tutorial, this single URL will suffice.

That's it! From the Auth0 perspective, you are good to go and can start securing your React application.

If you take your app for a spin now (npm start), you will be able to authenticate yourself with the help of Auth0, and you will be able to see your React app show your name (that is, if your identity provider does provide a name).

Note: As you want the best security available, you are going to rely on the Auth0 login page. This method consists of redirecting users to a login page hosted by Auth0 that is easily customizable right from your Auth0 dashboard. If you want to learn why this is the best approach, check the Universal vs. Embedded Login article .

Note: the following three lines MUST be updated in 'src/Auth/Auth.js':

      domain: '<AUTH0_DOMAIN>',
      audience: 'https://<AUTH0_DOMAIN>/userinfo',
      clientID: '<AUTH0_CLIENT_ID>'

Source: Securing React Apps with Auth0