Can I use chrome.identity with Firebase custom authentication?

Question

I'm building a Chrome extension and would like to use Firebase to persist state shared between users. Firebase authentication doesn't work within Chrome extension because there's no origin domain. The chrome.identity API can be used to ensure that the user is authenticated and to get the access token for OAuth requests.

A couple of considerations:

• Use chrome.storage to store a token and use that to authenticate with Firebase. The storage area is not encrypted, so it would be trivial to read a user's token from their disk.
• I assume the token returned by chrome.identity.getAuthToken is an OAuth access token and therefore transient - it wouldn't be suitable for a permanent unique identifier for a user.
• I could make a request to a Google OAuth API to exchange the access token for the user's profile (https://www.googleapis.com/userinfo/v2/me), which contains an id field, but this is public.

Answer 1

I came across this question on my quest to solve a similar problem. I am sure the question is outdated but maybe my solution helps someone else stumbling over this question.

It is indeed possible to use chrome.identity for Firebase authentication... But the way is not through the custom authentication method. There is another method which accepts the OAuth2 token from chrome.identity.getAuthToken.

Here is everything I did following this tutorial:
(It also mentions a solution for non-Google auth providers that I didn't try)

Identity Permission

First you need permission to use the chrome identity API. You get it by adding this to your manifest.json:

{
  ...
  "permissions": [
    "identity"
  ],
  ...
}

Consistent Application ID

You need your application ID consistent during development to use the OAuth process. To accomplish that, you need to copy the key in an installed version of your manifest.json.

To get a suitable key value, first install your extension from a .crx file (you may need to upload your extension or package it manually). Then, in your user data directory (on macOS it is ~/Library/Application\ Support/Google/Chrome), look in the file Default/Extensions/EXTENSION_ID/EXTENSION_VERSION/manifest.json. You will see the key value filled in there.

{
  ...
  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgFbIrnF3oWbqomZh8CHzkTE9MxD/4tVmCTJ3JYSzYhtVnX7tVAbXZRRPuYLavIFaS15tojlRNRhfOdvyTXew+RaSJjOIzdo30byBU3C4mJAtRtSjb+U9fAsJxStVpXvdQrYNNFCCx/85T6oJX3qDsYexFCs/9doGqzhCc5RvN+W4jbQlfz7n+TiT8TtPBKrQWGLYjbEdNpPnvnorJBMys/yob82cglpqbWI36sTSGwQxjgQbp3b4mnQ2R0gzOcY41cMOw8JqSl6aXdYfHBTLxCy+gz9RCQYNUhDewxE1DeoEgAh21956oKJ8Sn7FacyMyNcnWvNhlMzPtr/0RUK7nQIDAQAB",
  ...
}

Copy this line to your source manifest.json.

Register your Extension with Google Cloud APIs

You need to register your app in the Google APIs Console to get the client ID:

1. Search for the API you what to use and make sure it is activated in your project. In my case Cloud Firestore API.
2. Go to the API Access navigation menu item and click on the Create an OAuth 2.0 client ID... blue button.
3. Select Chrome Application and enter your application ID (same ID displayed in the extensions management page).
4. Put this client ID in your manifest.json. You only need the userinfo.email scope.

{
  ...
  "oauth2": {
    "client_id": "171239695530-3mbapmkhai2m0qjb2jgjp097c7jmmhc3.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email"
    ]
  }
  ...
}

Get and Use the Google Auth Token

chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
    // console.log("token: " + token);
    let credential = firebase.auth.GoogleAuthProvider.credential(null, token);
    firebase.auth().signInWithCredential(credential)
        .then((result) => {
            // console.log("Login successful!");
            DoWhatYouWantWithTheUserObject(result.user);
        })
        .catch((error) => {
            console.error(error);
        });
});

Have fun with your Firebase Service...