To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

Auth0 provides a React SDK (auth0-react.js) to simplify the process of implementing Auth0 authentication and authorization in React apps.

Install the Auth0 React SDK by running the following commands in your terminal:

cd <your-project-directory>
npm install @auth0/auth0-react

Configure the Auth0Provider component

For the SDK to function properly, you must set the following properties in the Auth0Provider component:

• domain: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead.

• clientId: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.

• authorizationParams.redirect_uri: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.

Now that you have configured your Auth0 Application and the Auth0 React SDK, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method to create a login button that redirects users to the Auth0 Universal Login page. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.

Create a new file in your application called login.js for the login button component, and copy in the code from the interactive panel to the right, which contains the logic needed for login. Then, update your index.js file to include the new login button.

Users who log in to your project will also need a way to log out. Create a logout button using the SDK’s logout() method. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to the logout URL you set up earlier in this quickstart.

Create a new file in your application called logout.js for the logout button component, and copy in the code from the interactive panel, which contains the logic needed for logout. Then, update your index.js file to include the logout button.

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.

The Auth0 React SDK provides user information through the user property. Review the profile.js code in the interactive panel to see an example of how to use it.

Because the user property contains sensitive information related to the user's identity, its availability depends on the user's authentication status. To prevent render errors, you should always:

• Use the isAuthenticated property to determine whether Auth0 has authenticated the user before React renders any component that consumes the user property.

• Ensure that the SDK has finished loading by checking that isLoading is false before accessing the isAuthenticated property.