Link Auth0 Application to React Application
Click the Create Application button.
Sign up for a free Auth0 account here.
Add the name "React Code Sample" and select "Single Page Applications" and the application type then click Create
Click on the Settings tab of your Auth0 Application page, scroll down to "Application URIs" section, and fill in these values:
Allowed Callback URLs http://localhost:4040/
Allowed Logout URLs http://localhost:4040
Allowed Web Origins http://localhost:4040
Scroll down and click the Save Changes button.
On the "Basic Information" section get the Auth0 Domain and Auth0 Client ID values and paste them a .env file in the root of the project.
REACT_APP_AUTH0_DOMAIN=AUTH0-DOMAIN
REACT_APP_AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:4040/
Instructor: [0:01] Next, let's head over to auth0.com and then login. If you don't have an Auth0 account, you can sign up for one in the description. One other thing is, if this your first time signing up for Auth0, you have to create what is called a tenant. This is where you will house your applications for your Auth0 account.
[0:23] Once you're on the Auth0 dashboard, let's create a new application. Let's go to Applications > Applications. Let's click on Create Application, and then for the name, we'll go React Code Sample. Then for the application type, let's choose Single Page Web Applications, since this is a React application, then click Create.
[0:51] Next, we're going to create the communication between Auth0 and the React application.
[1:02] Let's go to settings, and let's scroll down to application URIs. We're going to change allow callback URLs to localhost 4040. This will be the URL that the user will be redirected to after they authenticate with Auth0. Then next we'll go to allow logout URLs. Again we'll do localhost 4040. This is where the user will be redirected after they log out of Auth0 session.
[1:37] Then we'll scroll down to allowed web origins and we'll put localhost 4040 again as well. This is the URL that's making the request to Auth0 for the authentication request, so you put this here to avoid any course issues. Then we'll scroll down to save changes. Let's scroll up and pay attention to the domain and the client ID.
[2:07] In our React application in the route, let's create a .env file. Inside of the .env file, I'm going to paste in the values for the Auth0 domain, the client ID, and the callback URL. Back on the Auth0 dashboard, I'm going to copy the domain. Then I'm going to paste the domain here.
[2:30] Then back on the Auth0 dashboard, I'm going to copy the client ID and then paste the client ID here under React app Auth0 client ID. Then I'm going to click save. With that, the React application and Auth0 are able to communicate back and forth. Now the application is ready to be secured using Auth0.