New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Impossible to use Firebase React with Manifest v3 #634
Comments
Specifically, https://firebaseopensource.com/projects/firebase/quickstart-js/auth/chromextension/readme/ does no longer work in MV3, in this case not because serviceworker restrictions per se, but because the extension has no rights to open a popup window. Would it be better to open a new issue for that ? |
Does anyone know this problem will be solved? |
Thought I suspect most know this and doesn't solve for the popup problem, perhaps this is useful for others searching.
|
Thanks for the help! |
Hey , did by any chance find a solution to add firebase in V3 |
Not yet |
As I pointed out in the OP, it is not possible to use Firebase at all in a Manifest v3 extension because the CSP policies that Firebase requires are prohibited by the CSP policies that control Chrome extensions in v3. It cannot be done without updating the library's logic itself. |
I use it. What features are you trying to use? I use auth, firestore, and functions. Here's an implementation of the general idea that I proposed above: // in the service worker
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider, signInWithCredential, User } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getFunctions } from 'firebase/functions';
const firebaseConfig = {
// your config
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const functions = getFunctions(app);
const getGoogleAuthCredential = () => {
return new Promise<ReturnType<typeof GoogleAuthProvider.credential>>((resolve, reject) => {
chrome.identity.getAuthToken({ interactive: true }, token => {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError);
reject(chrome.runtime.lastError);
}
const credential = GoogleAuthProvider.credential(null, token);
resolve(credential);
});
});
};
const signIn = async () => {
try {
const credential = await getGoogleAuthCredential();
const result = await signInWithCredential(auth, credential);
return result.user;
} catch (e) {
console.error(e);
return null;
}
}; This requires the {
"manifest_version": 3,
"permissions": [ "identity" ]
} @master30112001
Do all communications from the service worker and then pass messages with your data between that and content, popup, devtools, etc. |
Can you please make a repository having firebase connections with google authentication?(in mv3) Your repo would be very helpful to use as a starter template for our projects |
This is not possible because there is no way to allow external hosts in the CSP with V3. What may work is using |
This is documented. It may not have been when this issue was opened, but it is now acknowledged that certain auth features are not available: from https://firebase.google.com/docs/web/environments-js-sdk#auth-note:
There are limitations on using Auth. But it is not "Impossible to use Firebase with Manifest v3." |
@ibejoeb - I was specifically referring to Firebase React in a popup window. I edited to clarify. |
One temporary fix is that we can make an API on firebase functions. Is there any other workaround for it? |
Is this solved? |
How can I use signInWithPhoneNumber in chrome extension react? |
using |
any updates anywhere on using firebase with MV3 ? |
Any updates or workaround on the issue except using chrome.identity? |
I used code above from @ibejoeb with this boilerplate
Make sure that you have uploaded your extension to store and a key property:
Alos create a OAuth 2.0 Cliend ID for chrome extension: After that allow firebase google auth interact with other client: Worked for me: |
For future readers, here is the main reference - https://developer.chrome.com/docs/apps/app_identity/ |
Summary
It is not possible to use Firebase React in Chrome extension content scripts using manifest v3 because the CSP settings that Firebase requires to work are prohibited by Chrome's new CSP policies. Since it is no longer possible to publish new MV2 extensions, new extensions are unable to use Firebase in their documents (e.g. popup window).
Original post
I have had the unique pleasure of trying to package a Firebase-enabled application as a Chrome extension, only to find that with manifest v3 the only way to do this is in a service worker, which comes with great limitations on how users can authorize with Firebase Auth and so on.
It is important that Google's own Chrome Extensions ecosystem is compatible with Google's own Firebase software, but I am not shocked to see the attempt to force developers to break their own apps before January 2022 when this team intends to deprecate manifest v2 even though this will preclude future extensions from integrating Google's own technology.
Peep the comments of this video for some examples of how distraught developers are about this issue, and plenty similar posts exist on StackOverflow as well:
https://www.youtube.com/watch?v=UjH2INUPmF4
What do?
The text was updated successfully, but these errors were encountered: