将带有 Auth0 的 React 页面部署到 Heroku 不工作

Question

这是我第一次 post 访问 Whosebug。感谢您的精彩社区。我想问下如何部署Auth0到Heroku

我的“HTTP://localhost:3000”上的正常行为会重定向到 Auth0 登录页面，当用户成功登录时，它会重定向回该页面。我的带有 Auth0 的 React 应用程序在本地主机上运行非常正常，但是，当它在 Heroku 上时，它说：“找不到身份验证令牌”。显示如下：

[heroku 消息][1] [1]: https://i.stack.imgur.com/CDO3O.png

我已经尝试使用此 link 的 Auth0 教程：https://auth0.com/docs/quickstart/spa/react/01-login，但是，即使我在 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"));
    })
}

使用 JWTcheck 的正常 API 将是：

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)
    })
})

有人可以帮忙吗:(

非常感谢。

Answer 1

解决方案是从 server.js 中删除它，因为 jwtCheck 功能是使用用户会话密钥保护 API，因此，在没有会话密钥的 GET 请求中将其包含在 server.js 中会显示如上的错误。仅将上面的 jwtCheck 用于 API 保护。不要犯我的愚蠢错误。

将带有 Auth0 的 React 页面部署到 Heroku 不工作

Deploy React page with Auth0 to Heroku not working

heroku

node.js

express

reactjs

auth0