How to Use Third-Party OAuth Providers with Supabase

1# Your Supabase OAuth callback URL (same for all providers)
2https://<your-project-ref>.supabase.co/auth/v1/callback
3
4# Example for Google Cloud Console:
5# Authorized redirect URIs: https://abcdef123456.supabase.co/auth/v1/callback
6
7# Example for GitHub OAuth App:
8# Authorization callback URL: https://abcdef123456.supabase.co/auth/v1/callback

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6)
7
8// Sign in with Google
9async function signInWithGoogle() {
10  const { data, error } = await supabase.auth.signInWithOAuth({
11    provider: 'google',
12    options: {
13      redirectTo: 'http://localhost:3000/auth/callback',
14    },
15  })
16  if (error) console.error('OAuth error:', error.message)
17  // data.url contains the OAuth authorization URL
18  // The browser is automatically redirected
19}
20
21// Sign in with GitHub
22async function signInWithGitHub() {
23  const { data, error } = await supabase.auth.signInWithOAuth({
24    provider: 'github',
25    options: {
26      redirectTo: 'http://localhost:3000/auth/callback',
27    },
28  })
29}

1// For client-side apps (React, Vue, etc.)
2// The Supabase client automatically handles the code exchange
3// when it detects auth parameters in the URL hash
4
5// For Next.js App Router — create app/auth/callback/route.ts
6import { createClient } from '@/lib/supabase/server'
7import { NextResponse } from 'next/server'
8
9export async function GET(request: Request) {
10  const { searchParams, origin } = new URL(request.url)
11  const code = searchParams.get('code')
12  const next = searchParams.get('next') ?? '/dashboard'
13
14  if (code) {
15    const supabase = await createClient()
16    const { error } = await supabase.auth.exchangeCodeForSession(code)
17    if (!error) {
18      return NextResponse.redirect(`${origin}${next}`)
19    }
20  }
21
22  return NextResponse.redirect(`${origin}/login?error=auth_callback_failed`)
23}

1# Supabase Dashboard → Authentication → URL Configuration
2# Site URL: https://yourapp.com
3# Redirect URLs:
4#   http://localhost:3000/auth/callback
5#   https://yourapp.com/auth/callback
6#   https://staging.yourapp.com/auth/callback