MV3 Firebase Google Signin Authentication with Offscreen API Popup Issue

[Uğur]

Hi there! 

I followed this guide and setup a google authentication in my content script. 

https://firebase.google.com/docs/auth/web/chrome-extension

google sign in popup is created via my offscreen document where I render my webpage in an iframe which trigger the popup. 

Issue is that the created window is not active by default which doesn't make sense since user don't see the popup initially as we see them in web apps (popups became active by default),

what do you recommend? 

I solved this issue by using chrome.tabs.onUpdate and chrome.windows to activate the signin popup but I don't think that's a good solution.


Also another issue with this approach is that we only get credentials as an object not a firebase controlled auth state. Is there any other way to implement a google signin inside a content script? 

Thanks,

Ugur
 

[Rajat Paharia]

Hi Ugur - I recently went through the same process. 

1. For the Google sign in popup window potentially showing behind other windows, I put up a notification in my main app telling the user that a popup has been opened and that it may be behind other windows. Not ideal, but at least they know that they should go looking for it. Would you mind sharing the code for what you implemented? 

2. You can turn the credentials into a firebase controlled auth state. I figured this out through many hours of trial and error as it doesn't seem to be documented anywhere. It's also probably brittle since I'm using a random property on the object that I found works. But ¯\_(ツ)_/¯

This is the googleAuth function as outlined in the guide: 

async function googleAuth() {

await setupOffscreenDocument(OFFSCREEN_DOCUMENT_PATH);

const auth = await offscreenGetAuth()

.then((auth) => {

console.log('User Authenticated', auth);

return auth;

})

.catch(err => {

if (err.code === 'auth/operation-not-allowed') {

console.error('You must enable an OAuth provider in the Firebase' +

' console in order to use signInWithPopup. This sample' +

' uses Google by default.');

} else {

console.error(err);

return err;

}

})

.finally(closeOffscreenDocument)

return auth;

} 

And then this is how I call it and turn the results into a firebase user. 

googleAuth().then((result) => {

var oauthIdToken = result._tokenResponse.oauthIdToken;

var credential = GoogleAuthProvider.credential(oauthIdToken);

signInWithCredential(auth, credential)

.then((userCredential) => {

// Signed in

sendResponse({"status": true, "user": userCredential.user});

})

.catch((error) => {

var errorMessage = error.message

if (firebaseErrorMessages[error.code]) {

errorMessage = firebaseErrorMessages[error.code];

}

sendResponse({"status": false, "error": errorMessage});

});

}).catch((error) => {

sendResponse({"status": false, "error": "Google sign in error"});

});

You will need to import GoogleAuthProvider also. 

import {getAuth,

onAuthStateChanged,

signInWithEmailAndPassword,

createUserWithEmailAndPassword,

signOut,

sendEmailVerification,

reload,

signInWithCredential,

GoogleAuthProvider,

connectAuthEmulator,

} from "firebase/auth/web-extension";

These are globals

const app = initializeApp(FIREBASE_CONFIG);

const auth = getAuth(app);

Hope that helps! - rajat

[Rajat Paharia]

For future reference, I added this code to chrome.tabs.onUpdated.addListener to bring the Google Auth popup to the front, so it's not hidden behind other windows anymore. 

if (tab.url.startsWith("https://accounts.google.com/o/oauth2/auth/")) {

console.log ("GOOGLE AUTH PAGE");

// bring this window to the front so the user can see it.

chrome.windows.update(tab.windowId, {focused: true});

return;

}