CODEWITHSUNDEEP
google-chrome-extensionoauth-2.0google-oauthgoogle-openidsign-in-with-google
Anas
Anas

Reputation: 45

redirect URI mismatch error for google auth 2.0 and openid connect (OAuth Client ID type "Chrome Extension" and "Web Application")

I'm very new to chrome extension development. I'm trying to integrate google authentication to a chrome extension that I'm building. First, I added google auth using a OAuth client ID of type "Chrome Extension" that doesn't require you to enter your redirect URI when setting up. When trying to sign in with the extension, I get the pop-up for google login with the following error:

You can’t sign in because this app sent an invalid request. You can try again later or contact the developer about this issue.

If you are a developer of this app, see error details.

Error 400: redirect_uri_mismatch

I've checked hundreds of times and found that the redirect URI is correct. I've checked the extension ID and found it the same. I'm using the code chrome.identity.getRedirectURL() to get the redirect URI and it returns the correct URI. I've tried passing the redirect URI to the web auth flow encoded as well but no luck and the error is persistent.

To try a different approach, I've created an OAuth Client ID of type "Web Application" which explicitly requires you to enter the redirect URI at the time of creation. But the error is the same and persistent.

I'm not sure at this point what else I can try. I'd appreciate any help regarding this. Also, I'm not sure what other information I can provide but let me know what other information you'd need. I have mostly used this tutorial to implement oauth using "Web Application" method.

Thanks,

Upvotes: 1

Views: 1039

Answers (2)

Zaif Senpai
Zaif Senpai

Reputation: 91

If it says redirect_uri_mismatch, there is probably something wrong with the redirect URL you are sending. To debug this, you can click on "error details." in the the error screen that is shown.

click on "error details."

Google Login

Here is a way I perform Google Login in chrome extensions and it work very well. I usually put the logic to call chrome.identity.launchWebAuthFlow in service worker as frontend window could be closed by user while loading.

I use chrome.identity.launchWebAuthFlow all the time even for Google login. On Google Cloud Console, create the OAuth Client ID for "Web application" and add the following redirect url to it:

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

Replace the <extension-id> part with your extension id you see in chrome://extensions/.

Now on the extension code when user clicks on login button:

import { initializeApp } from "firebase/app";
import {
  getAuth,
  GoogleAuthProvider,
  signInWithCredential,
} from "firebase/auth";

// URL setup
const clientId = "YOUR_CLIENT_ID";
const scopes = [
  "https://www.googleapis.com/auth/userinfo.profile",
  "https://www.googleapis.com/auth/userinfo.email",
];
const callbackUrl = chrome.identity.getRedirectURL("google");

const url = new URL("https://accounts.google.com/o/oauth2/v2/auth");
url.searchParams.append("client_id", clientId);
url.searchParams.append("response_type", "token");
url.searchParams.append("prompt", "consent select_account");
url.searchParams.append("redirect_uri", callbackUrl);
url.searchParams.append("scope", scopes.join(" "));

// Get token
const token = await chrome.identity
  .launchWebAuthFlow({
    url: url.toString(),
    interactive: true,
  })
  .then((url) => {
    console.log("🚀 ~ launchWebAuthFlow ~ url:", url);

    // See https://stackoverflow.com/a/44169739/13055122
    // on how to parse url parameters
    return extractToken(url);
  })
  .catch((err) => console.log(err));

// Perform login
if (token) {
  const auth = getAuth(initializeApp(FirebaseConfig));

  const credential = GoogleAuthProvider.credential(null, token);
  signInWithCredential(auth, credential);
}

Upvotes: 1

ade19
ade19

Reputation: 1200

Follow this guide instead to integrate Google Identity services into your Chrome extension. The launchWebAuthFlow() method enables auth flows for non-Google identity providers. You should be using the getAuthToken() method instead which delivers the OAuth 2.0 response directly to your app and doesnt require you to provide a redirect URI.

Upvotes: 0

Related Questions