Add support for App Check

[simeon9696]

Is there a way we can add app check to existing projects with 7.5.0?

[simeon9696]

I think I have a temporary solution although my site still tells me I have an invalid token for storage. Create plugins/firebase.js and inside, initialize appCheck

Make sure you're on the latest SDK

import firebase from 'firebase/app'
import 'firebase/app-check'

if(!firebase.apps.length){
    const config = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: "",
        measurementId: ""
      }

    firebase.initializeApp(config);

}

if(process.browser){
    //get key from recaptcha https://firebase.google.com/docs/app-check/web

   const key = '';
    const appCheck = firebase.appCheck();
    // Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
    // key is the counterpart to the secret key you set in the Firebase console.
    appCheck.activate(key);
}

Then initialize the plugin in nuxt.config.js

export default{
  plugins: [
     {src: '~/plugins/firebase',ssr: false }, 
  ],
}

[lupas]

Bit busy lately, feel free to create a PR guys if you figure it out :)

[artrayd]

@simeon9696 try

appCheck.activate(key, true)

That should automatically refreshes App Check tokens as needed.

[relisora]

This solution works for SPA mode. However for SSG, we need to pass a debug token to nuxt generate in the CI.

How can activate the debug token like show in the firebase docs and therefore make debug mode and CI mode work?

[signor-mike]

I think I have a temporary solution although my site still tells me I have an invalid token for storage. Create plugins/firebase.js and inside, initialize appCheck

It doesn't work. I can't initialize the app twice. So I thought of using getApp() and it does get the app. But AppCheck doesn't work. I don't know why. Worked perfectly in plain Vue project, but now with Nuxt I am struggling. It looks like everything works just fine, but once I enforce AppCheck it all goes south: says Missing or insufficient permissions.

I am using

"@nuxtjs/firebase": "^8.0.0",
 "firebase": "^9.5.0",
 "nuxt": "^2.15.7",

[twilliams0001]

Any suggestions on how to implement app check if my nuxt.config.js contains an object for the firebase credentials such as below? When I remove the firebase object below and reference firebase.js in plugins (as above example), I get the following compile error: "TypeError: Cannot read property 'app' of undefined"

firebase: {
    config: {
      apiKey: '123435',
      authDomain: '12345.firebaseapp.com',
      projectId: 12345',
      storageBucket: '12345.appspot.com',
      messagingSenderId: '12345',
      appId: 'd2r2d2r1r1r12f12',
      measurementId: 'ABCDEF'
    },
    services: {
      auth: true,
      firestore: true,
      functions: true
    }
  }

I'm rather new to Nuxt and would appreciate any assistance.

[simeon9696]

@twilliams0001 the plugin above is to be used in conjunction with the object in your nuxt.config.js. Because the plugin is completely independent of this package. So keep the two and you should be fine.

[simeon9696]

I think I have a temporary solution although my site still tells me I have an invalid token for storage. Create plugins/firebase.js and inside, initialize appCheck

It doesn't work. I can't initialize the app twice. So I thought of using getApp() and it does get the app. But AppCheck doesn't work. I don't know why. Worked perfectly in plain Vue project, but now with Nuxt I am struggling. It looks like everything works just fine, but once I enforce AppCheck it all goes south: says Missing or insufficient permissions.

I am using

"@nuxtjs/firebase": "^8.0.0",
 "firebase": "^9.5.0",
 "nuxt": "^2.15.7",

@Mike-OxHuge you're right, you can't initialize the app twice. So that's why you have the if(!firebase.apps.length)check. But if you're using v9 of the SDK and you're using that check, you'd need to import the compat packages.

[lupas]

Implemented with 8.2.0.

[sboyd]

Thanks for adding app check Mr. @eljass, Can you please tell me the ideal location in code to put the this.$fire.appCheck.activate()? Is it designed to be in a plugin similar to above? Thank you! --Steve