bug: Nextjs middleware: edge runtime does not support Node.js 'crypto' module.'
Closed this issue · 11 comments
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
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
@wangsijie would you like to take a look when convenient? thanks
edge runtime is cool, we'll support it
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
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
@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.
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