使用next-auth与react-new-window时新窗口打开后立即关闭问题求助

问题根源 #

1. 路由路径错误：./SignInPage不是Next.js的合法路由格式，导致新窗口加载的页面异常，触发onUnload事件。
2. Session状态不同步：主页面的useSession无法自动感知新窗口内的登录操作，导致popup状态无法正确更新。
3. 窗口关闭时机不当：SignInPage中window.close()执行过早，加上onUnload误触发，造成新窗口刚打开就关闭。

解决方案 #

1. 修正路由配置

确保SignInPage文件路径为/pages/signin.js，将NewWindow的url改为绝对路径/signin。

2. 优化SignInPage逻辑

调整登录判断逻辑，添加延迟关闭窗口确保Session同步，同时指定登录回调地址：

import { useEffect } from "react";
import { signIn, useSession } from 'next-auth/react';

const SignInPage = () => {
  const { data: session, loading } = useSession();

  useEffect(() => {
    if (loading) return;
    
    // 未登录则触发Discord登录，指定回调回当前页
    if (!session) {
      void signIn('discord', { callbackUrl: window.location.href });
    }
    
    // 登录成功后延迟关闭窗口，确保Session同步完成
    if (session) {
      setTimeout(() => window.close(), 500);
    }
  }, [session, loading]);

  return null;
};

export default SignInPage;

3. 主页面同步Session与Popup状态

利用useSession的update()方法手动刷新Session，监听状态变化来控制Popup显示：

import { useState, useEffect } from 'react';
import NewWindow from 'react-new-window';
import { useSession } from 'next-auth/react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';

export default function Home() {
  const { data: session, update } = useSession();
  const [popup, setPopUp] = useState(false);

  // 登录成功后自动关闭Popup
  useEffect(() => {
    if (session && popup) setPopUp(false);
  }, [session, popup]);

  const handleLogin = () => {
    setPopUp(true);
    // 定时刷新Session，确保主页面及时获取登录状态
    const interval = setInterval(() => update(), 1000);
    
    // Popup关闭后清除定时器
    const cleanup = () => clearInterval(interval);
    window.addEventListener('beforeunload', cleanup);
    return cleanup;
  };

  return (
    <Box>
      <Button color="inherit" onClick={handleLogin}>Login</Button>
      {popup && !session && (
        <NewWindow 
          url="/signin" 
          onUnload={() => {
            setPopUp(false);
            // 窗口关闭后强制刷新Session
            update();
          }} 
        />
      )}
    </Box>
  );
}

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