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.