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, type ActionFunctionArgs } from '@remix-run/node'
2
import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'
3
4
export async function action({ request }: ActionFunctionArgs) {
5
  const responseHeaders = new Headers()
6
7
  // Collect every cookie the client sets, so they can be sent with the redirect
8
  const supabase = createServerClient(
9
    process.env.SUPABASE_URL!,
10
    process.env.SUPABASE_PUBLISHABLE_KEY!,
11
    {
12
      cookies: {
13
        getAll() {
14
          return parseCookieHeader(request.headers.get('Cookie') ?? '')
15
        },
16
        setAll(cookiesToSet, cacheHeaders) {
17
          cookiesToSet.forEach(({ name, value, options }) =>
18
            responseHeaders.append('Set-Cookie', serializeCookieHeader(name, value, options))
19
          )
20
          Object.entries(cacheHeaders).forEach(([key, value]) => responseHeaders.set(key, value))
21
        },
22
      },
23
    }
24
  )
25
26
  const { data, error } = await supabase.auth.signInWithOAuth({
27
    provider: 'github',
28
  })
29
  if (error) throw error
30
31
  return redirect(data.url, { headers: responseHeaders })
32
}