javascript - 错误: "domain option is required" in Auth0 create-react-app

Question

在使用 .env 文件编写由 Auth0 提供的身份验证的 create-react-app 应用程序时，我收到“需要域选项”错误。是什么原因造成的以及如何修复它？

(如代码导入语句所示，我正在使用react-use-auth npm 模块。)

注意:此问题的答案可能会在其他 SO 问题中找到，但它们不会引用此错误。希望这个问题可以帮助遇到此错误的人更快地找到解决方案。我正在发布我找到的解决方案，但如果此错误有其他原因，最好也记录这些原因。

index.js 文件:

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 文件(在 create-react-app 创建的根目录中):

REACT_APP_AUTH0_DOMAIN=[auth0_domain_name]
REACT_APP_AUTH0_CLIENT_ID=[auth0_client_id]

Answer 1

注意您的 .env 和环境变量!

据记录here ，“需要域选项错误”可能是由环境变量问题引起的。事实上，替换

{process.env.REACT_APP_AUTH0_DOMAIN} 和 {process.env.REACT_APP_AUTH0_CLIENT_ID}

使用实际值会使错误消失。

使用 .env 文件时请注意以下几点(在 SO answer 中有很好的解释):

---

1. create-react-app 有自己的机制来访问 .env 文件(无需使用 dotenv)。

2.确保环境变量具有前缀 REACT_APP_。

3. 确保 .env 文件位于应用程序的根目录中(由 create-react-app 创建时)。

4. 确保从命令行重新启动应用程序，以使 .env 更改生效。

---

所有这些都让我绊倒，但最近并不是重新启动(#4)导致了这个错误。