NextAuth TypeError [err_invalid_url]：无效的URL

发布于 2025-01-21 07:39:10 字数 1489 浏览 0 评论 0原文

signin.js

import { getProviders, signIn as SignIntoProvider} from 'next-auth/react'

// Browser... 
function signIn({providers}) {
  return (
    <>
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button onClick={() => SignIntoProvider(provider.id)}>
            Sign in with {provider.name}
          </button>
        </div>
      ))}
    </>
  );
}

// Server side render
export async function getServerSideProps(){
    const providers = await getProviders();

    return{
        props: {
            providers,
        },
    };
}

export default signIn;

[... NextAuth] .js

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],

  pages: {
    signIn: '/auth/signin',
  }
})

我已将NextAuth URL宣布为

'nextauth_url = http：// localhost：3000'

原文

This error has been occurring whenever I am trying to render my signin page using nextAuth.js

signin.js

import { getProviders, signIn as SignIntoProvider} from 'next-auth/react'

// Browser... 
function signIn({providers}) {
  return (
    <>
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button onClick={() => SignIntoProvider(provider.id)}>
            Sign in with {provider.name}
          </button>
        </div>
      ))}
    </>
  );
}

// Server side render
export async function getServerSideProps(){
    const providers = await getProviders();

    return{
        props: {
            providers,
        },
    };
}

export default signIn;

[...nextauth].js

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],

  pages: {
    signIn: '/auth/signin',
  }
})

I have declared nextAuth url as

'NEXTAUTH_URL= http://localhost:3000'

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冰火雁神 2025-01-28 07:39:10

我建议检查nextAuth_url是否有效，或者可能是其他环境变量。

另请注意，

非现有环境变量可能是 ok ，但是
空字符串可能被视为无效

这样在您的.env文件中，文件是无效：

NEXTAUTH_URL=

也尝试删除临时/。下一个文件夹并重新启动服务器。
（确保删除/。下一个文件夹时，下一服务器不运行，否则在服务器仍在运行时可能会再次创建它。）

您也可以应检查完整的堆栈跟踪（您的屏幕快照会错过最重要的部分）。

详细信息

错误代码> 可能来自node.js，当它试图执行 new URL（url） 内部 next-auth，parse-url 。

如果您简单地导入'Next-auth/react'（没有任何特定属性或方法），则可以确认错误是否已经出现。这应该已经投掷了，因为next-auth/react内部使用process.env变量。

如果我对的话，“无效的值”是传递给 new URL（url），例如一个空字符串。而且null或undefined应该回到parseurl内的有效默认URL。

我在parseurl失败的情况code> pathName 或url in request> request对象。

I suggest to check if NEXTAUTH_URL is valid, or maybe other environment variables.

Also note that

a non existing environment variable might be ok, but
an empty string might be considered invalid

Like this in your .env file is invalid:

NEXTAUTH_URL=

Also try to delete the temporary /.next folder and restart the server.
(make sure the next-server doesn't run while you delete the /.next folder, otherwise it might be created again while the server is still running.)

You also should inspect the full stack trace (your screenshot misses the most important parts).

Details

The error [ERR_INVALID_URL]: Invalid URL probably comes from node.js, when it tries to execute new URL( url ) inside next-auth, parse-url.

You may confirm if the error already comes if you simply import 'next-auth/react' (without any specific properties or methods). This should already throw, because next-auth/react internally uses process.env variables.

If I'm right, an "invalid value" is a value that would throw when passed to new URL( url ), e.g. an empty string. But also null or undefined should fall back to a valid default url inside parseUrl.

Other circumstances that I found where parseUrl would fail include invalid environment variables VERCEL_URL and NEXTAUTH_URL_INTERNAL, and the origin, pathname or url in Request objects.

回复收藏 0 原文

话少心凉 2025-01-28 07:39:10

我面临同样的问题。这似乎是“ Next-auth”：“^4.3.2”的问题。

我降级为4.3.1版，错误消失了。将来需要注意的是，您只需进行NPM安装即可安装，它安装了最新版本的Next-auth。

回复收藏 0 原文

策马西风 2025-01-28 07:39:10

我遇到了这个问题，直到我将Localhost添加到Google的控制台凭据页面上的允许主机。请注意，它不允许使用子域（我尝试了“ http：//subdomain.localhost：3000” - 不允许）。一旦我搬到“ http：// localhost：3000”（并将NextAuth_url设置为该值） - 错误已消失

回复收藏 0 原文

~没有更多了~