Next.js 14中使用Next-auth@beta v5登录后如何重定向到回调URL？

核心问题 #

登录后无法跳转到目标路由/new，主要源于两个关键问题：

1. 调用signIn时未传递目标回调地址，NextAuth默认跳转至首页
2. 登录页面未获取并传递系统自动生成的callbackUrl参数

修复步骤 #

1. 修改登录动作函数（/action.ts） #

更新login函数，支持接收callbackUrl参数并传递给signIn：

export async function login(callbackUrl: string) {
  await signIn('google', { callbackUrl })
}

2. 在登录页面传递回调地址 #

在/login页面组件中，获取URL上的callbackUrl参数（系统重定向到登录页时自动添加该参数），并传给登录函数：

'use client'

import { login } from '@/action'
import { useSearchParams } from 'next/navigation'

export default function LoginPage() {
  const searchParams = useSearchParams()
  // 获取回调地址，默认 fallback 到首页
  const callbackUrl = searchParams.get('callbackUrl') || '/'

  return (
    <button onClick={() => login(callbackUrl)}>通过Google登录</button>
  )
}

3. 优化授权回调逻辑（可选） #

检查auth.config.ts中的authorized回调，确保已登录用户访问/new时不会被错误重定向，可简化逻辑如下：

callbacks: {
  authorized({ auth, request: { nextUrl } }) {
    const isLoggedIn = !!auth?.user
    const isProtectedRoute = ['/', '/new'].includes(nextUrl.pathname)
    
    if (isProtectedRoute) {
      return isLoggedIn // 已登录允许访问，未登录自动跳转到登录页
    } 
    // 已登录用户访问非保护路由时重定向到首页（保持原业务逻辑）
    else if (isLoggedIn) {
      return Response.redirect(new URL('/', nextUrl))
    }
    return true
  }
}

4. 验证Google OAuth配置（可选） #

确保在Google Cloud控制台的OAuth客户端设置中，已添加正确的回调URL：http://localhost:3000/api/auth/callback/google（生产环境替换为你的实际域名）

内容的提问来源于stack exchange，提问作者Ivan Gregor Tabalno