Need help in resolving "Invalid Compact JWE" error

[shubham-bookdepot]

Question 💬

I recently upgraded my application from NextAuth v3 to v4, earlier only jwt secret was specified, now removed the jwt secret and only specified the secret under options directly.

Everything seems functional but getting following error logs on production:

message: 'Invalid Compact JWE',
'JWEInvalid: Invalid Compact JWE\n' +
at compactDecrypt (/app/node_modules/jose/dist/node/cjs/jwe/compact/decrypt.js:16:15)\n' +
at jwtDecrypt (/app/node_modules/jose/dist/node/cjs/jwt/decrypt.js:8:61)\n' +
at Object.decode (/app/node_modules/next-auth/jwt/index.js:64:34)\n' +
at async Object.session (/app/node_modules/next-auth/core/routes/session.js:41:28)\n' +
at async NextAuthHandler (/app/node_modules/next-auth/core/index.js:96:27)\n' +
at async NextAuthNextHandler (/app/node_modules/next-auth/next/index.js:21:19)\n' +
at async Object.apiResolver (/app/node_modules/next/dist/server/api-utils/node.js:182:9)\n' +
at async NextNodeServer.runApi (/app/node_modules/next/dist/server/next-server.js:386:9)\n' +
at async Object.fn (/app/node_modules/next/dist/server/base-server.js:488:37)\n' +
at async Router.execute (/app/node_modules/next/dist/server/router.js:228:32)',
name: 'JWEInvalid'

Any suggestions from anyone, what else I need to specify in terms of security keys.

How to reproduce ☕️

const options = {
  site: process.env.NEXTAUTH_URL,
  **secret: process.env.JWT_ACCESS_SECRET,**
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    FacebookProvider({
      clientId: process.env.facebookClientId,
      clientSecret: process.env.FACEBOOK_SECRET,
    }),
    CredentialsProvider({
      async authorize(credentials) {
        let user = {};
......................................................
 session: {
    strategy: "jwt",
    maxAge: process.env.sessionDuration * 24 * 60 * 60,
  },
  jwt: {},
...........................................................

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[ThangHuuVu]

Possibly related: #4075 (comment)

[soukainakhalkhouli]

Hello ,

I'm also having same issue

[mohaahadji]

You need export the authOptions as well as Nextauth{authOptions} then on index.js receive the authOptions on ServerSideSession()

I has the same issue because I did not export authOptions it self I was only exporting NextAuth(authOptions).. hope this help!

[greedybrain]

This worked. I already was exporting authOptions. I just had to pass it into my getServerSession(). Thanks Mohaahadji.

[guilleliss]

This worked for me, I was also exporting it already, but I passing authOptions to getServerSession() made it work

[JordanSucher]

Worked for me too, wish I understood why though!

[bhatvikrant]

Thanks, this worked!

[JordanVera]

seems that I made the same mistake. This worked for me as well, thanks Mohaahadji!

[gregg-cbs]

I cant seem to get rid of this error with the app directory. Even if I strip auth down to nothing, I still see this error.
My code as per docs

"next": "13.4.19"
"next-auth": "^4.23.1"

// app/api/auth/[...nextauth]/route.ts
import NextAuth, {type NextAuthOptions} from "next-auth"

export const authOptions: NextAuthOptions = {
  debug: true,
  pages: {
    signIn: "/login"
  },
  providers: [

  ]
}

const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

// app/page.tsx
export default async function Home() {
  const session = await getServerSession(authOptions)
  
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <pre>{JSON.stringify(session, null, 2)}</pre>
    </main>
  )
}

[next-auth][error][JWT_SESSION_ERROR]
https://next-auth.js.org/errors#jwt_session_error Invalid Compact JWE {
  message: 'Invalid Compact JWE',
  stack: 'JWEInvalid: Invalid Compact JWE\n' +
    '    at compactDecrypt (webpack-internal:///(rsc)/./node_modules/jose/dist/node/cjs/jwe/compact/decrypt.js:18:15)\n' +
    '    at jwtDecrypt (webpack-internal:///(rsc)/./node_modules/jose/dist/node/cjs/jwt/decrypt.js:10:61)\n' +
    '    at Object.decode (webpack-internal:///(rsc)/./node_modules/next-auth/jwt/index.js:44:52)\n' +
    '    at async Object.session (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/session.js:25:34)\n' +
    '    at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:161:37)\n' +
    '    at async getServerSession (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:125:21)\n' +
    '    at async Home (webpack-internal:///(rsc)/./app/page.tsx:13:21)',
  name: 'JWEInvalid'
}

[rinvii]

Your session token is probably malformed. Try clearing your cookies.

If you're not using a prefix, you can reproduce this by manually setting your cookies exactly to: next-auth.session-token and its value as aaa.aa.a.a.a.a.. If you are, just prefix the name.

Besides this, your stripped down example works fine on my machine. In my view, the error just tells you that the session tokens have either been tampered with or they've been encoded or decoded incorrectly. Not really an error with the app router itself.

[gregg-cbs]

This could be the answer because I had auth on another next project that was running on localhost:3000! So it makes sense that there would be a cookie from that project that could be conflicting with this one. I will clear my cookies and try again. Thanks!

[gregg-cbs]

I can confirm clearing my cookies has resolved the issue

[Marknjo]

Mostly, this problem has to do with how you are configuring your NextAuth and how you call getServerSession().

If you find yourself struggling with this issue here is an example NextAuth config to help you fix your problem. Note: I'm using next 13 app folder and using /api/auth/[...nextauth]/route.ts file

First, ensure you are configuring your providers and authOptions correctly.

import { db } from '@/src/server/db.server';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { NextAuthOptions } from 'next-auth';
import NextAuth from 'next-auth/next';
import GithubProvider from 'next-auth/providers/github';

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(db),
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Second, let's say you are trying to fetch users from the database and you are using getServerSession() to ensure only logged in users can access the route /api/users (Not ideal but a good example). Here is how you will implement your route.

import { db } from '@/src/server/db.server';
import { getServerSession } from 'next-auth';
import { NextResponse } from 'next/server';
import { authOptions } from '../auth/[...nextauth]/route';

export async function GET(request: Request) {
  const session = getServerSession(authOptions);

  if (!session) {
    return NextResponse.json(
      { message: 'Please login' },
      {
        status: 401,
        statusText: 'Unauthorized',
      }
    );
  }

  const users = await db.user.findMany();

  return NextResponse.json(users);
}

The key is in passing authOptions to the getServerSession. Also, like it has been noted earlier, clear your cookies. In addition, upgrade your adapters to latest i.e. @auth/your-adapter not @next-auth/your-adapter

I hope it helps

[BucurEva87]

Thanks a lot! I was struggling with this one and I was convinced it had something to do with the prisma adapter, for once I unplugged the adapter from the authOptions everything ran smoothly. But, indeed, it had to do with passing the authOptions to the getServerSession(), not with the adapter itself. However, I was importing the adapter from @next-auth/prisma-adapter and I'm not really sure if changing it to @auth/prisma-adapter had any impact. But I changed it and it works now and that's all that matters (at this time), so thank you!

[iamursky]

Thank you! Not passing authOptions to getServerSession was my case.

[diazsasak]

thank you, passing authOptions to the getServerSession

[whitallee]

This has been plaguing me for a month now, I don't know how I missed this thread the first time I got to this discussion a month ago haha! Passing authOptions to getServerSession is the solution!

[FlorianLeChat]

I never expected to find a solution to this issue, so thank you a lot!

[adityadafe]

folks let me summarize the solution big thanks to @Marknjo for providing solution -

1. Clear cookies from your browser
2. use latest adapter not "next-auth" one use "@auth/prisma-adapter"
3. while declaring auth route use the adapter the same way as mentioned in docs
4. big difference is to pass authoptions (that we declared in "/api/next-auth" route.ts file) to getServerSession() everywhere you are using the function in code like this

getServerSession(authOptions)

Hope this helps you and again big thanks to @Marknjo

[freeqaz]

FYI when I was hitting this error the fix for me was to tell NextAuth to use JWT manually.

export const config = {
    debug: true,
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_ID || '',
            clientSecret: process.env.GITHUB_SECRET || '',
        }),
    ],
    session: {
        strategy: "jwt",
        maxAge: 30 * 24 * 60 * 60, // 30 days
    },
    adapter: PrismaAdapter(db),
} satisfies NextAuthOptions;

Without that it wouldn't work and I tried tracing through everything. (Clearing cookies, using incognito, etc)

Not sure what the issue was but hopefully this helps somebody.

[exelimpichment]

same crap mate
this saved my ass

 session: {
        strategy: "jwt",
    },
    

[xianhengma]

this is it.

[cameronlockey]

This also fixed my issue. THANK YOU! 🙌 NextJS 14, AuthJS ^5.0.0-beta.16