Chrome Extension Google OAuth: redirect_uri_mismatch Error

[SartreShao]

Bug Report

Describe the bug

I'm trying to implement Google OAuth authentication in a Chrome extension using Supabase Auth, but I'm getting a redirect_uri_mismatch error when attempting to authenticate.

Environment

• Supabase JS Version: ^2.38.4
• Platform: Chrome Extension (Manifest V3)
• Framework: React + TypeScript + Vite
• Project URL: https://bafbefwknhhupvmnzyij.supabase.co

Configuration Details

Google Cloud Console OAuth Client

• Application Type: Chrome extension
• Item ID: pbfhgmnkdjpldbjdmdamheofpjonddip (actual Chrome extension ID)
• Client ID: 731029100183-2vm4ql5kgke9oimgi6nodb19tjmnr6e2.apps.googleusercontent.com

Chrome Extension manifest.json

{
  "manifest_version": 3,
  "permissions": ["identity", "storage"],
  "oauth2": {
    "client_id": "731029100183-2vm4ql5kgke9oimgi6nodb19tjmnr6e2.apps.googleusercontent.com",
    "scopes": ["openid", "email", "profile"]
  }
}

Supabase Configuration

• Google Auth Provider: Enabled
• Client ID: 731029100183-2vm4ql5kgke9oimgi6nodb19tjmnr6e2.apps.googleusercontent.com
• Client Secret: (left empty as per Chrome extension documentation)
• Callback URL: https://bafbefwknhhupvmnzyij.supabase.co/auth/v1/callback

Implementation Code

// Chrome extension Google auth implementation
export const signInWithGoogle = async (): Promise<AuthResult> => {
  try {
    const manifest = chrome.runtime.getManifest()
    const oauth2 = manifest.oauth2
    
    if (!oauth2 || !oauth2.client_id) {
      return { success: false, error: '缺少 Google OAuth 配置' }
    }

    // Build Google OAuth URL
    const redirectUri = `https://${chrome.runtime.id}.chromiumapp.org`
    const url = new URL('https://accounts.google.com/o/oauth2/auth')
    url.searchParams.set('client_id', oauth2.client_id)
    url.searchParams.set('response_type', 'id_token')
    url.searchParams.set('access_type', 'offline')
    url.searchParams.set('redirect_uri', redirectUri)
    url.searchParams.set('scope', oauth2.scopes?.join(' ') || 'openid email profile')

    // Launch Chrome identity auth flow
    return new Promise((resolve) => {
      chrome.identity.launchWebAuthFlow(
        {
          url: url.href,
          interactive: true,
        },
        async (redirectedTo) => {
          if (chrome.runtime.lastError) {
            resolve({
              success: false,
              error: chrome.runtime.lastError.message || '认证失败'
            })
            return
          }

          if (!redirectedTo) {
            resolve({ success: false, error: '认证被取消或失败' })
            return
          }

          try {
            // Extract ID token from redirect URL
            const urlObj = new URL(redirectedTo)
            const params = new URLSearchParams(urlObj.hash.substring(1))
            const idToken = params.get('id_token')

            if (!idToken) {
              resolve({ success: false, error: '无法获取认证令牌' })
              return
            }

            // Sign in with Supabase using ID token
            const { data, error } = await supabase.auth.signInWithIdToken({
              provider: 'google',
              token: idToken,
            })

            if (error) {
              resolve({ success: false, error: error.message })
              return
            }

            resolve({ success: true, user: data.user })
          } catch (error) {
            resolve({ success: false, error: '处理认证令牌时出错' })
          }
        }
      )
    })
  } catch (error) {
    return { success: false, error: '登录过程中出现未知错误' }
  }
}

Error Details

Error Message:

错误 400： redirect_uri_mismatch
无法登录，因为此应用发送的请求无效

Debug Output:

Chrome Extension ID: pbfhgmnkdjpldbjdmdamheofpjonddip
Redirect URI: https://pbfhgmnkdjpldbjdmdamheofpjonddip.chromiumapp.org
Client ID: 731029100183-2vm4ql5kgke9oimgi6nodb19tjmnr6e2.apps.googleusercontent.com

Expected behavior

The Chrome extension should successfully authenticate with Google OAuth and sign in the user to Supabase.

Steps to reproduce

1. Create a Chrome extension with Manifest V3
2. Configure Google Cloud Console OAuth client as "Chrome extension" type
3. Enable Google auth provider in Supabase
4. Implement authentication using chrome.identity.launchWebAuthFlow()
5. Call supabase.auth.signInWithIdToken() with the obtained ID token
6. Get redirect_uri_mismatch error

Questions

1. Should Chrome extensions use "Chrome extension" or "Web application" OAuth client type for Supabase integration?
2. Is there a specific redirect URI that should be configured in Google Cloud Console for Chrome extensions?
3. Are there any special considerations for Supabase Auth with Chrome extensions?

References

• Supabase Auth with Google for Chrome Extensions
• Chrome Extension ID: pbfhgmnkdjpldbjdmdamheofpjonddip
• The documentation mentions "you do not have to configure the OAuth flow in the Supabase Dashboard to sign in with Google inside Chrome extensions" - but we still need to enable the Google provider, correct?

Additional context

I followed the official Supabase documentation for Chrome extensions, but the configuration seems to be causing issues. Any guidance on the proper setup would be greatly appreciated.

---

Environment Info:

• Chrome Version: Latest
• OS: Windows 11
• Node.js: Latest LTS
• Build Tool: Vite

[SubhaNAG2001]

Based on your detailed bug report, I can identify the core issue: Google OAuth requires a registered redirect URI, and the Chrome extension flow uses a special chromiumapp.org URI that must be explicitly configured in your Google Cloud Console. Here's the complete solution:

1. Fix Google Cloud Console Configuration

The critical fix is adding the Chrome extension redirect URI to your Google Cloud credentials:

1. Go to Google Cloud Console
2. Navigate to Credentials → Select your OAuth client ID
3. Under Authorized redirect URIs, add:

   https://pbfhgmnkdjpldbjdmdamheofpjonddip.chromiumapp.org
   

4. Save changes

2. Update Supabase Auth Method

You're mixing two different auth flows. For Chrome extensions, use this optimized implementation:

import { supabase } from './supabaseClient';

export const signInWithGoogle = async (): Promise<AuthResult> => {
  try {
    const redirectUri = `https://${chrome.runtime.id}.chromiumapp.org`;
    
    // Step 1: Launch Chrome auth flow
    const authUrl = await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: redirectUri,
        scopes: 'openid email profile',
        queryParams: {
          access_type: 'offline',
          prompt: 'consent',
        },
      },
    });

    if (authUrl.error) throw authUrl.error;

    // Step 2: Complete auth flow
    const result = await new Promise<AuthResult>((resolve) => {
      chrome.identity.launchWebAuthFlow(
        {
          url: authUrl.data.url,
          interactive: true,
        },
        async (callbackUrl) => {
          if (!callbackUrl) {
            resolve({ success: false, error: 'Authentication canceled' });
            return;
          }

          // Step 3: Extract code from callback URL
          const url = new URL(callbackUrl);
          const code = url.searchParams.get('code');
          
          if (!code) {
            resolve({ success: false, error: 'Authorization code missing' });
            return;
          }

          // Step 4: Exchange code for session
          const { data, error } = await supabase.auth.exchangeCodeForSession(code);
          
          if (error) {
            resolve({ success: false, error: error.message });
          } else {
            resolve({ success: true, user: data.user });
          }
        }
      );
    });

    return result;
  } catch (error) {
    return { 
      success: false, 
      error: error instanceof Error ? error.message : 'Unknown error' 
    };
  }
};

3. Required Supabase Dashboard Configuration

1. Go to Supabase Dashboard → Authentication → Providers
2. Configure Google provider:
   • Client ID: Your Google Cloud Client ID
   • Client Secret: (Leave empty for Chrome extensions)
   • Redirect URL: https://<your-project-ref>.supabase.co/auth/v1/callback
3. Add additional redirect URI:

   https://pbfhgmnkdjpldbjdmdamheofpjonddip.chromiumapp.org
   

4. Update Chrome Manifest (manifest.json)

Add explicit content security policy:

{
  "manifest_version": 3,
  "permissions": ["identity"],
  "host_permissions": [
    "https://*.supabase.co/*",
    "https://accounts.google.com/*"
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
  },
  "oauth2": {
    "client_id": "731029100183-2vm4ql5kgke9oimgi6nodb19tjmnr6e2.apps.googleusercontent.com",
    "scopes": ["openid", "email", "profile"]
  }
}

Key Changes Explained:

1. Correct OAuth Flow:

   • Use Supabase's signInWithOAuth to generate proper auth URL
   • Implement full OAuth2 code exchange flow
   • Avoid manual token handling

2. Redirect URI Fix:

   • The chromiumapp.org URI must be registered in both Google Cloud and Supabase
   • Chrome extensions require this special redirect format

3. Security Updates:

   • Added necessary host permissions
   • Configured content security policy
   • Removed unnecessary storage permission

4. Session Management:

   • Uses Supabase's built-in exchangeCodeForSession
   • Properly handles token refresh and session persistence

Verification Steps:

1. Test the auth flow locally:

   npm run dev # or your build command

2. Load unpacked extension in Chrome:
   • Open chrome://extensions
   • Enable "Developer mode"
   • Click "Load unpacked" and select your dist folder
3. Trigger authentication and monitor network traffic

Additional Recommendations:

1. Error Handling:

   • Add more specific error messages
   • Implement retry logic for network issues

2. Session Persistence:

   // In your main extension script
   chrome.runtime.onStartup.addListener(() => {
     supabase.auth.startAutoRefresh();
   });

3. User State Management:

   // Listen to auth state changes
   supabase.auth.onAuthStateChange((event, session) => {
     console.log('Auth state changed:', event, session);
   });

4. Production Deployment:

   • Publish your extension to Chrome Web Store
   • Add the published extension URL to Google Cloud's "Authorized domains"

This solution implements the correct OAuth2 flow for Chrome extensions while properly integrating with Supabase's authentication system. The redirect_uri_mismatch error should be resolved by adding the chromiumapp.org URI to your Google Cloud credentials.

[Hallidayo]

Hi all, We’re going to close this one due to inactivity. Please feel free to reopen if you’re still having issues here or open a new issue.