我在使用 Auth0 和 NextJs 登录时遇到错误

Question

我尝试过使用 NextJs/React 示例进行无服务器 auth0，该示例在 2 个不同的站点上是相同的。当我点击登录时出现错误，我不明白为什么。

这是错误：

我已按照示例进行操作。

index.js：

import { useUser } from "@auth0/nextjs-auth0";

export default () => {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (user) {
    return (
      <div>
        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }   
  return <a href="/api/auth/login">Login</a>;
};

pages/api/auth/[...auth0]中的api：

import { handleAuth } from "@auth0/nextjs-auth0";

export default handleAuth();

app.js

import "../styles/globals.css";
import React from "react";
import { UserProvider } from "@auth0/nextjs-auth0";

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

.env.local 带有随机生成的 AUTH0_SECRET：

AUTH0_SECRET=b4c5107c3e4fc67e8d2323118a8e36bbc52a515ffc0a2afb5429126a4aed0ccc
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://(directly copied from my auth0 app)
AUTH0_CLIENT_ID=(directly copied from my auth0 app)
AUTH0_CLIENT_SECRET=(directly copied from my auth0 app)

示例链接：https://www.geeksforgeeks.org/adding-user-authentication-in-nextjs-using-auth0/

你知道这里有什么吗？谢谢。

Answer 1

你的秘密必须用引号引起来吗？

AUTH0_SECRET="b4c5107c3e4fc67e8d2323118a8e36bbc52a515ffc0a2afb5429126a4aed0ccc"

Answer 2

我认为可能有两个问题：

首先你没有在auth0账户中设置回调url回调

第四步：添加回调和注销URL。回调用户用于 登录和注销后重定向用户 URL 用于 注销后重定向用户。

其次，你的.env.local不在根目录中。

Answer 3

又折腾了几个小时，我终于能够让它工作了，但它看起来真的很奇怪。首先，我必须通过创建这个我称为 auth0.js 的文件来初始化代码中的 Auth0：

import { initAuth0 } from "@auth0/nextjs-auth0";

export default initAuth0({
  secret: "process.env.REACT_APP_AUTH0_SECRET",
  issuerBaseURL: process.env.REACT_APP_AUTH0_ISSUER_BASE_URL,
  baseURL: process.env.REACT_APP_AUTH0_BASE_URL,
  clientID: process.env.REACT_APP_AUTH0_CLIENT_ID,
  clientSecret: process.env.REACT_APP_AUTH0_CLIENT_SECRET,
});

我必须重做 .env.local，因为我忘记了这一点，在 React 应用程序中，变量需要以 REACT_APP 为前缀：

REACT_APP_AUTH0_SECRET=
  b4c5107c3e4fc67e8d2323118a8e36bbc52a515ffc0a2afb5429126a4aed0ccc
REACT_APP_AUTH0_BASE_URL=http://localhost:3000
REACT_APP_AUTH0_ISSUER_BASE_URL=https://(domain)
REACT_APP_AUTH0_CLIENT_ID=(clientId)
REACT_APP_AUTH0_CLIENT_SECRET=(client secret)

请注意，我必须将对 auth0.js 文件中的 REACT_APP_AUTH0_SECRET 环境变量的引用放在引号中，并将 .env.local 文件中的秘密变量本身保留为不带引号的。引用变量并在 auth0.js 中保留对它的引用不加引号是行不通的，这看起来非常奇怪。

然后我将 auth0.js 初始化文件导入到 [...auth0].js 文件中，如下所示：

import auth0 from "../../../lib/auth0";
export default auth0.handleAuth();

这很有效。我想一旦有了这个，我就可以仅使用带有 REACT_APP 前缀的 .env.local 文件返回到原始配置，但即使引用秘密字符串，这仍然不起作用。我仍然遇到秘密错误。如果有人能给出这背后的推理，我很想知道。 现在不太喜欢 auth0 和 nextjs 。

Answer 4

对我有用的是用“”而不是“”更改.env中的所有变量。

Answer 5

import { UserProvider } from "@auth0/nextjs-auth0/client";

为我工作。

Answer 6

我通过添加到 .env 解决了这个问题 AUTH0_BASE_URL=http://localhost:3000