如何实现next-auth的signIn认证在新窗口打开且完成后自动关闭

不用自己手动写弹窗打开、跨窗口通信、自动关闭的逻辑，next-auth/react 已经内置了完整的弹窗认证支持，只要给signIn()方法加对应配置参数就行。

修改你原来的按钮点击逻辑：

<Button onClick={() => signIn('discord', {
  popup: true,
  callbackUrl: window.location.href
})}>Login</Button>

配置说明 #

• 传入popup: true后，signIn()不会在当前标签页跳转，会自动打开一个居中的、尺寸适配认证页的弹窗窗口加载Discord授权流程
• callbackUrl指定认证完成后父页面的跳转地址，直接传当前页面路径即可，认证成功后父页面会自动同步登录态，不需要手动刷新

避坑提示 #

• 必须保证signIn()是在用户点击事件的同步调用栈里触发，不要套setTimeout、异步请求回调之类的异步逻辑，否则浏览器会判定为非用户主动触发的弹窗，直接拦截
• 这个原生弹窗能力在NextAuth v4.10.0及以上版本可用，版本不够的先升级依赖即可
• 不管是授权成功、失败、用户主动关闭授权页，弹窗都会自动关闭，不需要额外写事件监听处理关窗逻辑

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