MV3 Firebase Google Signin Authentication with Offscreen API Popup Issue

167 views
Skip to first unread message

Uğur

unread,
Jun 8, 2024, 6:06:26 AMJun 8
to Chromium Extensions
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

unread,
Jun 10, 2024, 4:31:42 PMJun 10
to Chromium Extensions, Uğur
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

unread,
Jun 14, 2024, 2:47:02 PMJun 14
to Chromium Extensions, Rajat Paharia, Uğur
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;
}

Reply all
Reply to author
Forward
0 new messages