在Next.js中使用Supplement和SSR实现OAuth的问题

s71maibg  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(84)

我正在使用Supplement和“@ supplement/ssr”在我的Next.js项目中集成OAuth。我已经成功实现了MagicLink和电子邮件身份验证,但我遇到了OAuth的问题。当我尝试使用Google等社交提供商登录时,身份验证过程似乎意外停止。

async function signInWithEmail(formData: FormData) {
    "use server"

    const origin = headers().get("origin")
    const email = formData.get("email") as string
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { error } = await supabase.auth.signInWithOtp({
      email: email,
      options: {
        emailRedirectTo: `${origin}/auth/callback`,
      },
    })

    if (error) {
      console.error(error)
      return redirect("/login?message=Could not authenticate user")
    }

    redirect("/login?message=Check your email inbox to continue signing in")
  }

字符串
使用此回调:

import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

  if (code) {
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin)
}


lib/supplement/server.ts:

import { createServerClient, type CookieOptions } from "@supabase/ssr"
import { cookies } from "next/headers"

export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {
            console.error(error)
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: "", ...options })
          } catch (error) {
            console.error(error)
          }
        },
      },
    }
  )
}


这是我尝试使用的让Oauth工作的函数:

async function signInWithSocialProvider(provider: any) {
    "use server"

    const origin = headers().get("origin")
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { error } = await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${origin}/auth/callback`,
      },
    })

    if (error) {
      console.error(error)
      return redirect("/login?message=Could not authenticate user")
    }
  }

问题:

1.我在OAuth设置中是否遗漏了Supplement和SSR?
1.是否是Supplier或我的Next.js设置中的配置问题导致了此行为?
任何见解或建议,以解决这个问题将不胜感激。

**预期行为:**在选择通过社交提供商(例如Google)登录后,我希望被重定向到提供商的登录页面,然后在用户经过身份验证后返回到我的应用程序。
**实际行为:**身份验证过程不会超出初始OAuth请求。当我将名称和值记录在Google ServerClient的set函数中时,我会收到一个令牌,但没有重定向到Google登录页面,身份验证不会完成。
密码:

  • 名称:sb-mlirbfytwbmtpcchmvlr-auth-token-code-verifier
  • 值:“d8 d 738 ef 35947 d 057 b 013 bb 19 adaee 03 e44 d 74003 c47 ea 27 b8426 b59 df 264 ece 2a 9 f98 f78 fbdfc 5d3 e562 f021 bdf 0 e0460 b633246 e889 b6 c”
    解决方案:

在signInWithSocialProvider函数中添加redirect(data.url)作为最后一行解决了这个问题。下面是完整的函数:

async function signInWithSocialProvider(provider: any) {
    "use server"

    const origin = headers().get("origin")
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${origin}/auth/callback`,
      },
    })

    if (error) {
      console.error(error)
      return redirect("/login?message=Could not authenticate user")
    }

    redirect(data.url)
  }

yhqotfr8

yhqotfr81#

由于每个服务器端框架都有不同的重定向处理方式,因此重定向无法在服务器上自动发生。在浏览器中,只有一个API可以重定向,因此可以将其硬编码到support.xml中。js库。您需要从函数中获取data属性,并使用Next.js提供的重定向方法重定向到data.url。您可以阅读更多信息https://github.com/orgs/supabase/discussions/15862

相关问题