NextAuth Google Provider弹窗登录异常及优化需求求助

1. 跳过中间登录页，直接打开谷歌授权弹窗 #

不要直接访问/api/auth/signin/google，而是通过NextAuth的signIn方法生成谷歌授权的直接URL，跳过中间按钮页面。修改组件调用逻辑：

import { signIn } from "next-auth/react";
import usePopupWindow from "@/hooks/usePopupWindow";

const { openPopup } = usePopupWindow('Google');

const handleLogin = async () => {
  // 调用signIn生成谷歌授权URL，跳过中间页
  const { url } = await signIn("google", {
    redirect: false,
    callbackUrl: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/` // 登录成功后的回调地址
  });
  // 用获取到的URL打开弹窗
  openPopup(url);
};

2. 修复redirect: false无效问题 #

直接访问/api/auth/signin/google会忽略redirect参数，必须通过signIn方法传递配置，才能让NextAuth返回授权URL而非直接跳转。

3. 解决弹窗登录成功后不自动关闭、父页面不刷新问题 #

原Hook依赖useSession的status变化，但父页面不会自动同步弹窗的登录状态。通过监听storage事件+弹窗关闭监听来解决：

更新usePopupWindow Hook #

import { useState, useEffect } from 'react';
import { useSession, getSession } from 'next-auth/react';
import { useRouter } from 'next/router';

const usePopupWindow = (title = 'Popup', width = 500, height = 550) => {
  const { data: session, update } = useSession();
  const [popup, setPopup] = useState(null);
  const router = useRouter();

  const openPopup = (url) => {
    // 计算弹窗居中位置
    const left = window.screen.width / 2 - width / 2;
    const top = window.screen.height / 2 - height / 2;
    const newPopup = window.open(
      url,
      title,
      `width=${width},height=${height},top=${top},left=${left},resizable=no`
    );
    setPopup(newPopup);

    // 监听弹窗关闭，手动刷新session
    const checkClosed = setInterval(() => {
      if (newPopup.closed) {
        clearInterval(checkClosed);
        getSession().then(() => {
          update();
          router.refresh();
        });
      }
    }, 500);
  };

  useEffect(() => {
    // 监听storage事件，同步弹窗的session更新
    const handleStorageChange = async (e) => {
      if (['next-auth.session-token', 'next-auth.csrf-token'].includes(e.key)) {
        await update();
        if (session && popup && !popup.closed) {
          popup.close();
          router.refresh();
        }
      }
    };

    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
      if (popup && !popup.closed) popup.close();
    };
  }, [session, popup, router, update]);

  return { openPopup, popup };
};

export default usePopupWindow;

关键修改点： #

• 用storage事件监听session变化，实时同步父页面状态
• 弹窗关闭时手动触发session刷新
• 使用useSession的update方法强制同步状态
• 优化弹窗居中显示逻辑

4. 完善NextAuth基础配置 #

添加必填的secret，并确保谷歌OAuth控制台配置正确：

export const authOptions = {
  secret: process.env.NEXTAUTH_SECRET, // 生产环境必须设置，可用openssl rand -hex 32生成
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      if (user && user.email) {
        try {
          await sendEmailToUser(user.email);
          return true; 
        } catch (error) {
          console.error('Error saving user:', error); // 修复原代码语法错误
          return false; 
        }
      }
      return true;
    },
  },
}

注意事项： #

• 谷歌OAuth控制台需添加{域名}/api/auth/callback/google到授权重定向URI（开发环境加http://localhost:3000/api/auth/callback/google）
• 生产环境必须配置NEXTAUTH_SECRET环境变量

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