bug: Nextjs middleware: edge runtime does not support Node.js 'crypto' module.'

[waltcow]

Describe the bug

issue may related to vvo/iron-session#543

when Integrate with nextjs, I am trying to add a middleware to protect private route, code as follow

import { NextResponse, type NextRequest } from "next/server"

import { logtoClient } from "./lib/logto"

export function middleware(request: NextRequest, response: NextResponse) {
  return logtoClient.withLogtoApiRoute(async (req) => {
    if (!req.user.isAuthenticated) {
      return NextResponse.redirect(new URL("/api/logto/login", req.url))
    }
    return NextResponse.next()
  })
}

export const config = {
  matcher: ["/dashboard/:path*", "/editor/:path*"],
}

error logs as follow

wait  - compiling...
event - compiled successfully in 149 ms (1037 modules)
error - node_modules/.pnpm/@peculiar+webcrypto@1.4.3/node_modules/@peculiar/webcrypto/build/webcrypto.es.js (9:0) @ new SubtleCrypto
error - The edge runtime does not support Node.js 'crypto' module.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

Expected behavior

How to reproduce?

Context

OS:

Environment:

Logto version:

Node version:

Postgres version:

Command of starting Logto:

Screenshots

[redimongo]

Try building the app first so that you have a runtime.

It seems you are doing this in dev mode?

Sometimes you can run into issues where code won't work in middleware because the plug-in was not coded to be used in a middleware. This could also be the issue.

Also I would say this is not best practice. You should be checking for authentication based on the page that they are visiting not during the middleware as that is the server doing the check not the client end doing the check.

Which also explains why it is failing.

I don't think it would work but for server side you should use withLogtoSsr

Recommend https://docs.logto.io/docs/recipes/integrate-logto/next-js

[gao-sun]

@wangsijie would you like to take a look when convenient? thanks

[wangsijie]

edge runtime is cool, we'll support it

[waltcow]

@wangsijie

import { IncomingMessage, ServerResponse } from "http"
import type {
  GetServerSidePropsContext,
  GetServerSidePropsResult,
  NextApiHandler,
  NextApiRequest,
  NextApiResponse,
} from "next"
import type { IronSession, IronSessionOptions } from "iron-session"
import { getIronSession } from "iron-session/edge"

https://github.com/vvo/iron-session/blob/main/next/index.ts

after change import { getIronSession } from "iron-session/edge" it works fine

[waltcow]

Try building the app first so that you have a runtime.

It seems you are doing this in dev mode?

Sometimes you can run into issues where code won't work in middleware because the plug-in was not coded to be used in a middleware. This could also be the issue.

Also I would say this is not best practice. You should be checking for authentication based on the page that they are visiting not during the middleware as that is the server doing the check not the client end doing the check.

Which also explains why it is failing.

I don't think it would work but for server side you should use withLogtoSsr

Recommend https://docs.logto.io/docs/recipes/integrate-logto/next-js

i think backend authentication is common usage, btw edge runtime has no matter with windows

[redimongo]

@waltcow I take it you want all users to be able to access your editor and your dashboard?

Because I am not seeing anyway for you to check if a user has access rights to that role/scope/resource.

[wangsijie]

@waltcow Thanks, we are working on this, maybe expose a @logto/next/edge

[waltcow]

it seems that just provide @logto/next/edge is not enough, some lib deps is not allowed in Edge Runtime @wangsijie

Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

Import trace for requested module:
./node_modules/.pnpm/lodash.get@4.4.2/node_modules/lodash.get/index.js
./node_modules/.pnpm/@logto+client@1.1.0/node_modules/@logto/client/lib/module.mjs
./node_modules/.pnpm/@logto+node@1.1.0/node_modules/@logto/node/lib/module.mjs

./node_modules/.pnpm/lodash.orderby@4.6.0/node_modules/lodash.orderby/index.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

[wangsijie]

@waltcow Yes... I am now fixing them one by one, maybe you'll need to wait for a few days.

[wangsijie]

#469

[wangsijie]

#486 brings more