Lesson 11 / 25

OAuth Providers

Sign in with Google, GitHub and others.

Redirect-based sign-in

Enable a provider (Google, GitHub, Apple and many more) in the dashboard with the client id and secret from that provider, and register Supabase's callback URL with the provider. signInWithOAuth({ provider }) redirects the user to the provider and back to your redirectTo URL. Add every allowed redirect URL to the project's redirect allow list. Modern setups use the PKCE flow, where your callback route exchanges a code for a session; check the docs for your framework.

GitHub sign-in with a callback

Client call plus a code exchange.

// client: start the OAuth flow
await supabase.auth.signInWithOAuth({
  provider: 'github',
  options: { redirectTo: 'https://app.example.com/auth/callback' },
})

// server route /auth/callback (PKCE): exchange the code for a session
const code = new URL(request.url).searchParams.get('code')
if (code) {
  const { error } = await supabase.auth.exchangeCodeForSession(code)
}

Keep the redirect allow list tight

Allow only your real domains (plus localhost for development). Broad wildcards make it easier to leak tokens to attacker-controlled URLs.

Quick check: In the PKCE flow, what does the callback route do?

  • Disables RLS for the user
  • Stores the provider secret in the browser
  • Creates a new database table
  • Exchanges the returned code for a session
Answer

Exchanges the returned code for a session — exchangeCodeForSession completes sign-in.