如何为Heroku上的React应用配置Auth0实现无注册白名单密码保护

1 Auth0后台基础配置 #

• 从Heroku的Auth0附加组件管理页直接跳转进入你的专属Auth0租户后台，无需额外注册账号
• 新建应用，类型选择Single Page Application，名称可自定义
• 进入应用配置页找到「应用URI」板块，三个配置项全部填写你的Heroku应用域名：
  • 允许回调URL：https://你的Heroku应用域名.herokuapp.com
  • 允许登出URL：https://你的Heroku应用域名.herokuapp.com
  • 允许Web源：https://你的Heroku应用域名.herokuapp.com
    填写完成后点击保存

2 关闭公开注册、添加白名单用户 #

• 点击侧边栏「Authentication > Database」，进入默认的Username-Password-Authentication数据库配置页
• 切换到「Options」标签，拉到页面最底部打开「Disable Sign Ups」开关并保存，此时所有用户都无法自主注册
• 切换到「Users」标签，点击「Create User」，依次添加3-4名开发人员的邮箱和密码，完成白名单创建

3 React项目接入 #

• 项目根目录运行命令安装SDK：npm install @auth0/auth0-react
• 打开项目入口文件（一般为src/index.js），用Auth0Provider包裹全局App组件，参考代码：

import { Auth0Provider } from '@auth0/auth0-react';

ReactDOM.render(
  <Auth0Provider
    domain="你的Auth0应用域名，可从Auth0应用配置页复制"
    clientId="你的Auth0应用Client ID，可从Auth0应用配置页复制"
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>,
  document.getElementById('root')
);

• 打开App.js添加登录校验逻辑，未登录用户会自动跳转到登录页：

import { useAuth0 } from '@auth0/auth0-react';

function App() {
  const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();

  if (isLoading) return <div>加载中...</div>;

  if (!isAuthenticated) {
    loginWithRedirect();
    return null;
  }

  // 下方放置原有App业务代码
  return (
    <div className="App">
      {/* 原有业务逻辑 */}
    </div>
  );
}

4 部署验证 #

将修改后的代码推送到Heroku完成部署，访问应用地址会自动跳转登录页，仅你之前添加的白名单用户可登录进入系统。

内容的提问来源于stack exchange，提问作者Perry Cipolloni