如何在Next Auth中将Google域名限制的错误跳转改为弹窗提示

这个需求完全可以实现，核心思路是修改signIn回调的返回逻辑，将默认的错误页重定向改为跳转到指定页面并携带自定义错误参数，再由前端读取参数显示弹窗提示。

步骤1：修改NextAuth配置中的signIn回调 #

将原来返回false的逻辑改为返回带错误参数的重定向地址，让用户跳转到需要显示弹窗的页面（比如首页或登录页）：

callbacks: {
    async signIn({ user }) {
      try {
        // 验证邮箱域名
        if (user.email && user.email.endsWith('students.stanford.ac.uk')) {
          return true
        }
        // 重定向到首页并携带自定义错误参数
        return '/?error=invalid-domain'
      } catch (error) {
        return false
      }
    },
}

步骤2：前端页面处理错误参数并显示弹窗 #

在目标页面（比如首页或登录页）中，通过路由读取URL参数，判断是否需要显示弹窗，并在显示后清除URL参数避免重复触发：

import { useEffect, useState } from 'react'
import { useRouter } from 'next/router'

export default function Home() {
  const router = useRouter()
  const [showDomainErrorModal, setShowDomainErrorModal] = useState(false)

  useEffect(() => {
    // 检测URL中的错误参数
    if (router.query.error === 'invalid-domain') {
      setShowDomainErrorModal(true)
      // 清除URL参数，避免刷新页面后再次显示弹窗
      router.replace('/', undefined, { shallow: true })
    }
  }, [router.query])

  return (
    <div className="page-container">
      {/* 页面原有内容 */}
      
      {/* 自定义弹窗 */}
      {showDomainErrorModal && (
        <div className="modal-overlay">
          <div className="modal-content">
            <p>必须使用students.stanford.ac.uk域名的邮箱登录</p>
            <button onClick={() => setShowDomainErrorModal(false)}>关闭</button>
          </div>
        </div>
      )}
    </div>
  )
}

补充说明 #

• 如果你有单独的登录页，也可以将重定向地址改为/login?error=invalid-domain，在登录页中处理弹窗逻辑。
• 弹窗的样式可以根据你的项目UI需求自定义，上面的代码仅提供基础结构。

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