集成Auth0的React应用部署到Heroku后提示无认证令牌如何解决

这是我首次在StackOverflow发帖，非常感谢这个出色的社区。我想要咨询集成Auth0的React应用部署到Heroku的相关问题。

本地环境HTTP://localhost:3000运行表现正常：访问时会重定向到Auth0登录页，用户登录成功后会跳转回原页面。但应用部署到Heroku后就报错“No Authentication Token found”，错误内容如下：

我已参考Auth0官方教程完成配置，也在Heroku中添加了Auth0插件、在Auth0中完成了Heroku的SSO集成，但配置仅在本地生效。

相关代码 #

React应用代码 #

import React from "react";
import { useHistory } from "react-router-dom";
import { Auth0Provider } from "@auth0/auth0-react";
require('dotenv').config()

const Auth0ProviderWithHistory = ({ children }) => {
  const domain = process.env.REACT_APP_AUTH0_DOMAIN
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID

  const history = useHistory()

  const onRedirectCallback = (appState) => {
    history.push(appState?.returnTo || window.location.pathname)
  }

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
      audience={process.env.REACT_APP_AUTH0_AUDIENCE}
      scope={process.env.REACT_APP_AUTH0_SCOPE}
      useRefreshTokens={true}
    >
      {children}
    </Auth0Provider>
  )
}

export default Auth0ProviderWithHistory

Express服务端代码 #

const jwt = require('express-jwt')
const jwks = require('jwks-rsa')

var jwtCheck = jwt({
    secret: jwks.expressJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: process.env.JWKS_URI
  }),
  audience: process.env.JWT_AUDIENCE,
  issuer: process.env.JWT_ISSUER,
  algorithms: ['RS256']
})

app.use(jwtCheck)

Heroku生产环境配置代码 #

// Production mode: Heroku
if (process.env.NODE_ENV === "production"){
    app.use(express.static(path.join(__dirname,"client", "build")))

    app.get("*", (req, res) => {
        res.sendFile(path.join(__dirname,"client", "build", "index.html"));
    })
}

接口示例代码 #

router.route('/delete/:id').delete(jwtCheck,async (req, res) => {
    await Queue.findByIdAndDelete(req.params.id).exec((err, inventory) => {
        if (err) return (err)
        const response = {
            message: "Successfully deleted",
            id: req.params.id
        }
        return res.status(200).send(response)
    })
})

恳请大家帮忙排查问题，万分感谢！

你可以按以下顺序逐一排查问题，90%以上的同类报错都是这几个原因导致的：

• 先检查Heroku的环境变量配置：本地的.env文件不会同步到Heroku，你需要手动进入Heroku对应应用的设置页，找到Config Vars板块，把所有REACT_APP_开头的前端环境变量，以及服务端用的JWKS_URI、JWT_AUDIENCE、JWT_ISSUER全部添加进去，注意变量名大小写、取值要和Auth0后台配置完全一致，不能有拼写错误。
• 检查Auth0后台的域名白名单配置：本地测试你只加了localhost的地址，部署后需要把你的Heroku应用完整域名（带https前缀）添加到Auth0后台的「允许回调URL」、「允许注销URL」、「允许Web源」三个配置项中，漏加任意一个都会导致登录后令牌无法正常返回。
• 调整Auth0Provider的配置：你开启了useRefreshTokens=true，默认刷新令牌存在内存中，生产环境页面刷新或者路由跳转时很容易丢失令牌，可以在Auth0Provider的配置里加一行useRefreshTokensFallback: true，开启本地存储降级方案，避免令牌丢失。
• 调整服务端代码的加载顺序：你当前的app.use(jwtCheck)如果放在了静态资源路由、前端兜底路由的前面，会导致前端静态资源的请求也被JWT校验拦截，没有携带令牌就会报错。需要调整顺序：先注册所有API接口，再注册JWT校验中间件，最后注册静态资源和前端*兜底路由。
• 检查前端请求的令牌携带逻辑：确认你调用接口时，是正确调用getAccessTokenSilently()方法拿到有效令牌，放到请求头的Authorization字段中，格式为Bearer ${token}，如果前后端域名不同，还要确认跨域配置允许携带Authorization请求头。

内容的提问来源于stack exchange，提问作者Phuong Nguyen