Auth0 React Sample Application

This sample demonstrates the following use cases:

• Login
• Logout
• Showing the user profile
• Protecting routes
• Calling APIs

Project setup

Use yarn to install the project dependencies:

npm install

Configuration

Create an API

For the "call an API" page to work, you will need to create an API using the management dashboard. This will give you an API identifier that you can use in the audience configuration field below.

If you do not wish to use an API or observe the API call working, you should not specify the audience value in the next step. Otherwise, you will receive a "Service not found" error when trying to authenticate.

Configure credentials

The project needs to be configured with your Auth0 domain and client ID in order for the authentication flow to work.

To do this, first copy src/auth_config.json.example into a new file in the same folder called src/auth_config.json, and replace the values with your own Auth0 application credentials, and optionally the base URLs of your application and API:

{
  "domain": "{YOUR AUTH0 DOMAIN}",
  "clientId": "{YOUR AUTH0 CLIENT ID}",
  "audience": "{YOUR AUTH0 API_IDENTIFIER}",
  "appOrigin": "{OPTIONAL: THE BASE URL OF YOUR APPLICATION (default: http://localhost:3000)}",
  "apiOrigin": "{OPTIONAL: THE BASE URL OF YOUR API (default: http://localhost:3001)}"
}

Note: Do not specify a value for audience here if you do not wish to use the API part of the sample.

Run the sample

Compile and hot-reload for development

This compiles and serves the React app and starts the backend API server on port 3001.

npm run dev