awinogrodzki / next-firebase-auth-edge

Next.js Firebase Authentication for Edge and Node.js runtimes. Compatible with latest Next.js features.
https://next-firebase-auth-edge-docs.vercel.app/
MIT License
523 stars 44 forks source link

Invalid argument: idToken has no "kid" claim when running firebase emulator #277

Open GorgeousPuree opened 1 day ago

GorgeousPuree commented 1 day ago
import { NextRequest, NextResponse } from "next/server";
import { authMiddleware, redirectToHome, redirectToLogin } from "next-firebase-auth-edge";

export async function middleware(request: NextRequest) {
    return authMiddleware(request, {
      loginPath: "/api/login",
      logoutPath: "/api/logout",
      apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!,
      cookieName: process.env.FIREBASE_AUTH_COOKIE_NAME!,
      cookieSignatureKeys: [process.env.FIREBASE_AUTH_COOKIE_SIGNATURE_KEY_CURRENT!, process.env.FIREBASE_AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS!],
      cookieSerializeOptions: {
        path: "/",
        httpOnly: true,
        secure: true,
        sameSite: "lax" as const,
        maxAge: 12 * 60 * 60 * 24,
      },
      serviceAccount: {
        projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!,
        clientEmail: process.env.FIREBASE_CLIENT_EMAIL!,
        privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, '\n')!
      },
      handleValidToken: async ({token, decodedToken, customToken}, headers) => {
        console.log(decodedToken);
        console.log(decodedToken.role);

        return NextResponse.next({
          request: {
            headers
          }
        });
      },
    });
  }

  export const config = {
    matcher: [
      "/",
      "/((?!_next|api|.*\\.).*)",
      "/api/login",
      "/api/logout",
    ],
  };

Console output:

WARNING: You are using the Auth Emulator, which is intended for local testing only.  Do not use with production credentials.
 ⨯ node_modules\next-firebase-auth-edge\browser\auth\token-verifier.js (60:18) @ FirebaseTokenVerifier.verifyContent
 ⨯ Invalid argument: idToken has no "kid" claim.

This happens if I run Firebase emulator. Without emulator everything works fine.

My package.json:

{
  "name": "aaa",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env NEXT_PUBLIC_APP_ENV='emulator' next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "emulators": "firebase emulators:start"
  },
  "dependencies": {
    "@omer-x/next-openapi-json-generator": "1.3.0",
    "@omer-x/next-openapi-route-handler": "^1.6.0",
    "dotenv": "^16.4.5",
    "drizzle-orm": "^0.36.1",
    "drizzle-zod": "^0.5.1",
    "firebase": "^11.0.1",
    "firebase-admin": "^12.7.0",
    "js-cookie": "^3.0.5",
    "next": "14.1.1",
    "next-firebase-auth-edge": "^1.8.2",
    "pg": "^8.13.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "swagger-ui-react": "^5.18.2",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@omer-x/openapi-types": "^1.1.0",
    "@types/js-cookie": "^3.0.6",
    "@types/node": "^20",
    "@types/pg": "^8.11.10",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/swagger-ui-react": "^4.18.3",
    "cross-env": "^7.0.3",
    "drizzle-kit": "^0.28.0",
    "eslint": "^8",
    "eslint-config-next": "15.0.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "tsx": "^4.19.2",
    "typescript": "^5"
  }
}

Could you give any recommendations?

awinogrodzki commented 12 hours ago

Hey @GorgeousPuree!

Are you exposing FIREBASE_AUTH_EMULATOR_HOST environment variable to the Middleware runtime? You could confirm that by calling console.log({ FIREBASE_AUTH_EMULATOR_HOST: process.env.FIREBASE_AUTH_EMULATOR_HOST }) in Middleware body

By the way, in latest canary version v1.9.0-canary.1 I've introduced a Full Firebase Emulator support. It means you no longer need to provide real Firebase project credentials to develop the app alongside Emulator

Cheers!