React Router v7，Supabase Oauth：OAuth 错误：AuthApiError：无效请求：身份验证代码和代码验证程序都应非空

Question

我正在尝试使用 Supabase 在我的 React Router V7 应用程序中实现 oAuth（本例中为 Github）。

这是我的注册操作：

export const signupWithOAuth = async ({
  request,
  provider,
}: {
  provider: 'google' | 'github'
  request: Request
}) => {
  const { supabaseClient } = createSupabaseServerClient({ request })

  const { data, error } = await supabaseClient.auth.signInWithOAuth({
    provider: provider,
    options: {
      redirectTo: `${new URL(request.url).origin}/auth/callback`,
    },
  })


  if (error) {
    console.error(error)
    throw new Error(`Failed to sign up with OAuth, ${error.message}`)
  }


  return { data }
}

这是我的 auth.callback.ts

import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
import {
  createServerClient,
  parse,
  parseCookieHeader,
  serializeCookieHeader,
} from '@supabase/ssr'

export async function loader({ request }: LoaderFunctionArgs) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get('code')
  const next = requestUrl.searchParams.get('next') || '/'
  const headers = new Headers()

  console.log('Request URL:', requestUrl)
  console.log('Code:', code)
  console.log('Next:', next)

  if (code) {
    const cookies = parse(request.headers.get('Cookie') ?? '')
    const supabase = createServerClient(
      process.env.SUPABASE_URL!,
      process.env.SUPABASE_ANON_KEY!,
      {
        cookies: {
          getAll() {
            return parseCookieHeader(request.headers.get('Cookie') ?? '')
          },
          setAll(cookiesToSet) {
            cookiesToSet.forEach(({ name, value, options }) =>
              headers.append(
                'Set-Cookie',
                serializeCookieHeader(name, value, options)
              )
            )
          },
        },
      }
    )

    const { error } = await supabase.auth.exchangeCodeForSession(code)

    if (error) {
      console.error('OAuth error:', error)
    }

    if (!error) {
      return redirect(next, { headers })
    }
  }

  return redirect('/auth/auth-code-error', { headers })
}

（我复制自：https://supabase.com/docs/guides/auth/social-login/auth-github?queryGroups=environment&environment=server&queryGroups=framework&framework=remix。有些东西已被弃用，但我是暂时忽略它）。

我相当确定我已经正确设置了 Github 和 Supabase。

这是我记录的错误：

OAuth error: AuthApiError: invalid request: both auth code and code verifier should be non-empty

我真的不知道在这里做什么。也许有人有想法？

Answer 1

我放弃了 qwik 框架上的 supabase/ssr。他们的官方文档没有提到这一点。我回到了supabase auth helpers包（我理解某人不推荐它）remix官方文档说什么？

使用身份验证帮助程序包，我可以使其在客户端和服务器端调用上正常工作。客户端调用 oauth 登录并使用 createServerClient 在 api 中间件路由中手动设置 HTTP cookie，我可以从任何路由加载器/操作中检索该 cookie。我的主要问题是 vercel Edge 运行时没有使会话在服务器端可用。由于节点运行时，本地主机很好。我在尝试让东西投入生产时遇到了很多麻烦。 不确定这对你有帮助