I am working on a web app, which runs compute-intensive code using Emscripten's multithreaded WASM and therefore needs SharedArrayBuffers. Those only work if my app is in Cross-Origin-Isolated mode. And to enable that, I have to set the following headers on my app:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Now, I would like to use Firebase in my project - first step is to integrate Firebase's Auth. Right now, I'm using firebaseui for handling the login flow. Unfortunately, that doesn't work and when I'm starting the login flow in my browser, I can see the following message in DevTools:
Apart from the error in the network tab, I don't get any indication that an error happened (i.e. no uncaught exceptions). Without the COOP/COEP headers, everything works fine.
Is there a way that I can use Firebase's Auth in Cross-Origin-Isolated mode?
Related
I'm trying to set up an app using the Fitbit SDK, which I want to use to pull data down from my firestore database to the companion app in the fitbit application. However I am encountering an issue. The code is returning the following errors:
[15:29:50] Companion: Uncaught (in promise) TypeError: Cannot read property 'getEntriesByType' of undefined
new dn at node_modules/#firebase/webchannel-wrapper/dist/index.js:66,585
new Gn at node_modules/#firebase/webchannel-wrapper/dist/index.js:82,64
new gr at node_modules/#firebase/webchannel-wrapper/dist/index.js:95,30
pr.g at node_modules/#firebase/webchannel-wrapper/dist/index.js:94,385
Ao.ho at node_modules/#firebase/firestore/dist/index.esm2017.js:12548,19
Oo.Ko at node_modules/#firebase/firestore/dist/index.esm2017.js:13025,9
Oo.Uo at node_modules/#firebase/firestore/dist/index.esm2017.js:12978,23
? at node_modules/#firebase/firestore/dist/index.esm2017.js:12968,13
[15:30:00] Companion: [2022-08-04T14:30:00.245Z]
#elixr firebase
/firestore: Firestore (9.9.1): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend. (node_modules/#firebase/logger/dist/esm/index.esm2017.js:78,9).
Which I can't seem to find a fix for online. The added complexity is with the environment for developing the code for this app is somewhere between node.js and web 9, so when looking at the docs on the website I have to use a mixture of the two guides to try figure out how to get it to work. The additional awkard part about this is that firestore doesn't enable app check for something that's neither iOS, Android or Web, while this could technically pass as a web app, I would need to somehow register a website just to get the recaptcha key from to then enable app check. But would have no way to verify the user each time using app check.
Is this even possible to do, as there's no docs on either end of fitbit or firebase to help in this sort of situation. I had though of potentially using direct websockets but don't know the restrictions on that kind of data transfer.
Does anyone know a work around/ how to remedy this?
I am using Cypress for end-to-end testing an application, together with the cypress-firebase package. I followed the official setup instructions (using TypeScript, and the Firebase Web SDK version 9 with the compat mode).
In my tests, calling cy.login() seems to work as expected in that Cypress logs that the createCustomToken task successfully performs two HTTP POSTs with status code 200 each.
However, when visiting a page of the application afterwards, no user is logged in. In the application, the login status is supposed to be detected using Firebase's onAuthStateChanged function. It seems that cy.login() never triggers onAuthStateChanged, though.
My best guess is that maybe the auth instances used by cypress-firebase and the application code are not the same?! Is there a way to confirm this, or could there be another reason?
Happy to provide further information if it may help.
The issue was indeed related to auth instances not matching: The application was using a named instance, whereas the initializeApp code in Cypress was not naming the app (and thus relying in an app instance named [DEFAULT]).
Fortunately, cypress-firebase has support for named apps:
const namedApp = firebase.initializeApp(fbConfig, "app_name");
attachCustomCommands({ Cypress, cy, firebase, app: namedApp });
I try to get App Check working in my vue.js pwa. Using the latest firebase sdk and by following steps here https://firebase.google.com/docs/app-check/web/recaptcha-provider
My api key (https://console.cloud.google.com/apis/credentials/key..) is not limited to any API restrictions. I did add some Application Restrictions on https tho including my project domains.
Everything works fine till i activate appCheck with recaptcha v3 and i get following console errors:
FirebaseError: [code=unknown]: Fetching auth token failed: AppCheck: Fetch server returned an HTTP error status. HTTP status: 403. (appCheck/fetch-status-error)
Further more the app can't get any firebase data or auth. I tried in several browsers and without any vpn stuff.
In my already installed pwa the App Check error occurs but connection to firebase still works..
Without App Check activated it both works without an issue. Also with an App Check debug token the whole thing just works. I don't understand why it breaks firebase connection even if i haven't enabled enforcement.
I appreciate any tips on how to solve this.
I found the problem i accidently left self.FIREBASE_APPCHECK_DEBUG_TOKEN = true; in my production code.
Remove this line or only use when in development envirement solved the whole problem
if (location.hostname === "localhost") {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
I didn't expect this line to impact browsers where i haven't registered a debug token to fail with the regular appCheck but of course it doesn't make sense to use it in production anyways.
Based on your question, you want to enable Firebase App Check for Firestore with Web Application. Currently, Firestore App Check does not support it.
As per this Documentation:
Cloud Firestore support is currently available only for Android and iOS clients. If your project has a web app, don't enable Cloud Firestore enforcement until web client support is available.
I'll leave an answer for people who have problems with the setup. For the more detailed answer, you can check this question.
In short, you need to do a few steps.
Set up a firebase.
Go to how to set up app check.
Register reCAPTCHA here and add the secret_key to the Firebase console, and the site_key to your web code.
Initialize the Firebase in your code based on how to set up app check docs.
Get your debug_key and add it to your firebase console and code.
Finally, the code should look something like this:
Don't forget to save your key to a .env file or firebase.js or somewhere where you won't upload it to git.
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
window.FIREBASE_APPCHECK_DEBUG_TOKEN = 'your_debug_token';
}
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('your_site_key_from_register'),
// Optional argument. If true, the SDK automatically refreshes App Check
// tokens as needed.
isTokenAutoRefreshEnabled: true
});
I have a React.js application powered by a number of Firebase functions and real time database standing behind them. It has been working without any issue for the past 2-3 months and now I am getting a warning on the functions logs which says that:
#firebase/database: FIREBASE WARNING: {"code":"app/invalid-credential","message":"Credential implementation provided to initializeApp() via the \"credential\" property failed to fetch a valid Google OAuth2 access token with the following error: \"Failed to parse access token response: Error: Server responded with status 404.\"."}
The way I initialize firebase from my React.js application looks like this:
I have double-checked everything standing behind process.env and it seems to be as expected. The website written in React.js in hosted under the Firebase hosting.
And this is how Firebase functions connect to Admin SDK:
I am not sure what would be the issue here. Nothing has changes in the code base from our side. Not sure if Firebase changed something internally that we need to consider.
What solved the issue for me was to go to the google cloud console (where Firebase functions are also available). Then I opened one of the failing cloud functions and I navigated to
My_Function_Name/Edit/RUNTIME, BUILD AND CONNECTIONS SETTINGS/RUNTIME SERVICE ACCOUNT/
And then I noticed there that for all of my functions it was selected App Engine Default Service Account instead of Firebase Admin SDK. I never explicitly set the runtime to this option. So, when I brought it back to Firebase Admin SDK the error was gone I was able to use the application once again.
I am trying to call the Google Translate API and using the following to authenticate from my local - gcloud auth application-default login.
The command works successfully and I am authenticated but when I try to call the API i get the following error message which indicates that it is being read as an anonymous API call
google.cloud.exceptions.Forbidden: 403 Daily Limit Exceeded
I ran into this issue too this week,
I thought i was well authenticated but when i was running my code which is C# using the google translate API v2 package, it gave me the same 403 code daily limit exceeded,
I fiddled around with the CLI, made several accounts, service accounts API keys and all and it never worked.
https://cloud.google.com/dotnet/docs/getting-started/hello-world
this page, (the .NET guide part) says you should be using the google cloud platform plugin they release for visual studio, and login via that, i used it and it worked.
If you look on the bottom left part there are guides for any other language that you might be using. (consider adding that as info it helps me help you).
I would love it if it only worked via CLI but as long as it works i guess it's fine...