How to use the Nuxt Session Cookie feature?

[BenJackGill]

I am using VueFire with Nuxt. I have some pages that anyone can access (login, sign, password reset, etc) and also some pages only users with an account should access (dashboard, settings, etc).

So as per the VueFire Nuxt docs it says I need to turn on the Session Cookie feature to persist the auth between page refreshes.

This needs to be done by:

1. Activating the Service Account Credentials API in GCP (complete)
2. Adding sessionCookie: true to nuxt.config.ts (complete)
3. Adding a "specific role" to your Firebase service account. The VueFire docs are unclear here. Exactly which role should I add? I clicked the provided link and the Firebase docs talk about using the "Service Account Token Creator" role which I hope was correct.

But even after doing all of this I still get this console error:

FirebaseError: Firebase: Error (auth/requests-to-this-api-securetoken.googleapis.com-method-google.identity.securetoken.v1.securetoken.granttoken-are-blocked.).

Any ideas what I'm doing wrong?

UPDATE:

I got rid of that console error. I had a restricted Firebase Browser API Key. So I had to add securetoken.googleapis.com (Secure Token API) to that list of allowed APIs, then the console error went away.

But now I have another problem...

App Check with Session Cookie throws an error. It works fine when I remove sessionCookie: true so this error is definitely related to Session Cookie.

I think the problem stems from the fact the server is trying to do an App Check but the debug token I am using is in the browser not the server. Here is the error I am seeing on screen (not in the console) when sessionCookie: true is enabled:

500
Firebase: Error (auth/firebase-app-check-token-is-invalid.).

at _fail (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/core/util/assert.ts:65:9)
at _performFetchWithErrorHandling (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/api/index.ts:210:9)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at _performSignInRequest (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/api/index.ts:231:27)
at Module.signInWithCustomToken (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/core/strategies/custom_token.ts:56:37)
at async ./node_modules/nuxt-vuefire/dist/runtime/auth/plugin-authenticate-user.server.mjs:36:135
at async setup (./virtual:nuxt:/Users/BenJackGill/Dev/seoturbo/apps/web/.nuxt/plugins/server.mjs:58:116)
at async Object.callAsync (/Users/BenJackGill/Dev/seoturbo/node_modules/unctx/dist/index.mjs:72:16)
at async applyPlugin (/Users/BenJackGill/Dev/seoturbo/node_modules/nuxt/dist/app/nuxt.js:116:25)

Also if the Firebase Browser Key has a website restriction (http://localhost:3000 and http://localhost:3000) I get this error on the screen (not in the console). Again, I think it's because the request is coming from the server and not the browser:

500
Firebase: Error (auth/requests-from-referer-<empty>-are-blocked.).

at _fail (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/core/util/assert.ts:65:9)
at _performFetchWithErrorHandling (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/api/index.ts:210:9)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at _performSignInRequest (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/api/index.ts:231:27)
at Module.signInWithCustomToken (/Users/BenJackGill/Dev/seoturbo/node_modules/@firebase/auth/src/core/strategies/custom_token.ts:56:37)
at async ./node_modules/nuxt-vuefire/dist/runtime/auth/plugin-authenticate-user.server.mjs:36:135
at async setup (./virtual:nuxt:/Users/BenJackGill/Dev/seoturbo/apps/web/.nuxt/plugins/server.mjs:58:116)
at async Object.callAsync (/Users/BenJackGill/Dev/seoturbo/node_modules/unctx/dist/index.mjs:72:16)
at async applyPlugin (/Users/BenJackGill/Dev/seoturbo/node_modules/nuxt/dist/app/nuxt.js:116:25)

This is my runtimeConfig andvuefire config objects in nuxt.config.ts:

  runtimeConfig: {
    public: {
      // Nuxt auto replaces values with matching .env values prefixed with NUXT_PUBLIC
      brandName: "",
      fbApiKey: "",
      fbAuthDomain: "",
      projectId: "",
      fbDefaultStorageBucket: "",
      fbMessagingSenderId: "",
      fbAppId: "",
      fbMeasurementId: "",
      gcpRecaptchaEnterpriseSiteKey: "",
    },
  },
  vuefire: {
    config: {
      apiKey: process.env.NUXT_PUBLIC_FB_API_KEY,
      authDomain: process.env.NUXT_PUBLIC_FB_AUTH_DOMAIN,
      projectId: process.env.NUXT_PUBLIC_PROJECT_ID,
      storageBucket: process.env.NUXT_PUBLIC_FB_DEFAULT_STORAGE_BUCKET,
      messagingSenderId: process.env.NUXT_PUBLIC_FB_MESSAGING_SENDER_ID,
      appId: process.env.NUXT_PUBLIC_FB_APP_ID,
      measurementId: process.env.NUXT_PUBLIC_FB_MEASUREMENT_ID,
    },
    auth: {
      enabled: true,
      sessionCookie: true,
    },
    appCheck: {
      // Allows you to use a debug token in development
      debug: process.env.NODE_ENV !== "production",
      isTokenAutoRefreshEnabled: true,
      provider: "ReCaptchaEnterprise",
      key: process.env.NUXT_PUBLIC_GCP_RECAPTCHA_ENTERPRISE_SITE_KEY || "none",
    },
  },

[davidstackio]

I ended up needing to add the Service Usage Consumer role to the firebase-adminsdk service acount.

[davidstackio]

And to actually use the session cookie in my code I did the following...

This was inspired by these discussions:

• How do I access vuefire in a Nuxt 3 Server Route? #1343
• Is there a way to get the authenticated user in server routes ? #1395)

And this PR: #1423

server/utils/firebase.ts

// Types
import type { H3Event } from "h3";
import type { Auth } from "firebase-admin/auth";

import { logger } from "firebase-functions";

export const authenticateRequest = async (auth: Auth, event: H3Event) => {
  const sessionCookie = getCookie(event, "__session");
  if (sessionCookie) {
    try {
      const decodedUser = await auth.verifySessionCookie(sessionCookie);

      return decodedUser;
    } catch (error) {
      logger.log("Failed to authenticate request.", error);
    }
  }

  logger.log("Invalid user.");
  return null;
};

api/handler.ts

import { logger } from "firebase-functions";
import { initializeApp } from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";

// Setup Firebase
initializeApp();
const auth = getAuth();

export default defineEventHandler(async (event) => {
  // Confirm the request came from an authenticated user
  const user = await authenticateRequest(auth, event);
  if (!user) {
    return;
  }
  
  logger.log("uid:", user.uid);
  // More logic here
});