Help with Google OAuth in React (Vite) Chrome extension.

[prestonButton]

I am building a chrome extension using Vite with React and TypeScript. I managed to get auth working on the webapp, but when I built it and loaded it as an extension the auth stopped working. I went in the Supabase docs and fond this page which describes how to authenticate for a chrome extension. I configured my manifest.json like they said:

{
    "manifest_version": 3,
    "name": "vite",
    "version": "1.0",
    "description": "",
    "action": {
        "default_popup": "index.html"
    },
    "permissions": [
        "scripting",
        "tabs",
        "activeTab",
        "identity"
    ],
    "host_permissions": [
        "https://*/*",
        "http://*/*"
    ],
    "icons": {
        "16": "./vite.svg",
        "32": "./vite.svg"
    },
    "oauth2": {
      "client_id": "171977660243-vv0pm4ui7pf5fivjv0ff8t3g2dbtb3vf.apps.googleusercontent.com",
      "scopes": ["openid", "email", "profile", "https://www.googleapis.com/auth/calendar"]
    },
    "background": {
        "service_worker": "background.js",
        "type": "module"
    }
  }

And then put the other code in public/background.js

const manifest = chrome.runtime.getManifest()

const url = new URL('https://accounts.google.com/o/oauth2/auth')

url.searchParams.set('client_id', manifest.oauth2.client_id)
url.searchParams.set('response_type', 'id_token')
url.searchParams.set('access_type', 'offline')
url.searchParams.set('redirect_uri', `https://${chrome.runtime.id}.chromiumapp.org`)
url.searchParams.set('scope', manifest.oauth2.scopes.join(' '))

// The redirect URI is a special URI that is handled by the extension's
console.log(chrome.runtime.id)

chrome.identity.launchWebAuthFlow(
  {
    url: url.href,
    interactive: true,
  },
  async (redirectedTo) => {
    if (chrome.runtime.lastError) {
      // auth was not successful
    } else {
      // auth was successful, extract the ID token from the redirectedTo URL
      const url = new URL(redirectedTo)
      const params = new URLSearchParams(url.hash)

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'google',
        token: params.get('id_token'),
      })
    }
  }
)

Now, when I build this, I get Error 400: redirect_uri_mismatch

I ma wondering if I did this wrong - put the authentication code in the wrong place, or if it is a configuration problem with either Google or Supabase. One thing to note, in the code I put in background.js, supabase is undefined, which leads me tho think that it may be in the wrong place, but IDK. Any help would be apreciated.

[cohlar]

Same issue here. @prestonButton were you able to find a solution?

[prestonButton]

No, and then I shelved the project due to other obligations, but if you are able to figure out a solution, please comment in this thread

[cohlar]

OK will do. I posted the issue on stackoverflow. Feel free to upvote in the hope to get a solution

[cohlar]

All right I made it work with these three changes:

1. I used a Client ID for Web application rather than for Chrome extension and added https://<extension_id>.chromiumapp.org (without trailing slash) to the list of Authorized redirect URIs

2. To make this work locally, I added the manifest key to my extension - Google seems to check the extension ID at runtime as part of launchWebAuthFlow

3. I replaced const params = new URLSearchParams(url.hash) with const params = new URLSearchParams(url.hash.replace('#', '')). The reason is url.hash looks like #id_token=<id_token>&..., so the search param key looks like %23id_token and params.get('id_token') returns undefined.

Hope this helps

[KrishavRajSingh]

You are a lifesaver, if this works.