Error 400 redirect_uri_mismatch

Is there a specific configuration required in the Google Cloud Console to support other Chromium-based browsers (like Edge) when using chrome.identity.launchWebAuthFlow?

Yes, there are configurations needed to make Google OAuth 2.0 work seamlessly across multiple browsers, including Microsoft Edge. Here’s what you need to ensure:

1. Authorized Redirect URIs:
   • Google OAuth requires that the redirect_uri used in the authentication request must exactly match one of the authorized redirect URIs specified in your Google Cloud Console project.
   • When using chrome.identity.launchWebAuthFlow, the redirect_uri is typically:

     https://<extension-id>.chromiumapp.org/
     

   • In Edge, the extension-id may remain the same, but you still need to explicitly add the Edge-specific redirect URI in the Google Cloud Console OAuth 2.0 Client ID configuration.

   Steps to Configure:

   • Go to the Credentials section in your Google Cloud Console.
   • Find the OAuth 2.0 Client ID used by your extension.
   • Edit the client ID settings to include:

     https://<extension-id>.chromiumapp.org/
     

2. Platform Type:
   • Ensure your app is configured under the correct platform type. Since this is a Chrome extension, select Web Application during the OAuth setup in Google Cloud Console.

Does Edge handle chrome.identity.launchWebAuthFlow differently, causing it to reject the redirect_uri? Are there any known limitations or workarounds for this issue in Chromium-based browsers other than Chrome?

Edge handles the chrome.identity.launchWebAuthFlow API similarly to Chrome, as it is based on the Chromium engine. However, there are potential differences that can cause issues:

1. Redirect URI Format:
   • Edge might require a stricter validation of the redirect_uri. While Chrome assumes the chromiumapp.org domain for its extensions, Edge might encounter issues if the redirect_uri is not explicitly whitelisted in your Google Cloud Console configuration.
2. Cross-Origin Restrictions:
   • Edge might enforce stricter CORS policies, which can interfere with the chrome.identity.launchWebAuthFlow API. Ensure that your app correctly handles any CORS headers, especially if you are performing additional API requests after receiving the OAuth token.
3. Known Workarounds:
   • Use the force=true parameter in the launchWebAuthFlow URL to ensure that a fresh authorization flow is initiated, bypassing cached tokens that might cause inconsistencies.
   • Consider implementing a fallback to manually construct the Google OAuth 2.0 URL and handle the token exchange process programmatically, bypassing the chrome.identity API entirely.
   • If possible, test your extension in the latest version of Edge with all updates applied to ensure compatibility.

Debugging Steps

1. Verify the redirect_uri:
   • Log the redirect_uri being sent in the authentication request and compare it with the authorized URIs in Google Cloud Console.
2. Inspect Edge DevTools Console:
   • Look for detailed error messages when launchWebAuthFlow fails. The error may provide insights into the exact mismatch or other issues.
3. Check for Edge-Specific Issues:
   • Verify that the Edge extension manifest file includes permissions for identity and any other necessary scopes.

Example Code Snippet

Here’s an example of how to handle the flow using launchWebAuthFlow:

chrome.identity.launchWebAuthFlow(
  {
    url: 'https://accounts.google.com/o/oauth2/v2/auth?' +
         'client_id=YOUR_CLIENT_ID&' +
         'response_type=token&' +
         'redirect_uri=https://' + chrome.runtime.id + '.chromiumapp.org/&' +
         'scope=email profile',
    interactive: true,
  },
  (redirectUrl) => {
    if (chrome.runtime.lastError) {
      console.error('Error during authentication:', chrome.runtime.lastError);
    } else {
      const urlParams = new URLSearchParams(new URL(redirectUrl).hash.substring(1));
      const accessToken = urlParams.get('access_token');
      console.log('Access Token:', accessToken);
    }
  }
);

Ensure the redirect_uri matches the one registered in your Google Cloud Console project.

By addressing these steps and configurations, you should be able to make chrome.identity.launchWebAuthFlow work in Edge and other Chromium-based browsers.