Configure Auth0 Application

Now that we've got a simple application ready, we need to configure the application we created in Auth0. Go back to your application settings page and add http://localhost:3000 to the Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins fields. Then, click Save Changes.

A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be whitelisted in the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.

A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo query parameter. The logout URL for your app must be whitelisted in the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.

You need to whitelist the URL for your app in the Allowed Web Origins field in your Application Settings. If you don't whitelist your application URL, the application will be unable to automatically refresh the authentication tokens and your users will be logged out the next time they visit the application, or refresh the page.

Once that's done, copy down your domain and the application's client ID. Head back over to the code and create a new file called auth.config.js in your src folder. Export an object like this:

export const authConfig = {
  domain: 'replace me',
  clientId: 'replace me'
}

Replace the demo strings with the domain and client ID from your application.

We're all set up — let's get started with the code!