redirect_uri_mismatch when using identity launchWebAuthFlow for google chrome extension

Question

I've been trying to get chrome.identity.launchWebAuthFlow work with my Chrome Extension to access Google's OAuth Flow (no, I prefer not to use the getAuthToken). I've followed the implementation layed out in this question.

These are the steps I went through to set things up:

Generated a Key for my Extension that I've added to manifest.json, so the Extension ID doesn't change (according to this answer)
Went to to Google Cloud Platform and registered a new Application and enabled the API access. For Credentials I chose OAuth ID > Chrome App, entered my Extension ID and got my client ID.

I've implemented this code in my background.js file

var auth_url = 'https://accounts.google.com/o/oauth2/auth';
var client_id = '<client_id from Cloud Console>';
var redirect_url = chrome.identity.getRedirectURL("oauth2");
var auth_params = {
    client_id: client_id,
    redirect_uri: redirect_url,
    response_type: 'token',
    scope: 'profile'
};

var params = Object.keys(auth_params).map(function(k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(auth_params[k])}).join('&')
auth_url += '?' + params;

console.log(redirect_url);
console.log(auth_url);
chrome.identity.launchWebAuthFlow({url: auth_url, interactive: true}, 
        function(responseUrl) { console.log(responseUrl); });

When I run this I receive Unchecked runtime.lastError while running identity.launchWebAuthFlow: Authorization page could not be loaded.

Then I check the auth URL in the browser and the error is 400 redirect_uri_mismatch

Now I've checked the redirect_url countless times. It is of the format https://<app-id>.chromiumapp.org/oauth2 - The App ID matches exactly what I put into the Cloud Console Credentials. It also doesn't change when I reload the Extension, as it is tied to the Key in the manifest.json

What am I missing? Can anyone confirm that this still works?

For reference, my manifest.json file

    {
      "name": "My OAuth Extension",
      "key": "<My KEY>",
      "version": "0.0.1",
      "manifest_version": 2,
      "description": "Testing OAuth",
      "homepage_url": "http://test.com",
      "default_locale": "en",
      "permissions": [
        "https://*/*",
        "identity",
        "*://*.google.com/*"
      ],
      "background": {
        "scripts": ["src/bg/background.js"],
        "persistent": true
      }
    }

What am I missing? Can anyone confirm that this still works?

were you able to figure this out? I'm working on the same problem. — Mike, Dec 14 '18 at 18:11
no, I ended up using a workaround with whereas firebase auth takes over the authentication via oauth — JulianJ, Dec 16 '18 at 09:07

score 0 · Answer 1 · answered Feb 01 '23 at 13:52

I had an identical project in my application and solved it as follows:

I created a new ClientID of type Web application in Google Cloud Platform
I added the following url to the Authorized redirect URIs: https://<appId>.chromiumapp.org/.
I used the new ClientID in the url argument in the chrome.identity.launchWebAuthFlow function.
After sign in I got redirect_url in the function callback.

redirect_uri_mismatch when using identity launchWebAuthFlow for google chrome extension

1 Answers1