How to fix bad_oauth_state: OAuth state parameter is missing or invalid in Supabase

https://myapp.com          (production domain)
https://app.example.com    (subdomain)
http://localhost:3000      (local development)
http://localhost:5173      (Vite dev server)

❌ Site URL: http://127.0.0.1:3000 but accessing via http://localhost:3000
❌ Site URL: https://myapp.com but running on http://myapp.local
❌ Site URL: https://myapp.com but accessing http://localhost:3000 for testing
❌ Site URL: https://www.myapp.com but accessing https://myapp.com (or vice versa)

Site URL: https://myapp.com     → Access via https://myapp.com
Site URL: http://localhost:3000 → Access via http://localhost:3000

Site URL: https://myapp.com but access http://myapp.com
Site URL: http://localhost:3000 but access https://localhost:3000

http://localhost:3000/auth/callback      (local development)
http://localhost:3000                    (if SPA redirects to root)
https://myapp.com/auth/callback          (production)
https://staging.myapp.com/auth/callback  (staging)

npm install @supabase/ssr

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export function createClient() {
  const cookieStore = cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // Handle in middleware if needed
          }
        },
      },
    }
  )
}

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.REACT_APP_SUPABASE_URL!,
  process.env.REACT_APP_SUPABASE_ANON_KEY!,
  {
    auth: {
      persistSession: true,           // Enable session persistence
      storage: window.localStorage,   // Or sessionStorage
      autoRefreshToken: true,
      detectSessionInUrl: true,       // Auto-detect from URL
    },
  }
)

// Use custom storage adapter for cookies
const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!,
  {
    auth: {
      storage: {
        getItem: (key) => cookies[key],
        setItem: (key, value) => { cookies[key] = value },
        removeItem: (key) => { delete cookies[key] },
      },
    },
  }
)

// Verify cookies are being set
console.log('Cookies enabled:', navigator.cookieEnabled)

// Check if auth cookies exist
const cookies = document.cookie
console.log('Document cookies:', cookies)

https://accounts.google.com/o/oauth2/v2/auth?
   client_id=...
   &state=abc123xyz...    ← State parameter should be here
   &redirect_uri=...

http://localhost:3000/auth/callback?code=...&state=abc123xyz...

// app/auth/callback/route.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get('code')

  if (code) {
    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {
          getAll() { return cookies().getAll() },
          setAll(cookiesToSet) {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookies().set(name, value, options)
            )
          },
        },
      }
    )

    // This exchanges the code and validates the state parameter
    const { data, error } = await supabase.auth.exchangeCodeForSession(code)

    if (error) {
      // State validation failed - log for debugging
      console.error('State validation error:', error.message)
      return NextResponse.redirect(`${requestUrl.origin}/auth/error?error=${error.code}`)
    }

    // Success - redirect to home
    return NextResponse.redirect(`${requestUrl.origin}/`)
  }

  // No code provided
  return NextResponse.redirect(`${requestUrl.origin}/auth/error`)
}

import { useNavigate, useSearchParams } from 'react-router-dom'
import { useEffect } from 'react'
import { supabase } from '@/lib/supabase'

export function CallbackPage() {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const code = searchParams.get('code')

  useEffect(() => {
    if (!code) {
      navigate('/auth/error')
      return
    }

    supabase.auth.exchangeCodeForSession(code)
      .then(({ data, error }) => {
        if (error) {
          console.error('OAuth state error:', error.message)
          navigate('/auth/error')
        } else {
          navigate('/')
        }
      })
  }, [code, navigate])

  return <div>Processing authentication...</div>
}