🧩 Plasmo Developers•17mo ago

Browser-agnostic Google OAuth 2

I need to allow the user to log in with his Google account, regardless of the browser he's using. I'm not using Firebase BTW The issue is that Google's documentation (https://developer.chrome.com/docs/extensions/mv3/tut_oauth/#identity_permission) is not relevant to Edge, since Edge only allows https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/identity/launchWebAuthFlow What am I missing?

1 Reply

AviOP•17mo ago

The solution I came up with, thanks to https://www.phind.com/search?cache=a895cec9-7bb7-4f63-a327-cf34a2b43dc0, is: 1. Generate a permanent extension ID. If you have the ext in production, you can follow https://developer.chrome.com/docs/extensions/mv3/tut_oauth/#keep-consistent-id 2. Generate a client ID (https://console.cloud.google.com/apis/credentials) 3. While generating, use a redirect URI of https://<ext_id>.chromiumapp.org 4. In the manifest, make sure to have

   {
     "manifest": {
       "key": "<key if you've generated  using step 1. it'll make the ext ID permanent>",
       "permissions": ["identity"]
     }
   }

   {
     "manifest": {
       "key": "<key if you've generated  using step 1. it'll make the ext ID permanent>",
       "permissions": ["identity"]
     }
   }

5. In the ext, e.g. popup:

<script lang="ts">
  function getGoogleOAuthURL() {
    const options = {
      redirect_uri: "https://<ext_id>.chromiumapp.org",
      client_id: process.env.PLASMO_PUBLIC_GOOGLE_CLIENT_ID as string,
      access_type: "offline",
      response_type: "code",
      prompt: "consent",
      scope: [
        "https://www.googleapis.com/auth/userinfo.profile",
        "https://www.googleapis.com/auth/userinfo.email"
      ].join(" ")
    } as const;

    console.log(options);

    return `https://accounts.google.com/o/oauth2/v2/auth?${new URLSearchParams(
      options
    )}`;
  }

  async function getAuth() {
    const data = await chrome.identity.launchWebAuthFlow({
      interactive: true,
      url: getGoogleOAuthURL()
    });
    console.log(data);
  }
</script>

<button on:click={getAuth}>Sign in with Google</button>

<script lang="ts">
  function getGoogleOAuthURL() {
    const options = {
      redirect_uri: "https://<ext_id>.chromiumapp.org",
      client_id: process.env.PLASMO_PUBLIC_GOOGLE_CLIENT_ID as string,
      access_type: "offline",
      response_type: "code",
      prompt: "consent",
      scope: [
        "https://www.googleapis.com/auth/userinfo.profile",
        "https://www.googleapis.com/auth/userinfo.email"
      ].join(" ")
    } as const;

    console.log(options);

    return `https://accounts.google.com/o/oauth2/v2/auth?${new URLSearchParams(
      options
    )}`;
  }

  async function getAuth() {
    const data = await chrome.identity.launchWebAuthFlow({
      interactive: true,
      url: getGoogleOAuthURL()
    });
    console.log(data);
  }
</script>

<button on:click={getAuth}>Sign in with Google</button>

If everything is executed correctly, data should contain something like

https://<ext_id>.chromiumapp.org/?code=<auth_code>&scope=email%20profile%20https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/yt-analytics.readonly%20openid&authuser=0&prompt=consent

https://<ext_id>.chromiumapp.org/?code=<auth_code>&scope=email%20profile%20https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/yt-analytics.readonly%20openid&authuser=0&prompt=consent

Essentially, you'll have to use the auth code to make requests to Google's APIs

Gaming

Programming

Browser-agnostic Google OAuth 2