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

I am trying to implement oAuth (Github in this case) in my Remix.run app using Supabase.

This is my signup action:

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 }
}

This is my 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 })
}

(I copied it from: https://supabase.com/docs/guides/auth/social-login/auth-github?queryGroups=environment&environment=server&queryGroups=framework&framework=remix. Some of the things are deprecated but I am ignoring that for now).

I am fairly sure that I’ve setup Github and Supabase correctly.

This is the error that I get logged:
OAuth error: AuthApiError: invalid request: both auth code and code verifier should be non-empty

I am really at a loss what to do here. Maybe someone has an idea?

Thanks in advance.

You need to sign in to view this answers

Related Post