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。

我希望這些建議對您有所幫助，可以幫助您解決問題。