App Check on the server encounters an error while signing a custom token. nuxt-vuefire

[anthony32773]

Hi everyone,

I am encountering this issue with my Nuxt 3 vue fire app which has been deployed to a Firebase cloud function. Has anyone else encountered this? I am on the blaze plan and have configured my ReCaptchaV3 keys correctly and added my domain. Locally everything works fine.

2023-08-09T18:51:39.689530Z ? server:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2023-08-09T18:51:39.689537Z ? server:     at async CustomProvider.getToken (file:///workspace/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1356:29)
2023-08-09T18:51:39.689543Z ? server:     at async getToken$2 (file:///workspace/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:769:17)
2023-08-09T18:51:39.689548Z ? server:     at async Promise.all (index 1) {
2023-08-09T18:51:39.689554Z ? server:   errorInfo: {
2023-08-09T18:51:39.689559Z ? server:     code: 'app-check/permission-denied',
2023-08-09T18:51:39.689565Z ? server:     message: "Error returned from server while signing a custom token: Permission 'iam.serviceAccounts.signBlob' denied on resource (or it may not exist)."
2023-08-09T18:51:39.689570Z ? server:   },
2023-08-09T18:51:39.689575Z ? server:   codePrefix: 'app-check'
2023-08-09T18:51:39.689579Z ? server: }
2023-08-09T18:51:39.748381Z ? server: [vuefire]  ERROR  Error getting AppCheck token from the server: Error returned from server while signing a custom token: Permission 'iam.serviceAccounts.signBlob' denied on resource (or it may not exist).
2023-08-09T18:51:39.748402Z ? server:   at appCheckErrorFromCryptoSignerError (node_modules/firebase-admin/lib/app-check/token-generator.js:138:20)
2023-08-09T18:51:39.748409Z ? server:   at node_modules/firebase-admin/lib/app-check/token-generator.js:85:19
2023-08-09T18:51:39.748416Z ? server:   at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2023-08-09T18:51:39.748424Z ? server:   at async CustomProvider.getToken (node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1356:29)

I have triple checked my nuxt config and have followed the nuxt guide for vue fire but cannot seem to resolve this issue. Does anyone have any insight into what I may be doing wrong here? This is my config for nuxt-vuefire:

  vuefire: {
    auth: true,
    appCheck: {
      debug: process.env.NODE_ENV !== "production",
      isTokenAutoRefreshEnabled: true,
      provider: "ReCaptchaV3",
      key: process.env.APP_CHECK_SITE_KEY as string,
    },
    config: {
      apiKey: process.env.API_KEY,
      authDomain: process.env.AUTH_DOMAIN,
      projectId: process.env.PROJECT_ID,
      storageBucket: process.env.STORAGE_BUCKET,
      messagingSenderId: process.env.MESSAGING_SENDER_ID,
      appId: process.env.APP_ID,
      measurementId: process.env.MEASUREMENT_ID,
    },
    emulators: false,
  },

This is what I am using to retrieve the data inside my script setup:

const content = useCollection(query(collection(useFirestore(), "content"), where("PageKey", "==", "Home Page")), {ssrKey: "homepage"});

Any help would be greatly appreciated.

[posva]

The ERROR Error getting AppCheck token from the server: Error returned from server while signing a custom token: Permission 'iam.serviceAccounts.signBlob' suggests that you are missing a permission to set in Google Cloud: https://firebase.google.com/docs/auth/admin/create-custom-tokens#service_account_does_not_have_required_permissions