handler.js:191
GET https://www.googleapis.com/identitytoolkit/v3/relyingparty/getProjectConfig?key=AIzaSyCPaT56SFlb21PapZ-Pz1qnQ6OTT6zdKfg&cb=1752167879580 403 (Forbidden)
handler.js:220 Unable to verify that the app domain is authorized
What language are you using?
Do you have your Firebase variables in your .env file?
Is the app domain listed in your Google Cloud Platform Credentials?
How are you logging in (i.e. on prototyper, in code view, in a browser window w/port 9002, on a production domain)?
I revert my code for authentication and now while adding url into lists (Firebase Settings, Identity Platform, Recaptcha, browser keys, api keys…) I succeeded to make a login :
// IMPORTANT: This configuration MUST match the values from your Firebase project.
// An internal auth error on a deployed site is almost always caused by one of
// the following issues in your console settings:
//
// 1. INCORRECT CONFIG VALUES: The values below do not match your project's web app config.
// -> Go to Firebase Console > Project Settings > General > Your apps > Web app.
// -> Copy the firebaseConfig object and ensure all values here are identical.
//
// 2. DOMAIN NOT AUTHORIZED: Your app's URL is not on the allowlist. This is the most
// likely cause of a '403 Forbidden' or 'Unable to verify that the app domain is authorized' error.
// -> Go to Firebase Console > Authentication > Settings > Authorized domains.
// -> Click "Add domain" and enter 'studio--studio-6v2lo.us-central1.hosted.app'.
//
// 3. OAUTH CONSENT SCREEN: The consent screen is not configured for Google Sign-in.
// -> Go to Google Cloud Console > APIs & Services > OAuth consent screen.
// -> Make sure it is configured and published.
//
// 4. API KEY RESTRICTIONS: Your API key is preventing access from the hosted URL.
// -> Go to Google Cloud Console > APIs & Services > Credentials.
// -> Check the API Key used by your web app for any HTTP referrer restrictions.
//
// 5. RECAPTCHA KEY / APP CHECK: The reCAPTCHA key is invalid or the domain is not authorized for it.
// -> Go to Google Cloud Console > Security > reCAPTCHA Enterprise.
// -> Verify that your key is for Web (v3) and that 'studio--studio-6v2lo.us-central1.hosted.app' is in the list of authorized domains for that key.
// -> Go to Firebase Console > App Check > Apps > Your Web App, and ensure it's registered with the correct reCAPTCHA key.
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check';
import type { FirebaseOptions } from 'firebase/app';
import { getAnalytics } from "firebase/analytics";
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "***",
authDomain: "***",
projectId: "***",
storageBucket: "****",
messagingSenderId: "***",
appId: "***",
measurementId: "***"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize App Check with reCAPTCHA v3 - TEMPORARILY DISABLED FOR DEBUGGING
if (typeof window !== 'undefined') {
// IMPORTANT: The reCAPTCHA key is set as a build-time environment variable.
// Ensure NEXT_PUBLIC_RECAPTCHA_SITE_KEY is set correctly in your build environment.
const reCaptchaSiteKey = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || '****';
if (reCaptchaSiteKey) {
try {
initializeAppCheck(app, {
provider: new ReCaptchaV3Provider(reCaptchaSiteKey),
isTokenAutoRefreshEnabled: true,
});
} catch (error) {
console.error("Firebase App Check initialization failed. This can happen if your reCAPTCHA key is invalid or the current domain is not authorized in the Google Cloud Console for this key. Auth and other services will still work, but your app is not fully protected from abuse.", error);
}
} else {
console.warn("Firebase App Check is not initialized because NEXT_PUBLIC_RECAPTCHA_SITE_KEY environment variable is not set.");
}
}
const auth = getAuth(app);
const storage = getStorage(app);
//const analytics = getAnalytics(app);
export { storage, auth/*, analytics*/ };
and then (rule of trust) now: I try to do HttpFunction call (my last problem now is to put data in a multipart/data form which contains a txt file, a json file and some binaries (pictures)
I don’t know if I should create a new topic, but now I have a problem with Cors : access to Firebase bucket.
Here is the error in my browser:
frame_ant.js:2
POST https://firebasestorage.googleapis.com/v0/b/studio-6v2lo.appspot.com/o?name…AJGHVITRDtKAbcuObsTWY2%2Fimages%2F1752340379331-alexxander%20de%20croo.jpg net::ERR_FAILED
studio--studio-6v2lo…tral1.hosted.app/:1 Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/studio-6v2lo.appspot.com/o?name…AJGHVITRDtKAbcuObsTWY2%2Fimages%2F1752340379331-alexxander%20de%20croo.jpg' from origin 'https://studio--studio-6v2lo.us-central1.hosted.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
service storage {
// Only a user can upload their profile picture, but anyone can view it
match /users/{userId}/images /{imageName} {
allow read;
allow write: if request.auth != null && request.auth.uid == userId;
}
match /users {
allow read,write: if request.auth != null
}
}
If you have a FIrebase Studio project and want to use Storage, first enable storage in your Firebase console. The environment variable in your app should already be present.
Second, make sure your firebase-adminsdk service account has the Cloud Storage Admin role.