我正在使用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)
}
型
1条答案
按热度按时间yhqotfr81#
由于每个服务器端框架都有不同的重定向处理方式,因此重定向无法在服务器上自动发生。在浏览器中,只有一个API可以重定向,因此可以将其硬编码到support.xml中。js库。您需要从函数中获取
data
属性,并使用Next.js提供的重定向方法重定向到data.url
。您可以阅读更多信息https://github.com/orgs/supabase/discussions/15862