TypeError [ERR_INVALID_URL]：仅在生产中使用 Next-auth 的 URL 无效

Question

此问题的答案有资格获得+200声望赏金。 赏金宽限期已结束。 Mathias Riis Sorensen正在寻找可靠来源的答案。

当在本地计算机的终端中使用以下命令时，该应用程序无法尝试在生产模式下使用我的 Next.js 应用程序中的 next-auth 登录：

`纱线构建&&纱线开始`

在终端观察到的报错信息如下：

TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:372:5)
    at URL.onParseError (node:internal/url:553:9)
    at new URL (node:internal/url:629:5)
    at Object.redirect (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/lib/default-callbacks.js:16:65)
    at createCallbackUrl (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/lib/callback-url.js:20:35)
    at init (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/init.js:132:48)
    at AuthHandlerInternal (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/index.js:98:28)
    at AuthHandler (/Users/name/Documents/GitHub/app/node_modules/next-auth/core/index.js:335:34)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async NextAuthHandler (/Users/name/Documents/GitHub/app/node_modules/next-auth/next/index.js:38:20) {
  input: 'undefined/home',
  code: 'ERR_INVALID_URL'
}

如果我在终端中使用以下命令以开发模式运行，则不会出现此问题：

`纱线开发`

这是我的 [...nextauth].ts 文件：

import NextAuth from "next-auth";
import type { NextAuthOptions } from "next-auth";

import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
import EmailProvider from "next-auth/providers/email";

import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      // @ts-ignore
      clientId: process.env.GOOGLE_CLIENT_ID,
      // @ts-ignore
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    FacebookProvider({
      // @ts-ignore
      clientId: process.env.FACEBOOK_CLIENT_ID,
      // @ts-ignore
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
    EmailProvider({
      server: {
        host: process.env.SMTP_HOST,
        port: Number(process.env.SMTP_PORT),
        auth: {
          user: process.env.SMTP_USER,
          pass: process.env.SMTP_PASSWORD,
        },
      },
      from: process.env.SMTP_FROM,
    }),
  ],

  secret: process.env.NEXTAUTH_SECRET,

  callbacks: {
    session: async ({ session, token }) => {
      if (session?.user) {
        // @ts-ignore
        session.user.id = token.uid;
      }
      return session;
    },
    jwt: async ({ user, token }) => {
      if (user) {
        token.uid = user.id;
      }
      return token;
    },
  },
  session: {
    strategy: "jwt",

    maxAge: 30 * 24 * 60 * 60, // 30 days

    // updateAge: 24 * 60 * 60, // 24 hours
  },

  jwt: {
    secret: process.env.NEXTAUTH_SECRET,
  },
};

export default NextAuth(authOptions);

我试着找出生产中关于错误消息TypeError [ERR_INVALID_URL]: Invalid URL的不同之处，但无法弄清楚。 我没有更改任何环境变量，我在.env.local 中设置了以下变量：

NEXTAUTH_SECRET="SomeLongString"

NEXTAUTH_URL="http://localhost:3000"

根据要求添加 package.json：

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.4",
    "@heroicons/react": "^2.0.13",
    "@next-auth/prisma-adapter": "^1.0.5",
    "@prisma/client": "^4.7.1",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/typography": "^0.5.8",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-datepicker": "^4.8.0",
    "@types/react-dom": "18.0.9",
    "autoprefixer": "^10.4.13",
    "classnames": "^2.3.2",
    "clsx": "^1.2.1",
    "date-fns": "^2.29.3",
    "eslint": "8.28.0",
    "eslint-config-next": "13.0.4",
    "framer-motion": "^7.6.7",
    "graphql-request": "^5.0.0",
    "next": "13.0.4",
    "next-auth": "^4.18.6",
    "next-seo": "^5.14.1",
    "nodemailer": "^6.8.0",
    "postcss": "^8.4.19",
    "react": "18.2.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.40.0",
    "react-hot-toast": "^2.4.0",
    "react-icons": "^4.6.0",
    "sass": "^1.56.1",
    "swr": "^1.3.0",
    "tailwindcss": "^3.2.4",
    "typescript": "4.9.3"
  },
  "devDependencies": {
    "prettier-plugin-prisma": "^4.4.0",
    "prisma": "^4.7.1"
  }
}

我错过了什么？

Answer 1

您正在使用开发 NEXTAUTH_URL 进行发布。 您需要使用生产链接在您的 .env 文件中定义 NEXTAUTH_URL。

Answer 2

NEXTAUTH_URL 未定义。 您需要在.env 文件中定义NEXTAUTH_URL 。

无论您是在测试、开发还是在生产中， NextJs都内置了允许您使用不同环境变量的方法。 虽然通常在生产环境中，你只会有一个 single.env，因为你不想将你的秘密提交给 git。

Answer 3

NextJS 有两个关于查找环境文件的策略，但你必须知道的是：

• 对于 localhost 以及 NODE_ENV 不是生产的任何场景，nextjs 将寻找.env.local文件。
• 对于生产场景（NODE_ENV 是生产场景），它将寻找.env.production 。

此外，这些规则也适用：

• env 文件中定义的所有变量（either.env.local，either.env.production）在服务器端可用。
• 以NEXT_PUBLIC开头的变量在客户端可用。

此外，您还需要考虑：

• 环境变量在BUILD TIME评估，因此您必须确保正确的.env.[local|production]文件存在并且在BUILD TIME具有相关数据。从文档中获取：

注意：为了保持服务器专用机密的安全，环境变量在构建时进行评估，因此只会包括实际使用的环境变量。 这意味着 process.env 不是标准的 JavaScript 对象，因此您无法使用对象解构。 环境变量必须被引用为例如 process.env.PUBLISHABLE_KEY，而不是 const { PUBLISHABLE_KEY } = process.env。

作为最后的旁注，我建议你也考虑一下这一章，它基本上提到那些 .env 文件应该在版本控制下，而不是env*.local文件，以防你有多个 .env.local 文件。 另一个重要的注意事项是，您运行的启动下一个服务器的命令必须是next start而不是next dev ，next next dev的环境专门用于development 。

总而言之，以上任何一个都是您的问题，尽管我认为问题在于您可能在构建时缺少 the.env.production 。

Answer 4

我认为这是因为您在生产中使用了开发链接NEXTAUTH_URL="http://localhost:3000" 。 相反，在生产环境中使用实时链接NEXTAUTH_URL="yourwebsite.com" 。

此外，不要使用 if 语句来检查您是在开发中还是在生产中，而是使用 2 个.env文件 - 一个在本地使用本地主机 url，另一个使用实时 url。 这可以帮助您更好地诊断问题。

更重要的是，检查以确认您的环境变量实际上可以在您的应用程序中访问。

Answer 5

这个问题可能有几个可能的原因。 以下是您可以尝试的几件事：

1. 确保正确设置用于配置 next-auth 的环境变量。 这些包括 GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET、FACEBOOK_CLIENT_ID、FACEBOOK_CLIENT_SECRET、SMTP_HOST、SMTP_PORT、SMTP_USER、SMTP_PASSWORD 和 SMTP_FROM。

2. 确保 NEXTAUTH_SECRET 环境变量已设置并且与您在 authOptions 配置对象中使用的秘密值相同。

3. 仔细检查您的提供商的配置，特别是 GoogleProvider、FacebookProvider 和 EmailProvider。 确保正确填写所有必填字段并使用正确的环境变量。

4. 检查 authOptions 配置对象中重定向选项的值。 此选项确定在登录过程完成后用户将被重定向到哪里。 确保该值是有效的 URL。

我希望这些建议对您有所帮助，可以帮助您解决问题。