Google SignIn 中的 NextAuth 回调函数

Question

我想在使用 NextAuth.js 中的 signIn() 函数完成 Google SignIn

后显示通知

googleSignInHandler 是单击 Google 图标时调用的函数。在NextAuth.js中，signIn是next-auth/react提供的函数。成功登录后我想显示成功登录的通知。 以下是 googleSignInHandler 函数

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

        toast.success('Signed In Successfully!')
    }

在

signIn('google', { callbackUrl: "http://localhost:3000"  })

中，登录成功后，页面会重定向到callbackUrl。

toast.success('Signed In Successfully!')

显示登录成功的通知。

我想在登录完成后显示通知。但是，一旦调用 googleSignInHandler，

toast.success('Signed In Successfully!')

就会在登录前立即执行。

首先，应该完成登录，然后在重定向后应该显示通知。为此，我认为需要回调函数。在登录功能之前使用 await 没有帮助。我阅读了文档，但没有得到任何解决方案。

Answer 1

我通过以下方式实现它作为解决方法：

const googleSignInHandler = async () => {
        await signIn('google')
    }

这会将我重定向到它开始的相同登录页面（我假设您使用的是自定义登录页面，而不是默认登录页面，因为我不确定重定向如何使用它，但您可以尝试）

现在我在登录页面上使用以下useEffect：

useEffect(() => {
    if (session) {
      toast.success("You have successfully logged in!")
      setTimeout(()=>{
        router.push("/")
      }, 800)
    }
    
  }, [session])

这将在设定的时间间隔后将我重定向到主页（或您想要的任何页面），并且还将显示 Toast 成功消息。

你可以跳过

setTimeout

直接使用

router.push

，我只是为了更好的用户体验而使用它

确保您使用 useSession React Hook 从 nextAuth 导入会话