NextAuth.js中Google登录完成后如何触发成功通知？

问题核心：Google登录属于重定向式认证流程，调用signIn('google')后浏览器会直接跳转到Google授权页面，原页面的代码（包括toast.success）会立即中断执行，所以await根本起不到等待登录完成的作用——原页面的代码等不到跳转回来就已经被销毁了。

下面是两种可行的解决方案：

方案1：通过URL临时参数触发通知 #

修改登录函数，在callbackUrl中添加一个标记参数，跳转完成后在目标页面读取该参数并显示通知，最后清除参数避免重复触发。

1. 更新登录处理函数：

const googleSignInHandler = async () => {
  await signIn('google', { 
    callbackUrl: "http://localhost:3000?loginSuccess=true" 
  })
}

2. 在目标页面（如首页）处理参数：

import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { toast } from 'react-toastify'

export default function Home() {
  const router = useRouter()

  useEffect(() => {
    if (router.query.loginSuccess === 'true') {
      toast.success('Signed In Successfully!')
      // 用shallow路由清除URL参数，不触发页面重新渲染
      router.replace('/', undefined, { shallow: true })
    }
  }, [router.query])

  // 页面其他逻辑...
}

方案2：通过临时Cookie触发通知 #

在NextAuth的回调中设置一个短期有效Cookie，跳转后在目标页面读取Cookie显示通知，随后删除Cookie。

1. 配置NextAuth回调（[...nextauth].js）：

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

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async redirect({ url, baseUrl }) {
      // 登录成功跳转时设置临时Cookie
      const redirectResponse = new Response(null, {
        status: 302,
        headers: { Location: baseUrl },
      })
      redirectResponse.cookies.set('login_success', 'true', { 
        maxAge: 10, // 10秒后自动过期
        path: '/' 
      })
      return redirectResponse
    }
  }
}

export default NextAuth(authOptions)

2. 在目标页面读取Cookie：

import { useEffect } from 'react'
import { toast } from 'react-toastify'
import Cookies from 'js-cookie'

export default function Home() {
  useEffect(() => {
    const loginFlag = Cookies.get('login_success')
    if (loginFlag) {
      toast.success('Signed In Successfully!')
      Cookies.remove('login_success')
    }
  }, [])

  // 页面其他逻辑...
}

两种方案对比：URL参数方式实现简单，无需额外依赖；Cookie方式更隐蔽，不会在URL上暴露登录状态标记，适合对体验要求更高的场景。

内容的提问来源于stack exchange，提问作者Omkar Ghodake