Supabase 与 Next.js 13 应用程序路由器 OAuth 未登录

Question

每当我登录时

  // twitch signin handler
  const handleTwitchSignIn = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "twitch",
      options: {
        redirectTo: `${location.origin}/${lang}/auth/callback`,
      },
    });
  };

  // google signin handler
  const handleGoogleSignIn = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: `${location.origin}/${lang}/auth/callback`,
      },
    });
  };

我没有收到任何应该重定向到

/auth/callback

的“代码”参数。

似乎没有一个医生谈论这个。我看到 cookie 值是代码验证程序，但 url 中缺少代码本身。

Answer 1

我花了几个小时阅读 PKCE 并浏览

auth-helper-nextjs

库代码，但找不到正确的答案。

事实证明，您只需在 Supabase 控制台中添加重定向 URL 策略即可。 另外，你可以看到我的由于启用了 i18n 而具有语言动态 url。

Answer 2

如果您使用的是supabase-js客户端库，您可以调用signInWithOAuth()方法：

const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'google' })

注意：您收到的数据将包含 url，您必须从服务器端重定向到该 url（如果您使用带有 PKCE 流程的 SSR 身份验证）

    return redirect(data.url)