Next.JS + supabase + google oauth sign in : In production with custom domain always redirects to error page later works fine

[mailtosravan2024-del]

[KaloudasDev]

Hello! This is a common OAuth configuration issue with custom domains. The problem typically occurs due to redirect URI mismatches between your Supabase configuration and production environment.

Solution: Update Supabase Redirect URLs

1. Go to your Supabase Project:
   • Navigate to Authentication → Settings → URL Configuration
   • Update the following URLs:

https://yourcustomdomain.com

https://yourcustomdomain.com/auth/callback
https://yourcustomdomain.com/api/auth/callback
https://yourcustomdomain.com/auth/confirm

2. Verify Next.js Environment Configuration
   Ensure your .env.production file has the correct URLs:

NEXT_PUBLIC_SITE_URL=https://yourcustomdomain.com
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

3. Update Next.js Auth Configuration
   In your Next.js auth setup:

export const { auth } = createClient({
  supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL,
  supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  options: {
    auth: {
      flowType: 'pkce',
      autoRefreshToken: true,
      detectSessionInUrl: true,
      persistSession: true,
    },
  },
})

4. Clear Browser Data and Test
   After updating Supabase settings:

• Clear browser cache and cookies
• Restart your Next.js production server
• Test the OAuth flow again

The initial error occurs because Supabase redirects to the configured URL, which doesn't match your custom domain until the configuration is updated. Once corrected, subsequent attempts should work seamlessly.