如何使用nextauth.js登录后重定向到动态url?

jjjwad0x  于 2023-06-29  发布在  其他
关注(0)|答案(1)|浏览(153)

我一直在努力使这一工作了一段时间,只是似乎不能找到任何解决方案,在文档中的问题,我有。情况是这样的,我希望用户使用nextauth.js登录,并在成功登录后,被重定向到他们的个人资料,该个人资料位于这样的URL上,/[role]/u/[username]。角色和用户名都保存到数据库中的用户对象中,因此我真正需要的是在登录流程中访问用户。文档中的选项说要使用callbackUrl,但它不起作用,因为它看起来像这样:

'use client'

const {data:session} = useSession();

const onClick = () => {
 signIn('google',{
  callbackUrl: `/${session.user.role}/u/${session.user.username}`
 })
}

这不起作用的原因是你不能在会话数据登录之前访问它们,它返回undefined。使用重定向回调可以访问url和baseUrl,但不能访问用户,因此同样的问题仍然存在。使用signIn回调允许访问数据,但如果返回url而不是true,它会重定向到url,但会取消auth流程,因此用户实际上不会登录。
是否有我遗漏的方法,无论是在回调中,还是通过向signIn函数传递一个url,使我能够在登录后成功重定向到/[role]/u/[username]?
我已经尝试了上面解释的nextauth文档中提到的所有内容。我也尽量避免使用useEffect来重定向,以避免 Flink 的内容。

wgxvkvu9

wgxvkvu91#

我没有看到一个干净的方式来实现这与当前的NextAuth API。但是,您可以通过禁用默认重定向并手动重定向用户来实现所需的行为。

'use client'

const router = useRouter();
const { data: session } = useSession();

React.useEffect(() => {
  if (session) {
    router.push(`/${session.user.role}/u/${session.user.username}`);
  }
}, [session, router])

const onClick = () => {
  signIn('google', { redirect: false });
}

相关问题