500 Error: "Invalid value used as weak map key" when using latest vuefire/nuxtfire releases (v 3.1.15)

[dosstx]

Reproduction

https://codesandbox.io/p/sandbox/github/posva/nuxt--vuefire-repro-template/tree/main

Steps to reproduce the bug

Using the latest vuefire and nuxt-vuefire releases (3.1.15 and 0.2.16) , I get the following error when viewing the app in the browser:

500

Invalid value used as weak map key

at ./node_modules/.pnpm/[email protected]_rd3jegnpemhlxr77rbrlplecpe/node_modules/nuxt-vuefire/dist/runtime/emulators/storage.plugin.mjs:23:22
at ./virtual:nuxt:/project/sandbox/.nuxt/plugins/server.mjs:52:89
at Module.executeAsync (./node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:111:19)
at setup (./virtual:nuxt:/project/sandbox/.nuxt/plugins/server.mjs:52:65)
at ./node_modules/.pnpm/[email protected]_@[email protected]/node_modules/nuxt/dist/app/nuxt.js:112:60
at fn (./node_modules/.pnpm/[email protected]_@[email protected]/node_modules/nuxt/dist/app/nuxt.js:156:44)
at Object.callAsync (./node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:68:55)
at ./node_modules/.pnpm/[email protected]_@[email protected]/node_modules/nuxt/dist/app/nuxt.js:158:56
at Object.runWithContext (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3855:18)

This is also reproduceable when using the nuxt template link.

Downgrading Vuefire and Nuxt-vuefire to the previous version fixes this issue.

Expected behavior

I expect to the see the default Nuxt welcome page. Instead, I see the 500 error above.

Actual behavior

I get the 500 server error mentined above.

Additional information

Although I can't reproduce it on codesandbox, on my localhost, if I downgrade the vuefire/nuxtfire versions to a previous version, the error is gone.

[Eronne]

Same on my side.

Don't know if this is directly related but as I cannot use the latest version, I downgraded to "nuxt-vuefire": "^0.2.6" & "vuefire": "^3.1.7" and now I have this error on the server cloud function generated by nuxt (firebase deployment).

Error creating custom token FirebaseAuthError: Permission 'iam.serviceAccounts.signBlob' denied on resource

[dosstx]

Interesting. I wonder if that is somehow related to same thing we are seeing here: #1408

[typefox09]

I'm getting the same error in the same circumstance, however, I noticed the error only occurs when there is no logged in user (incognito mode). When refreshing the page with an authenticated firebase user, everything works as normal?

It seems the problem is happening here:

const scopeMap = /* @__PURE__ */ new WeakMap();
function getGlobalScope(firebaseApp, app) {
  if (!scopeMap.has(firebaseApp)) {
    const scope = effectScope(true);
    scopeMap.set(firebaseApp, scope);
    const { unmount } = app;
    app.unmount = () => {
      unmount.call(app);
      scope.stop();
      scopeMap.delete(firebaseApp);
    };
  }
  return scopeMap.get(firebaseApp);
}

This function gets called multiple times, the first time it gets called, firebaseApp is an object, but the following times firebaseApp is undefined, hence "Invalid value used as weak map key"

[typefox09]

Found the issue. It occured in the handling of the anonnymous session where there was no logged in user. If there was no cached version the code would work, however there was no else block for when there is a cached version

plugin.server.mjs

export default defineNuxtPlugin((nuxtApp) => {
  const appConfig = useAppConfig();
  const decodedToken = nuxtApp[
    // we cannot use a symbol to index
    DECODED_ID_TOKEN_SYMBOL
  ];
  const uid = decodedToken?.uid;
  let firebaseApp;
  if (uid) {
    firebaseApp = appCache.get(uid);
    if (!firebaseApp) {
      const randomId = Math.random().toString(36).slice(2);
      const appName = `auth:${uid}:${randomId}`;
      logger.debug("\u{1F464} creating new app", appName);
      firebaseApp = initializeApp(appConfig.firebaseConfig, appName);
      appCache.set(uid, firebaseApp);
    } else {
      logger.debug("\u{1F464} reusing authenticated app", firebaseApp.name);
    }
  } else {
    if (!appCache.has("")) {
      appCache.set("", firebaseApp = initializeApp(appConfig.firebaseConfig));
    } else {
      firebaseApp = appCache.get(""); // retrieve the cached app (this is the fix)
    }
    logger.debug("\u{1F978} anonymous session");
  }
  return {
    provide: {
      firebaseApp
    }
  };
});

[posva]

Thanks for all the information! I released a patch, let me know if things are still broken

[posva]

@Eronne Googling those errors should help. Here are some extra resources:

• https://github.com/posva/nuxt--vuefire-example-blaze-plan
• https://firebase.google.com/docs/auth/admin/create-custom-tokens#iam_api_not_enabled

[Eronne]

Thanks @posva for the reactivity and the details! 🙏🏼

I was applying the Service Account Token Creator role to the wrong service account... I thought it had to be applied on the service account provided with the service-account.json file.

[posva]

It happened to me too 😅

[dosstx]

It works for me now, thanks!