Firebase ID token has invalid signature.

[websiddu]

Reproduction

When using with Nuxt 3 and vuefire, the authentication is not working. Just followed the instructions in the documentation.

Steps to reproduce the bug

Follow the instruction in the docs

Here are files,

// package.json 

{
  "name": "nuxt-app",
  "private": true,
  "scripts": { ... },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18",
    "@firebase/app-types": "^0.9.0",
    "nuxt": "^3.5.2"
  },
  "dependencies": {
    "firebase": "^9.22.1",
    "firebase-admin": "^11.9.0",
    "nuxt-vuefire": "^0.1.6",
    "vuefire": "^3.1.0"
  }
}

// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["nuxt-vuefire"],
  vuefire: {
    auth: true,
    config: {
      apiKey: "AIzaSasdfyAr4Af59BOTkIvy0F4yhnir-A",
      authDomain: "dev-21816.firebaseapp.com",
      projectId: "dev-21816",
      storageBucket: "dev-21816.appspot.com",
      messagingSenderId: "706860e2525023",
      appId: "1:asdf:web:sdafasdfsadf",
    },
    admin: {
      serviceAccount: "./service-account.json",
    },
  },
});

// middleware/auth.ts

import { getCurrentUser } from "vuefire";

export default defineNuxtRouteMiddleware(async (to, from) => {
  const user = await getCurrentUser();
  if (!user) {
    return navigateTo({
      path: "/login",
      query: {
        redirect: to.fullPath,
      },
    });
  }
});

// pages/dashboard.vue

<script setup lang="ts">
definePageMeta({
  middleware: ['auth'],
});

</script>
<template>
  <h1>Dashboard</h1>
</template>

// pages/login.vue

<script setup lang="ts">
import { signInWithRedirect, GoogleAuthProvider } from 'firebase/auth';

const googleAuthProvider = new GoogleAuthProvider()
const auth = useFirebaseAuth()!;

const signinRedirect = () => {
  signInWithRedirect(auth, googleAuthProvider)
}
</script>

<template>
  <h1>Login page...</h1>
  <button @click="signinRedirect()">Signin Google (redirect)</button>
</template>

Expected behavior

Should authenticate with no problems

Actual behavior

Shows an error,

[nuxt-vuefire]: using GOOGLE_APPLICATION_CREDENTIALS env variable                                                                                                               9:26:39 AM
[9:26:39 AM] [nuxt-vuefire]: Unknown Error - FirebaseAuthError: Firebase ID token has invalid signature. See https://firebase.google.com/docs/auth/admin/verify-id-tokens for details on how to retrieve an ID token.                                                                                                                                                       9:26:37 AM
    at FirebaseTokenVerifier.mapJwtErrorToAuthError (/Users/gsid/Work/public/nuxt-auth-test/node_modules/firebase-admin/lib/auth/token-verifier.js:266:20)
    at /Users/gsid/Work/public/nuxt-auth-test/node_modules/firebase-admin/lib/auth/token-verifier.js:246:24
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errorInfo: {
    code: 'auth/argument-error',
    message: 'Firebase ID token has invalid signature. See https://firebase.google.com/docs/auth/admin/verify-id-tokens for details on how to retrieve an ID token.'
  },
  codePrefix: 'auth'
}

Additional information

[jontybrook]

I'm also experiencing this issue.

[posva]

I updated the instructions, it requires you to have a GOOGLE_APPLICATION_CREDENTIALS env variable. Make sure to also update vuefire and nuxt-vuefire to latest