How to fix bad_oauth_callback: OAuth callback contains an error in Supabase

// Example callback URL with error details
// https://your-app.com/auth/callback?error=access_denied&error_description=The+user+denied+your+request

// Parse the URL to extract error information
const urlParams = new URLSearchParams(window.location.search);
const errorType = urlParams.get('error'); // e.g., "access_denied"
const errorDescription = urlParams.get('error_description');

console.log('OAuth error type:', errorType);
console.log('Error description:', errorDescription);

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

// In your callback handler or error boundary
const handleAuthError = (error: AuthError) => {
  if (error.message.includes('bad_oauth_callback')) {
    const urlParams = new URLSearchParams(window.location.search)
    const errorType = urlParams.get('error')

    if (errorType === 'access_denied') {
      // User explicitly denied permission
      return {
        title: 'Permission Required',
        message: 'You need to grant permissions to sign in with this provider. Please try again and click "Allow" when prompted.',
        action: 'Try Again'
      }
    } else {
      // Other OAuth errors
      return {
        title: 'Sign-in Failed',
        message: 'We couldn't sign you in with this provider. Please try another method or contact support.',
        action: 'Use Email Instead'
      }
    }
  }
}

// Clear the error from URL to prevent infinite loops
if (window.location.search.includes('error=')) {
  window.history.replaceState({}, '', window.location.pathname)
}

// Environment-specific configuration
const getSupabaseUrl = () => {
  if (process.env.NODE_ENV === 'development') {
    return process.env.NEXT_PUBLIC_SUPABASE_URL_LOCAL
  }
  if (process.env.VERCEL_ENV === 'preview') {
    return process.env.NEXT_PUBLIC_SUPABASE_URL_STAGING
  }
  return process.env.NEXT_PUBLIC_SUPABASE_URL_PRODUCTION
}

// Verify the correct project reference is being used
console.log('Supabase project ref:', process.env.NEXT_PUBLIC_SUPABASE_URL?.split('.')[0])

// Test OAuth flow manually
const testOAuthFlow = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: window.location.origin + '/auth/callback',
      queryParams: {
        // Add test parameters if needed
        prompt: 'select_account' // Forces account selection
      }
    }
  })

  if (error) {
    console.error('OAuth initiation failed:', error)
    // Check if it's a configuration issue
    if (error.message.includes('Provider not enabled')) {
      console.error('Provider not enabled in Supabase dashboard')
    }
  }
}

// Server-side error logging
app.get('/auth/callback', async (req, res) => {
  try {
    const { data, error } = await supabase.auth.getSession()

    if (error) {
      // Log detailed OAuth error information
      console.error('OAuth callback error:', {
        error: error.message,
        errorCode: error.code,
        urlParams: req.query,
        timestamp: new Date().toISOString(),
        userAgent: req.headers['user-agent'],
        ip: req.ip
      })

      // Send to error monitoring service
      await sendToSentry('oauth_callback_error', {
        error: error.message,
        provider: req.query.provider,
        error_type: req.query.error
      })

      // Redirect to error page with helpful message
      return res.redirect('/auth/error?type=oauth&details=' + encodeURIComponent(error.message))
    }

    // Success - redirect to app
    res.redirect('/dashboard')
  } catch (err) {
    console.error('Unexpected error in callback:', err)
    res.redirect('/auth/error?type=unexpected')
  }
})