Farmhash-modern throws webassembly error in Nextjs

[B-uchi]

[REQUIRED] Step 2: Describe your environment

• Operating System version: Linux Ubuntu 24.04
• Firebase Admin SDK version: v12.2.0
• Firebase Product: Admin auth
• Node.js version: v20.11.1
• NPM version: v10.2.4

[REQUIRED] Step 3: Describe the problem

I'm trying to configure firebase-admin SDK on my nextjs + TS project. Whenever i try to invoke any SDK function, i get a webAssembly error. In my case, i am trying to configure a middleware for the server side api, and when i call the verifyIdToken method it throws the error. I'll paste it below, i also noticed that the affected dependency farmhash-modern was just replaced in this version of firebase.

Steps to reproduce:

The error occured when i called the verifyIdToken() method in my middleware.ts file.

Relevant Code:

This is the middleware file.

import { auth } from "./lib/config/firebaseConfig";
import { NextResponse } from "next/server";
import { NextRequest } from "next/server";

interface ExtendedNextRequest extends NextRequest {
  uid?: string;
}

export async function middleware(req: ExtendedNextRequest, res: NextResponse) {
  try {
    let token = req.headers.get("Authorization");
    if (!token)
      return NextResponse.json({ message: "Access Denied" }, { status: 403 });
    if (token.startsWith("Bearer ")) {
      token = token.split(" ")[1];
    }

    let decodedToken = await auth.verifyIdToken(token);
    let uid = decodedToken.uid;
    req.uid = uid;

    return NextResponse.next();
  } catch (error: any) {
    console.log(error.errorInfo);
    return NextResponse.json({ message: "Invalid Token" }, { status: 401 });
  }
}

This is the error output

⨯ ./node_modules/farmhash-modern/bin/bundler/farmhash_modern_bg.wasm
Module parse failed: Unexpected character '' (1:0)
The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/farmhash-modern/bin/bundler/farmhash_modern_bg.wasm
./node_modules/farmhash-modern/bin/bundler/farmhash_modern.js
./node_modules/farmhash-modern/lib/browser.js
./node_modules/firebase-admin/lib/remote-config/condition-evaluator-internal.js
./node_modules/firebase-admin/lib/remote-config/remote-config.js
./node_modules/firebase-admin/lib/app/firebase-namespace.js
./node_modules/firebase-admin/lib/default-namespace.js
./node_modules/firebase-admin/lib/index.js
./lib/config/firebaseConfig.ts

This question is also on stackoverflow

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[lahirumaramba]

Does configuring webpack by setting asyncWebAssembly to true in your next.config.js work for you?
Something similar to the following:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.experiments = {
      asyncWebAssembly: true,
    };
    return config;
  },
};

[Keegan-lee]

I'm getting the same issue.. This code does seem to "fix" the issue, but src/middleware is now failing (hanging) to compile.

Does configuring webpack by setting asyncWebAssembly to true in your next.config.js work for you? Something similar to the following:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.experiments = {
      asyncWebAssembly: true,
    };
    return config;
  },
};

[raymelon]

Experiencing the same issue. For now, I followed the workaround at #2552 (comment), which is to downgrade to "firebase-admin": "^12.0.0",

Credits to @chandrasekhar2039

[matija2209]

Downgrading to 12.0.0 did not work for me.

Module parse failed: Unexpected character '' (1:0)
The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
(Source code omitted for this binary file)

[B-uchi]

Does configuring webpack by setting asyncWebAssembly to true in your next.config.js work for you?
Something similar to the following:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.experiments = {
      asyncWebAssembly: true,
    };
    return config;
  },
};

I also tried this, but as @Keegan-lee said src/middleware doesn't compile. It displays the compiling middleware message and stays there forever.

[nicolopadovan]

I am experiencing the same exact issue.
Adding the asyncWebAssembly flag indeed causes middleware to compile indefinetely.
Switching back to ^12.0.0 doesn't work either.

Workaround
For now, I have moved all the pages that needed that middleware into a specific route (can also be an anonymous route).
I am using the layout file as a kind of middleware: before displaying any data it runs a server action, where the error is not yielded.

Also, using ^12.0.0 raised an error regarding the usage of the os module, which may be a clue on where to debug this issue.

Edit: use export const revalidate = false on the layout to ensure no caching

[nicolopadovan]

Am having the same problem here, searched the best i could and it seems that there is no direct solution yet...

The best that i had saw is utilize another lib called next-firebase-auth-edge (https://github.com/awinogrodzki/next-firebase-auth-edge)

I am guessing that Firebase Auth cannot be used on Edge runtime due to the need for some Node-only modules.
FWIW I suggest to use this library with extreme caution due to how it manipulates and generates tokens and other security-related Firebase Auth features.

[hassanzadeh]

Hey Guys,
I'm having the same issue, but I completely replaced auth part of firebase-admin with next-firebase-auth-edge, only using admin part and firestore, should I still be getting this error?

[nicolopadovan]

Hey Guys, I'm having the same issue, but I completely replaced auth part of firebase-admin with next-firebase-auth-edge, only using admin part and firestore, should I still be getting this error?

You shouldn’t get the error, the package should be able to smoothly run on all NextJS environments.

I however renew my suggestion of being cautious when using the package

[hassanzadeh]

Hey Guys, I'm having the same issue, but I completely replaced auth part of firebase-admin with next-firebase-auth-edge, only using admin part and firestore, should I still be getting this error?

You shouldn’t get the error, the package should be able to smoothly run on all NextJS environments.

I however renew my suggestion of being cautious when using the package

Are you sure? I see plenty of people complaining about the same thing (that it won't work when using middleware). I'm using firestore and admin (but not auth) from firebase-admin and it leads to that error.

[nicolopadovan]

Hey Guys, I'm having the same issue, but I completely replaced auth part of firebase-admin with next-firebase-auth-edge, only using admin part and firestore, should I still be getting this error?

You shouldn’t get the error, the package should be able to smoothly run on all NextJS environments.
I however renew my suggestion of being cautious when using the package

Are you sure? I see plenty of people complaining about the same thing (that it won't work when using middleware). I'm using firestore and admin (but not auth) from firebase-admin and it leads to that error.

How are you importing the library?

Also, yes I am sure, as per the documentation of the package:

The official firebase-admin library depends heavily on Node.js’s internal crypto library, which isn’t available in [Next.js Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime).

This library solves that problem by handling the creation and verification of [Custom ID Tokens](https://firebase.google.com/docs/auth/admin/verify-id-tokens) using the Web Crypto API, which works in Edge runtimes

[hassanzadeh]

Here is my middleware,

import type { NextRequest, NextResponse } from "next/server";
import { authMiddleware } from "next-firebase-auth-edge/lib/next/middleware";
import { notFound } from "next/navigation"; // To send a 404 response
import { loadFirebaseCredentials } from "@lib/firebase-init";

const PROTECTED_PATH_REGEX = /^\/dashboard(\/|$)/; // Match `/dashboard` and sub-paths like `/dashboard/*`
const ADMIN_PATH_REGEX = /^\/admin(\/|$)/; // Match `/adminchi` and sub-paths like `/adminchi/*`

function redirectToLogin(request: NextRequest) {
  const url = request.nextUrl.clone();
  url.pathname = "/login";
  url.search = `redirect=${request.nextUrl.pathname}${url.search}`;
  return NextResponse.redirect(url);
}

function redirectToHome(request: NextRequest) {
  const url = request.nextUrl.clone();
  url.pathname = "/";
  url.search = "";
  return NextResponse.redirect(url);
}

export async function middleware(request: NextRequest) {
  const serviceAccount = loadFirebaseCredentials();

  return authMiddleware(request, {
    loginPath: "/api/users/login",
    logoutPath: "/api/users/logout",
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!,
    cookieName: "AuthToken",
    cookieSerializeOptions: {
      path: "/",
      httpOnly: true,
      secure: !!process.env.NEXT_PUBLIC_SITE_URL?.startsWith("https"),
      sameSite: "lax",
      maxAge: 12 * 60 * 60 * 24, // twelve days
    },
    cookieSignatureKeys: [process.env.COOKIE_SIGNATURE_KEY!],
    serviceAccount,
    handleValidToken: async ({ token, decodedToken }, headers) => {
      // Check if user is accessing an admin route
      if (ADMIN_PATH_REGEX.test(request.nextUrl.pathname)) {
        const isAdminUser = /*await getAdminTokenFromApi();*/false // Check if the user is admin
        if (!isAdminUser) {
          // If the user is logged in but not an admin, return a 404 response
          return notFound();
        }
      }

      // Restrict access to any path that matches `/dashboard` or starts with `/dashboard/`
      if (PROTECTED_PATH_REGEX.test(request.nextUrl.pathname)) {
        return NextResponse.next({
          request: {
            headers,
          },
        });
      }

      // Allow access to public pages
      return NextResponse.next({
        request: {
          headers,
        },
      });
    },
    handleInvalidToken: async () => {
      // If the user tries to access an admin route without authentication, return a 404 response
      if (ADMIN_PATH_REGEX.test(request.nextUrl.pathname)) {
        return notFound();
      }

      // Redirect to login if accessing protected routes like `/dashboard`
      if (PROTECTED_PATH_REGEX.test(request.nextUrl.pathname)) {
        return redirectToLogin(request);
      }

      // Allow access to public pages without a valid token
      return NextResponse.next();
    },
    handleError: async (error) => {
      console.error("Unhandled authentication error", { error });
      return redirectToLogin(request);
    },
  });
}

export const config = {
  matcher: [
    "/((?!_next|favicon.ico|api|.*\\.).*)", // All paths except static files and API calls
    "/api/login",
    "/api/logout",
  ],
};

and here is the stack trace,

  Import trace for requested module:
  ./node_modules/farmhash-modern/bin/bundler/farmhash_modern_bg.wasm
  ./node_modules/farmhash-modern/bin/bundler/farmhash_modern.js
  ./node_modules/farmhash-modern/lib/browser.js
  ./node_modules/firebase-admin/lib/remote-config/condition-evaluator-internal.js
  ./node_modules/firebase-admin/lib/remote-config/remote-config.js
  ./node_modules/firebase-admin/lib/app/firebase-namespace.js
  ./node_modules/firebase-admin/lib/default-namespace.js
  ./node_modules/firebase-admin/lib/index.js
  ./lib/firebase-init.ts

and here is the content of firebase-init.ts file:

import * as admin from "firebase-admin";
import { getTokens } from "next-firebase-auth-edge";
import { cookies } from "next/headers";
import fs from "fs";
import path from "path";

// Function to load credentials from GOOGLE_APPLICATION_CREDENTIALS, environment variables, or service-account.json
export function loadFirebaseCredentials() {
  // Check if GOOGLE_APPLICATION_CREDENTIALS is set
  if (process.env.GOOGLE_APPLICATION_CREDENTIALS) {
    const serviceAccountPath = process.env.GOOGLE_APPLICATION_CREDENTIALS;

    if (fs.existsSync(serviceAccountPath)) {
      const serviceAccount = JSON.parse(
        fs.readFileSync(serviceAccountPath, "utf8")
      );

      return {
        projectId: serviceAccount.project_id,
        privateKey: serviceAccount.private_key,
        clientEmail: serviceAccount.client_email,
      };
    } else {
      throw new Error(
        `Service account file not found at path: ${serviceAccountPath}`
      );
    }
  }

  // If GOOGLE_APPLICATION_CREDENTIALS is not set, fall back to environment variables
  if (
    process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID &&
    process.env.FIREBASE_PRIVATE_KEY &&
    process.env.FIREBASE_CLIENT_EMAIL
  ) {
    return {
      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
      privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, "\n"),
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
    };
  }

  // As a final fallback, load the service-account.json file from the project directory
  const serviceAccountPath = path.join(process.cwd(), "service-account.json");
  if (fs.existsSync(serviceAccountPath)) {
    const serviceAccount = JSON.parse(
      fs.readFileSync(serviceAccountPath, "utf8")
    );
    return {
      projectId: serviceAccount.project_id,
      privateKey: serviceAccount.private_key,
      clientEmail: serviceAccount.client_email,
    };
  } else {
    throw new Error(
      "Service account file not found and environment variables are missing."
    );
  }
}

// Initialize Firebase Admin SDK for Firestore if it's not already initialized
if (!admin.apps?.length) {
  const credentials = loadFirebaseCredentials();
  const credential = admin.credential.cert({
    projectId: credentials.projectId,
    privateKey: credentials.privateKey,
    clientEmail: credentials.clientEmail,
  });

  admin.initializeApp({
    credential,
  });
}

// Initialize Firestore for server-side use
const db = admin.firestore();

// Use `next-firebase-auth-edge` to handle authentication in edge/serverless environments
export async function getAuthToken(cookieName = "AuthToken") {
  try {
    // Get the token from the request's cookies based on the cookieName passed
    const cookieStore = cookies();
    const tokenCookie = cookieStore.get(cookieName)?.value;

    if (!tokenCookie) {
      throw new Error(`No token found in the cookie "${cookieName}"`);
    }

    const credentials = loadFirebaseCredentials();

    // Pass the entire cookies object and specify the cookie to use for validation
    const tokenData = await getTokens(cookies(), {
      apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!,
      cookieName, // Dynamically use the cookie name passed to the function
      cookieSignatureKeys: [process.env.COOKIE_SIGNATURE_KEY!], // Ensure this is a 32-byte key for signing
      serviceAccount: {
        projectId: credentials.projectId,
        clientEmail: credentials.clientEmail,
        privateKey: credentials.privateKey,
      },
    });

    // Return the decoded token or throw an error if no token is found
    if (!tokenData || !tokenData.decodedToken) {
      throw new Error("Invalid or missing token");
    }

    return tokenData.decodedToken; // Return the decoded ID token
  } catch (error) {
    console.error(
      `Error fetching authentication token from cookie "${cookieName}":`,
      error
    );
    throw new Error("Authentication failed");
  }
}

// Firestore and Admin SDK export
export { db, admin };

// Action code settings for email verification, etc.
export const actionCodeSettings = (id: string, url: string) => ({
  url,
  handleCodeInApp: true,
  iOS: {
    bundleId: `com.${id}.ios`,
  },
  android: {
    packageName: `com.${id}.android`,
  },
  dynamicLinkDomain: process.env.DYNAMIC_LINK_DOMAIN,
});

[hassanzadeh]

updated my response above.

[brouza]

As pointed out earlier, Firebase seems to work only in the Node server.
My workaround was to create an API endpoint with call API/session/route and export a response as JSON from the @auth session, then call the auth API in the middleware.
This works well for me, but I'm unsure about its security implications.

// /api/auth/session
import { auth } from "@/auth"

export async function GET(_request: Request){
const session = await auth()
if(!session) return Response.json(null, { status: 401 })
return new Response(JSON.stringify(session), {
status: 200,
})
}

// middleware.ts
export async function middleware(_request: NextRequest) {
const res = await fetch(new URL('/api/auth/session', _request.url), {
method: 'GET',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
})
const schema = z.custom<Session | null>()
const isAuthenticated = schema.parse(await res.json())

console.log(isAuthenticated)

const respond = NextResponse.next()

return respond
}

[nicolopadovan]

First of all, I suggest that you all try to format the code in the thread correctly. You can do so via backticks.
Also, try to keep the thread clean! Don't turn it into a StackOverflow question! :D

@hassanzadeh I can't test your code right now, but the issue might lie in the fact that you are still using firebase-admin within firebase-init.ts, which you are then importing in your middleware.

@brouza Seems like an okay workaround as far as I'm concerned; you could even try using a server action to abstract away the REST paradigm. I would at least try to secure the endpoint, however, even though it's a server-to-server communication. There might be more security implications as well.

I am as well awaiting an official response regarding this issue.

[hassanzadeh]

Thanks @nicolopadovan ,
I updated my response to fix the backticks issue.
I'm not sure I understood your point, I'm importing firebase-init, but all I'm using there is admin and db, but not auth, is that a problem?

[hassanzadeh]

As pointed out earlier, Firebase seems to work only in the Node server. My workaround was to create an API endpoint with call API/session/route and export a response as JSON from the @auth session, then call the auth API in the middleware. This works well for me, but I'm unsure about its security implications.

// /api/auth/session import { auth } from "@/auth"

export async function GET(_request: Request){ const session = await auth() if(!session) return Response.json(null, { status: 401 }) return new Response(JSON.stringify(session), { status: 200, }) }

// middleware.ts export async function middleware(_request: NextRequest) { const res = await fetch(new URL('/api/auth/session', _request.url), { method: 'GET', credentials: 'include', headers: { 'Content-Type': 'application/json', }, }) const schema = z.custom<Session | null>() const isAuthenticated = schema.parse(await res.json())

console.log(isAuthenticated)

const respond = NextResponse.next()

return respond }

Thanks, I first need to know why my current code is not working especially that I'm not using firebase-admin auht at all.

[hassanzadeh]

Ok, I think you are right.
Thanks

[rwlp]

Use webassembly in middlewares is not common practice. Using native code means you are applying a complex solution to improve efficiency. Middleware in Next.js is designed for handling requests and responses, but your approach may be misusing it.

In the case of Firebase, it's best to separate the methods into distinct files, such as firebaseServerSide.ts and firebaseClientSide.ts. Again, middleware in Next.js does not support running WebAssembly, and it’s generally a bad practice to run this type of code there (since firebase-admin uses WebAssembly).

My recommendation is to enhance your login and authentication processes. Consider implementing straightforward checks, such as validating tokens with JWT or other libraries, or even using libraries like next-auth for this purpose.

Another important observation is that if you are using firebase-admin on the client side(or import methods that use firebase-admin), it is considered a bad practice and poses significant security risks, which will likely lead to similar problems.

[B-uchi]

Use webassembly in middlewares is not common practice. Using native code means you are applying a complex solution to improve efficiency. Middleware in Next.js is designed for handling requests and responses, but your approach may be misusing it.

In the case of Firebase, it's best to separate the methods into distinct files, such as firebaseServerSide.ts and firebaseClientSide.ts. Again, middleware in Next.js does not support running WebAssembly, and it’s generally a bad practice to run this type of code there (since firebase-admin uses WebAssembly).

My recommendation is to enhance your login and authentication processes. Consider implementing straightforward checks, such as validating tokens with JWT or other libraries, or even using libraries like next-auth for this purpose.

Another important observation is that if you are using firebase-admin on the client side(or import methods that use firebase-admin), it is considered a bad practice and poses significant security risks, which will likely lead to similar problems.

Thanks @rwlp for the insight. I did some research and understand the issue better.

[Pavel-Husakouski]

Same error when using 12.6.0

[lahirumaramba]

We removed the dependency on farmhash-modern in the latest release v13. This should be now fixed in the latest release. Let us know if you are still running into issues. Thanks!

#2760

[nicholas-masini]

We removed the dependency on farmhash-modern in the latest release v13. This should be now fixed in the latest release. Let us know if you are still running into issues. Thanks!

#2760

Still running into the same issue from my end. Exact same scenario as OP, I have a middleware which is checking if the JWT is valid, firebase-admin is v13 however still getting the same error