The issue with the Nextjs build is stemming from problems related to jsonwebtoken in the _middleware

Question

The issue with the Nextjs build is stemming from problems related to jsonwebtoken in the _middleware

I need some assistance with deploying on Vercel. I have created a _middleware.ts file that checks for a JWT in the user's cookie.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { JwtPayload, verify } from 'jsonwebtoken'

export async function middleware(req: NextRequest) {
  let response = NextResponse.next()
  const url = req.nextUrl.clone()

  const token = req.cookies['allow-list']

  if (!token || token === 'deleted') {
    return response 
  }

  try {
    const decodedToken = verify(
      token,
      process.env.TOKEN_SECRET as string
    ) as JwtPayload
  } catch (e) {}

  return response
}

However, when I attempt to build my project, I encounter the error: "Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware". Is there a solution to this issue? It functions properly when running locally.

[22:59:29.409] Cloning github.com/dimitriborgers/test (Branch: master, Commit: efc1977)
[22:59:30.051] Cloning completed: 642.161ms
[22:59:30.427] Installing build runtime...
[22:59:34.350] Build runtime installed: 3.924s
[22:59:35.048] Looking up build cache...

(remaining content paraphrased for uniqueness)

javascript next.js vercel edge-function

Answer 1

Answer №1

Due to the browser-based nature of the middleware runtime, using eval in that context is restricted. Additionally, the maximum allowed duration for the middleware runtime is limited to 1.5 seconds, making it impossible to fetch verification from another server via an Edge Function.

To address this constraint, I decided to eliminate the dependency on the jsonwebtoken library and instead utilized jose to streamline the codebase. This adjustment ensures compatibility with both browser and server runtimes, allowing us to verify users directly at the middleware level.

Generating a Signed JWT

import * as jose from 'jose';

const jwtToken = await new jose.SignJWT({ userId: `your-data` })
                        .setProtectedHeader({ alg: 'HS256' })
                        .setIssuedAt()
                        .setExpirationTime('30d')
                        .sign(new TextEncoder().encode(`secret-key-phrase`));

Verifying the JWT

This method functions smoothly within the middleware environment (Edge Function on Vercel).

import * as jose from 'jose';

try {
    const { payload: jwtData } = await jose.jwtVerify(
        jwtToken, new TextEncoder().encode(`secret-key-phrase`)
    );
    // jwtData.uid => `your-data`
} catch (error) {
    console.log(error);
    // The JWT validation has failed or the token is invalid
}

Answer 2

Due to the browser-based nature of the middleware runtime, using eval in that context is restricted. Additionally, the maximum allowed duration for the middleware runtime is limited to 1.5 seconds, making it impossible to fetch verification from another server via an Edge Function.

To address this constraint, I decided to eliminate the dependency on the jsonwebtoken library and instead utilized jose to streamline the codebase. This adjustment ensures compatibility with both browser and server runtimes, allowing us to verify users directly at the middleware level.

Generating a Signed JWT

import * as jose from 'jose';

const jwtToken = await new jose.SignJWT({ userId: `your-data` })
                        .setProtectedHeader({ alg: 'HS256' })
                        .setIssuedAt()
                        .setExpirationTime('30d')
                        .sign(new TextEncoder().encode(`secret-key-phrase`));

Verifying the JWT

This method functions smoothly within the middleware environment (Edge Function on Vercel).

import * as jose from 'jose';

try {
    const { payload: jwtData } = await jose.jwtVerify(
        jwtToken, new TextEncoder().encode(`secret-key-phrase`)
    );
    // jwtData.uid => `your-data`
} catch (error) {
    console.log(error);
    // The JWT validation has failed or the token is invalid
}

Answer 3

Answer №2

Many of the core nodejs APIs are not compatible

edge runtime

This is an official example from next js: source code for jwt middleware. The code example utilizes jose from jose repository

import { type NextRequest, NextResponse } from 'next/server'
import { verifyAuth } from '@lib/auth'

export const config = {
  matcher: [ '/api/protected', '/protected' ],
}

export async function middleware(req: NextRequest) {
  // ensuring user authentication
  const verifiedToken = await verifyAuth(req).catch((err) => {
    console.error(err.message)
  })

  if (!verifiedToken) {
    // JSON response for API requests
    if (req.nextUrl.pathname.startsWith('/api/')) {
      return new NextResponse(
        JSON.stringify({ 'error': { message: 'authentication required' } }),
        { status: 401 });
    }
    // redirect to the set token page
    else {
      return NextResponse.redirect(new URL('/', req.url))
    }
  }
}

Answer 4

Many of the core nodejs APIs are not compatible

edge runtime

This is an official example from next js: source code for jwt middleware. The code example utilizes jose from jose repository

import { type NextRequest, NextResponse } from 'next/server'
import { verifyAuth } from '@lib/auth'

export const config = {
  matcher: [ '/api/protected', '/protected' ],
}

export async function middleware(req: NextRequest) {
  // ensuring user authentication
  const verifiedToken = await verifyAuth(req).catch((err) => {
    console.error(err.message)
  })

  if (!verifiedToken) {
    // JSON response for API requests
    if (req.nextUrl.pathname.startsWith('/api/')) {
      return new NextResponse(
        JSON.stringify({ 'error': { message: 'authentication required' } }),
        { status: 401 });
    }
    // redirect to the set token page
    else {
      return NextResponse.redirect(new URL('/', req.url))
    }
  }
}

Answer 5

Answer №3

If you wish to retain the use of jsonwebtoken, here is an alternative solution that you can implement within your middleware file.

export const config = {
     runtime: "edge",
     unstable_allowDynamic: [
         '**/node_modules/lodash/**/*.js',
    ],
 };

You should also include any other packages that make use of eval. The current version of jsonwebtoken when using decode should resolve the issue. If you are utilizing verify, additional libraries may need to be added to the unstable_allowDynamic.

However, it is worth noting that the preferred solution, as suggested by others, would likely involve transitioning to different libraries altogether.

Answer 6

If you wish to retain the use of jsonwebtoken, here is an alternative solution that you can implement within your middleware file.

export const config = {
     runtime: "edge",
     unstable_allowDynamic: [
         '**/node_modules/lodash/**/*.js',
    ],
 };

You should also include any other packages that make use of eval. The current version of jsonwebtoken when using decode should resolve the issue. If you are utilizing verify, additional libraries may need to be added to the unstable_allowDynamic.

However, it is worth noting that the preferred solution, as suggested by others, would likely involve transitioning to different libraries altogether.

Answer 7

Answer №4

The @tsndr/cloudflare-worker-jwt library is a great alternative to using jsonwebtoken.

Answer 8

The @tsndr/cloudflare-worker-jwt library is a great alternative to using jsonwebtoken.

The issue with the Nextjs build is stemming from problems related to jsonwebtoken in the _middleware

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Inspecting a substring of an element dynamically added in VueJs

Utilize the latest REDUX state within a React component's function

Unable to access account: HTML Javascript login issue

Skipping MongoDB in loop operations in a Node.js environment.The original text was modified to

Explore the input from multiple users to uncover the word that appears most frequently among them

Update the path dynamically in Next.js without the need to reload the page

Manipulate the color of the parent text using a button nested within

Overlaying images on top of text

Adding a DOM element within a React component

Differences between `component` and `render` in React Router routes

Issues with anchor tag click event in Firefox browser not functioning as expected

Ways to showcase title using ng-repeat

What is the process for appending a value to an array of JSON objects?

Tips for identifying screen orientation in a mobile website using React JS and the orientationchange event

Utilizing factory service within a decorator in AngularJS

Unable to retrieve the HTML value attribute that contains a double quotation mark

What is the best way to have text automatically selected upon clicking a category in a combobox? (Vue.JS 2)

looking to save a service or factory as a variable

Page rendering issue: Could not load script: /_next/static/chunks/pages/_error-2280fa386d040b66.js

"The Vue component's data is successfully updating within a method using setInterval(), however, the changes are not reflected in the DOM