使用NextAuth的SessionProvider时出现TypeError [ERR_INVALID_URL]错误求助

• 启用NextAuth调试模式
  在[...nextauth].js/ts配置文件中开启debug: true，运行项目后控制台会输出NextAuth所有请求的详细日志，包含触发错误的URL信息：

  export default NextAuth({
    debug: true,
    // 其他配置项...
  })
  

• 检查环境变量配置
  NextAuth依赖NEXTAUTH_URL环境变量，确认该变量值是否合法：

  • 本地开发需设为http://localhost:3000
  • 生产环境需设为你的实际域名
    可在[...nextauth].js/ts开头添加打印语句验证：

  console.log('当前NEXTAUTH_URL:', process.env.NEXTAUTH_URL)
  

  若变量为空、缺少http/https前缀或存在多余空格，都会触发Invalid URL错误。

• 捕获错误栈跟踪
  在_app.js/ts中用try-catch包裹SessionProvider，打印错误栈以定位具体问题：

  import { SessionProvider } from "next-auth/react"
  
  function MyApp({ Component, pageProps }) {
    try {
      return (
        <SessionProvider session={pageProps.session}>
          <Component {...pageProps} />
        </SessionProvider>
      )
    } catch (err) {
      console.error('SessionProvider错误详情:', err.stack)
    }
  }
  
  export default MyApp
  

  错误栈会显示URL解析失败的具体位置，以及调用链信息。

• 排查自定义回调中的URL
  若配置了redirect等自定义回调，确认回调返回的URL格式合法：

  callbacks: {
    async redirect({ url, baseUrl }) {
      // 确保返回的URL以baseUrl开头，或为完整的http/https格式
      return url.startsWith(baseUrl) ? url : baseUrl
    }
  }
  

  回调中返回非法URL也会触发该错误。

内容的提问来源于stack exchange，提问作者Käx