Error: "domain option is required" in Auth0 create-react-app

Question

In writing a create-react-app application with authentication provided by Auth0, using a .env file, I am getting a "domain option is required" error. What's causing it and how do I fix it?

(As seen in the code import statements, I'm using the react-use-auth npm module.)

Note: This answer to this question may be found in other SO questions, but they don't reference this error. Hopefully this question helps people with this error find the solution faster. I'm posting the solution I found, but if this error has other causes it'd be great to document those, too.

index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import { withRouter } from "react-router-dom";
import { AuthProvider } from "react-use-auth";
import App from './App';

ReactDOM.render(
  <React.StrictMode>
  <AuthProvider
    navigate={props.history.push}
    auth0_domain={process.env.REACT_APP_AUTH0_DOMAIN}
    auth0_client_id={process.env.REACT_APP_AUTH0_CLIENT_ID}>
    <App />
    </AuthProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

export default withRouter(App);

.env file (in root directory created by create-react-app):

REACT_APP_AUTH0_DOMAIN=[auth0_domain_name]
REACT_APP_AUTH0_CLIENT_ID=[auth0_client_id]

score 3 · Answer 1 · answered Apr 11 '20 at 06:07

Watch your .env and environment variables!

As documented here, the "domain option is required error" can be caused by a problem with the environment variables. In fact, replacing

{process.env.REACT_APP_AUTH0_DOMAIN} and {process.env.REACT_APP_AUTH0_CLIENT_ID}

with the actual values makes the error go away.

When using the .env file be aware of the following points (nicely explained in this SO answer):

1. create-react-app has its own mechanism to access the .env file (no need to use dotenv).

2. Make sure the environment variables have the prefix REACT_APP_.

3. Make sure the .env file is in the app's root directory (when created by create-react-app).

4. Make sure to RESTART the app from the command line for .env changes to take effect.

All of these have tripped me up, but most recently it was not restarting (#4) that caused this error.

Error: "domain option is required" in Auth0 create-react-app

1 Answers1