firebase "Sign-in-with-Google" with manifest v3 plain javascript

Viewed 580

I'm trying to write a chrome extension that uses the firebase auth, specifically Google Sign-in.

My first attempt was to load all necessary firebase code in the popup.js, like

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js';
import { getAuth, onAuthStateChanged, connectAuthEmulator,signOut,signInWithEmailAndPassword, GoogleAuthProvider,signInWithPopup } from 'https://www.gstatic.com/firebasejs/9.0.1/firebase-auth.js';
import { getFirestore, setDoc, getDoc, collection, doc, connectFirestoreEmulator, query, where, getDocs } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js";
const firebaseApp = initializeApp({
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx",
  measurementId: "xxx"
  });

  const auth = getAuth(firebaseApp);
  const provider = new GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  provider.setCustomParameters({
    'login_hint': 'xxx@gmail.com'
  });


  onAuthStateChanged(auth, user => {
    if (user) {
      console.log('Logged in as ${user.email}' );
    } else {
      console.log('No user');
    }
  });


connectAuthEmulator(auth, "http://localhost:9099");
var db = getFirestore(firebaseApp);
connectFirestoreEmulator(db, 'localhost', 8080);


...
 signInWithPopup(auth, provider)
      .then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential.accessToken;
        const user = result.user;
      }).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        const email = error.email;
        const credential = GoogleAuthProvider.credentialFromError(error);
    });
...

But this does not work in manifest v3 because extension pages cannot make 'unsafe' script loads like this one.

So I thought, OK, let's do this in a background page via message passing, and define it like so in the manifest:

...
    "background": {
    "service_worker": "background.js",
    "type" : "module"
    },
...
    "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'",
    "sandbox": "sandbox allow-scripts; script-src 'self' 'https://apis.google.com/' 'https://www.gstatic.com/' 'https://*.firebaseio.com' 'https://www.googleapis.com' 'https://ajax.googleapis.com'; object-src 'self'"
    },
...

However, I then get errors about window not being defined when the background.js gets loaded:

Uncaught ReferenceError: window is not defined


https://www.gstatic.com/firebasejs/9.0.1/firebase-auth.js
Stack Trace
https://www.gstatic.com/firebasejs/9.0.1/firebase-auth.js:6913 (anonymous function)

That makes sense, as the background window does not have a window really, I use the background script only to login and logout. But I get that a window might be used for Google sign-in as a popup window is needed for the user to select which account to use.

So, I seem stuck. Is it impossible to do Google signin via firebase in manifest v3 ?

If so, can someone give a pointer ?

Many thanks!

1 Answers

Did you try to npm install firebase?

Then you can import those packages

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  GoogleAuthProvider,
  inMemoryPersistence,
  setPersistence,
  signInWithCredential,
} from 'firebase/auth';
Related