OAuth sign in isn't redirecting on the server side

The reason behind this limitation is that the auth helpers library lacks a direct mechanism for performing server-side redirects, as each framework handles redirects differently. However, the library does offer a URL through the data property it returns, which should be used for the purpose of redirection.

With the PKCE flow in @supabase/ssr, signInWithOAuth stores the code verifier in a cookie. When your setAll collects Set-Cookie headers into a Headers object, as in Remix, pass them on the redirect. Otherwise the browser never stores the code verifier and the callback exchange fails. In Next.js and SvelteKit, the framework's cookie API writes to the response for you, so the redirect needs nothing extra.

Next.js:

1
import { NextResponse } from "next/server";
2
...
3
const { data } = await supabase.auth.signInWithOAuth({
4
  provider: 'github',
5
})
6
7
return NextResponse.redirect(data.url)

SvelteKit:

1
import { redirect } from '@sveltejs/kit';
2
...
3
const { data } = await supabase.auth.signInWithOAuth({
4
  provider: 'github',
5
})
6
7
throw redirect(303, data.url)

Remix:

1
import { redirect } from "@remix-run/node"; // or cloudflare/deno
2
// Your server client factory: createServerClient with a setAll that appends
3
// Set-Cookie to `headers`, returning both. See the PKCE flow's Server example.
4
import { createClient } from "~/lib/supabase.server";
5
...
6
const { supabase, headers } = createClient(request)
7
const { data } = await supabase.auth.signInWithOAuth({
8
  provider: 'github',
9
})
10
11
return redirect(data.url, { headers })