Firebase auth in Chrome extension manifest v3

I am writing my extension, I was very pleased with the recent statements by Google that everyone really needs to update to the third version of the manifest for the sake of user privacy and performance improvement (neither one nor the other has changed significantly).

Google announced that as of January 17, 2022, the new Manifest V2 extensions will no longer be accepted by the Chrome Web Store. Developers can still submit updates for existing version 2 extensions of the manifest.
Beginning January 2023, the Chrome browser will no longer run Manifest V2 extensions. Developers can no longer submit updates for existing version 2 extensions of the manifest.

Nothing can be done about it, I had to go to update. In general, the process is relatively painless if not for this situation.

Now, when trying to sign in to your account using Google, Facebook or Twitter, the following error occurs.

This operation is not supported in the environment this application is running on. “location.protocol” must be http, https or chrome-extension and web storage must be enabled.

What the login process looked like initially

The options page opens. The user chooses the provider with which to log in. From the options page, a message is sent to the background script.

// background.js

authProvider = new firebase.auth.GoogleAuthProvider()

app.auth()
	.signInWithPopup(authProvider)
  .then((userCredential) => {
    const user = firebase.auth().currentUser
      dispatch({ type: SIGN_IN, payload: { error: 'success', signInLater: false, user } })
  })
  .catch((error: any) => {
    console.error(error)
    dispatch({ type: SIGN_IN, payload: { error: error.code, signInLater: false, } })
  })

In manifest 2, background is a regular page that has access to window. In version 3, the background must be service worker, so we can’t just call signInWithCredential.

Working variant

In the manifest, you need to add the oauth2 client_id and permission to get the identity.

{
  "name": "ExtensionName",
  "version": "0.1",
  "manifest_version": 3,
  "key": "your_public_key",

  "background": {
    "service_worker": "dist/bgWrapper.js"
  },

  "permissions": [
    "identity",
    "identity.email"
  ],
  
  "host_permissions": [
    "<all_urls>"
  ],
  
  "oauth2": {
    "client_id": "your_client_id",
    "scopes": [
      "profile",
      "email",
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  }
}

// background.js

chrome.identity.getAuthToken({}, (token) => {
  let credential = firebase.auth.GoogleAuthProvider.credential(null, token)
  app
    .auth()
    .signInWithCredential(credential)
    .then((userCredential) => {
      const user = firebase.auth().currentUser
      dispatch({ type: SIGN_IN, payload: { error: 'success', user } })
    })
    .catch((error: any) => {
      console.error(error)
      dispatch({ type: SIGN_IN, payload: { error: error.code } })
    })
  })
}

Use the chrome.identity API to get the Google OAuth token as described in https://developer.chrome.com/apps/app_identityand then use that token to authorize Firebase with Auth.signInWithCredential ().

This token can be obtained if the user has synchronization enabled in Google Chrome.

Key

Setting up authentication in Chrome extensions is kind of a chicken and egg problem. You need the public key and Chrome app ID to set up the manifest.json file, but you must publish it to the Chrome store to get it. Therefore, we will publish any application to get them.

After publishing the extension, you need to go to the developer console, go to the “Package” tab and select “Show public key”.

Client id

To get the client_id you need:

• Go to Google Cloud Console

• Select the desired project

• Select APIs & Services> Dashboard> Credentials from the menu on the left

• Click Create Credentials> OAuth client ID

• Application type select chrome app

• Application id is id from chrome store

Enter your OAuth Client ID and your extension’s public key.

Cons of this solution

• Only login via google or email / password works

• Works only if synchronization is enabled in the settings of the browser itself

• It will not work to use ready-made components like react-firebaseui

pros

• You can login users automatically

• This is the official version, therefore, it will fall off after the next changes from Google with less likelihood

Hope this article helps someone not to waste a lot of time when updating.