Is next-auth compatible with NextJS Edge Runtime ?

[rupampoddar]

Build is failing with the following error

$ pnpm run build

> my-app@ build /mnt/data/projects/my-app
> next build

info  - Loaded env from /mnt/data/projects/my-app/.env
warn  - You have enabled experimental feature (runtime) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Linting and checking validity of types  
warn  - You are using the experimental Edge Runtime with `experimental.runtime`.
info  - Creating an optimized production build  
Failed to compile.

./node_modules/.pnpm/@[email protected]/node_modules/@babel/runtime/regenerator/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

Import trace for requested module:
./node_modules/.pnpm/@[email protected]/node_modules/@babel/runtime/regenerator/index.js
./node_modules/.pnpm/[email protected]_dcors23iqtgxrhrwosgnnc4xji/node_modules/next-auth/core/errors.js
./node_modules/.pnpm/[email protected]_dcors23iqtgxrhrwosgnnc4xji/node_modules/next-auth/utils/logger.js
./node_modules/.pnpm/[email protected]_dcors23iqtgxrhrwosgnnc4xji/node_modules/next-auth/core/index.js
./node_modules/.pnpm/[email protected]_dcors23iqtgxrhrwosgnnc4xji/node_modules/next-auth/next/index.js
./node_modules/.pnpm/[email protected]_dcors23iqtgxrhrwosgnnc4xji/node_modules/next-auth/index.js


> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.

next.config.js

/**
 * @type {import('next').NextConfig}
 */
module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  experimental:{
    runtime:"experimental-edge"
  },
};

pages/api/auth/[...nextauth].ts

import NextAuth, { NextAuthOptions } from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  theme: {
    colorScheme: 'light',
  },
}

export default NextAuth(authOptions)

Is this a known limitation or am I doing something wrong ?

[azharhussain96]

Commenting to follow along, was hoping to implement as a solution to the (sometimes long) delay between Signup() and actually redirecting user to the /login page.

Vercel's Edge documentation points out, however, that "you cannot use Node.js APIs in Edge Functions. See the Limitations section for more information." May be a potential issue.

[balazsorban44]

Hi, NextAuth.js (next-auth) is not runtime agnostic, but the next generation @auth/nextjs will be, which is based on the new @auth/core, announced here: https://twitter.com/balazsorban44/status/1603082914362986496

PR here: #7443

[dantrain]

Hi @balazsorban44 do you have a rough timeline for the release of the runtime agnostic @auth/nextjs package? Not in a rush, just curious. Really appreciate your work on a great library, thank you!

[rayli09]

+1

[geekyayush]

Any idea when we will use the new auth/nextjs?
or is there something I can do myself to implement the same?
I'd really appreciate anyone's help, please.

[re-thc]

Follow #7443 maybe

[osdiab]

if you're brave you can use it by installing the @experimental tag and the docs linked from that PR.

[niwatoro]

I solved the issue using the experimental version as @balazsorban44 suggested. I used [email protected] and [email protected].

What I did:

1. Install the experimental version
   npm i next-auth@experimental

2. Rewrite the code in app/api/auth/[...nextauth]/route.ts

const authOptions: NextAuthConfig = {
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }) as Provider,
  ],
  secret: process.env.GOOGLE_CLIENT_SECRET,
  pages: {
    signIn: "/signin",
  },
};

const handler = NextAuth(authOptions);
export const GET = handler.handlers.GET;
export const POST = handler.handlers.POST;

export const runtime = "edge";

4. See it work!

[viniciuspalma]

I got something totally different Package path . is not exported from package, someone that had the chance to have this working? I'm using the version [email protected]

[JanThiel]

Attempted import error: 'raw' is not exported from '@auth/core' (imported as 'raw').

Try this:
#7443 (comment)

[avdain]

import {getServerSession} from "next-auth"; doesn't seem to work with the experimental next-auth, does anyone else have the same problem and does anyone know a workaround?

Mikail

[JanThiel]

Check out the docs for v5:

https://auth-docs-git-feat-nextjs-auth-authjs.vercel.app/guides/upgrade-to-v5?authentication-method=api-route#authentication-methods

[weleo]

Upgraded my demo applications to v5 without any issues by following the migration guide.

[avdain]

Any updates for version 5 @balazsorban44 ?

import {getServerSession} from "next-auth"; doesn't seem to work with the experimental next-auth version , does anyone else have the same problem and does anyone know a workaround?

[syhner]

lib/auth.ts

import NextAuth from 'next-auth';

export const { auth } = NextAuth({ providers: [ /* ... */ ] });

Session can be accessed with

const session = await auth();

Also mentioned here: #5855 (reply in thread) from the reply to your previous message

[avdain]

Thanks @syhner, I have already solved the problem by looking at the docs.

[Bensigo]

currently getting this error
The Edge Function "pages/api/auth/[...nextauth]" must export a `default` function

my current code

export {  GET, POST } from "@/server/auth"

export const runtime = "edge";

[colis]

currently getting this error The Edge Function "pages/api/auth/[...nextauth]" must export a `default` function

my current code

export {  GET, POST } from "@/server/auth"

export const runtime = "edge";

Those are route handlers, which are only available inside the app directory.

I tried this

import {handlers} from 'auth'

export const config = {
  runtime: 'edge'
}

export default handlers.GET

and it works, but you obviously can't export POST from the same module.

Does anyone have a working example of this?

[jordanvector]

@colis same issue here, I also have not found a solution

[azr-arch]

is my error

Failed to compile.

./node_modules/@babel/runtime/regenerator/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

Import trace for requested module:
./node_modules/@babel/runtime/regenerator/index.js
./node_modules/next-auth/react/index.js


> Build failed because of webpack errors
   Creating an optimized production build 

same as this thread's ?

[webstorms]

you find any solution to this?

[yangcheng]

I came to this issue from google search, and after more research I found the new auth.js support edge runtime. https://authjs.dev/guides/edge-compatibility , migrating to auth.js is working for me.