Firebase App Check with Vue 3 Invalid app resource name

user_3573593 0
Viewed 31

I am trying to get Firebase App Check working in a Vue 3 web app. I have Firebase configured and reCAPTCHA v3 configured.

Here is the code where I initialize Firebase and App Check. I am logging the recaptcha site key to console to make sure the env variables are getting injected correctly.

const fbConfig = {
    apiKey: import.meta.env.VITE_APP_FIREBASE_APIKEY,
    authDomain: import.meta.env.VITE_APP_FIREBASE_AUTHDOMAIN,
    projectId: import.meta.env.VITE_APP_FIREBASE_PROJECTID,
    appId: import.meta.env.VITE_APP_FIREBASE_APPID,
    storageBucket: import.meta.env.VITE_APP_STORAGEBUCKET,
    messagingSenderId: import.meta.env.VITE_APP_MESSAGINGSENDERID,
}

const fbapp = initializeApp(fbConfig)

if (location.hostname === "localhost") {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

console.log("APPCHECK Token: ", import.meta.env.VITE_APP_RECAPTCHA_SITEKEY)
const appCheck = initializeAppCheck(fbapp, {
    provider: new ReCaptchaV3Provider(import.meta.env.VITE_APP_RECAPTCHA_SITEKEY),

    // Optional argument. If true, the SDK automatically refreshes App Check
    // tokens as needed.
    isTokenAutoRefreshEnabled: true
});

This works as expected on local host where the debug token is used. When I deploy to a live site I get this error.

 { code: 400, message: "Invalid app resource name: \"projects/<name removed>/apps/\"<code removed>\"\".", status: "INVALID_ARGUMENT" }

Any thoughts?

firebase vue.js
1 Answers

Found the problem. The appId was getting quoted in the environment variables for some reason. Fixing that fixed the issue.

user_35735930
Related