JWT_SESSION_ERROR in next auth with next.js

[nileshzala005]

Question 💬

In local development sign in is working fine but the Below error is thrown by next-auth while returning from our custom OAuth provider with production build at dev URL like https://dev-app.xyz.com/

NEXTAUTH_SECRET and NEXTAUTH_URL env variable is also set as per this https://next-auth.js.org/deployment

` authError { code: 'JWT_SESSION_ERROR', metadata: { code: 'ERR_JWE_DECRYPTION_FAILED', name: 'JWEDecryptionFailed', message: 'decryption operation failed',

} }`

How to reproduce ☕️

package.json

"dependencies": {

"@mui/icons-material": "^5.10.14",
"@mui/x-data-grid": "^5.17.14",
"@sentry/nextjs": "^7.23.0",
"@reduxjs/toolkit": "^1.9.1",
"applicationinsights": "^2.3.6",
"axios": "^1.2.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.38",
"net": "^1.0.2",
"next": "13.0.4",
"next-auth": "^4.18.4",
"nextjs-redirect": "^6.0.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-intl": "^6.2.1",
"react-redux": "^8.0.5",
"react-test-renderer": "^18.2.0",
"tls": "^0.0.1",
"v8": "^0.1.0"
}, 

[...nextauth].ts

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
    if (!config?.payload) {
        try {
            const response = await fetch('url to fetch config dyamic');
            config = await response.json();
          
        } catch (error) {
            if (error) {
               
            }
        }
    }
    try {
        return await NextAuth(req, res, {
            providers: [
                {
                    id: appConst.OAUTH_ID,
                    name: 'Demo',
                    type: 'oauth',
                    checks: ['pkce', 'state'],
                    idToken: true,
                    wellKnown: `${config.payload.idtAuthorityUrl}${apiUrls.IDT_WELLKNOWN}`,
                    authorization: {
                        params: {
                            scope: config.payload.webAppIdtClientScope,
                        },
                    },
                    clientId: config.payload.webAppIdtClientId,
                    profile(profile) {
                        return {
                            id: 1,
                            ...profile,
                        };
                    },
                    clientSecret: config.payload.webAppIdtClientSecret,
                },
            ],
            pages: {
                signIn: apiUrls.AUTH_ERROR,
            },
            secret: process.env.NEXTAUTH_SECRET,
            debug: false,
            session: {
                strategy: 'jwt',
            },
            jwt: {
                secret: process.env.NEXTAUTH_SECRET
            },
            useSecureCookies: true,// using false while local development
            logger: {
                error(code, metadata) {
          
                    // eslint-disable-next-line no-console
                    console.log('authError', { code, metadata });
       
                },
            },
            callbacks: {
                async jwt({ token, account }) {
                    if (account) {
                        token.accessToken = account.access_token;
                        token.accessTokenExpire = account.expires_at
                            ? account.expires_at * 1000
                            : 0;
                        token.refreshToken = account?.refresh_token;
                        token.id_token = account?.id_token;
                        token.accessTokenIssuedAt = Date.now();
                    }
                    //  return token if not Access token expired
                    if (
                        token.accessTokenExpire &&
                        Date.now() < token.accessTokenExpire
                    ) {
                        return token;
                    }
                    //  Access token has expired, try to update it
                    return await getAccessToken(token, config.payload);
                },
                // eslint-disable-next-line require-await
                async session({ session, user, token }) {
                    if (token && typeof token.accessTokenExpire === 'number' && typeof token.accessTokenIssuedAt === 'number') {
                        const tempsession: any = session;
                        // session interval in seconds, It's accesstoken expire - 10 minutes
                        let interval = Math.round(((token.accessTokenExpire - token.accessTokenIssuedAt) - (60000 * 10)) / 1000);
                        if (interval < 300) {
                            interval = 2
                        }
                        tempsession.interval = interval;
                        return tempsession;
                    } else {
                        return session;
                    }
                },
            },
        });
    } catch (error) {
        if (error) {
   
            console.log('NextAuth', error);
          
        
        }
    }
}

Contributing 🙌🏽

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

[Altroo]

Downgrade to 4.18.0, the version 4.18.4 has issues and can't set the tokens somehow.

[nileshzala005]

@Altroo Thanks for the quick reply. Downgraded to 4.18.0 but not working

[jsinh]

This might be due to restrictions at the web server level in the hosting environment. Assuming you are using NodeJS and NextJS and running a web proxy behind Nginx or Apache.

In OAuth 3-legged process OAuth identity server sends data back. In case when the Authorize response callback URL - body or headers is too large or big, then what your hosting environment supports may give errors.

Check web server logs and tweak the config for proxy-body-size, proxy-buffer-size, fastcgi-buffer-size etc, in the case of Nginx and see if it helps.

Suggesting based on the mention that it works locally but shows an error in deployed version

[nileshzala005]

Thanks, I will ask my Team DevOps engineer to check the Web Server logs

[nileshzala005]

Confirming it was a Web Server issue, upon adding the bigger allowed size for the request body fixed the issue

[rongrat9]

So do we have a solution for this, then?

[Afaq-302]

If you face any of the following errors, Follow these steps and the error will be fixed as My one was fixed.

1. code: 'JWT_SESSION_ERROR' name: 'JWEDecryptionFailed

2. MissingSecret [MissingSecretError]: Please define a `secret` in production.

3.ERROR[next - auth][error][NO_SECRET];

Step 1 Generate a secret:

To do this, open a terminal under Linux (In Window Open Hyper or CMD) and type : openssl rand -base64 32
The output of this order will be your secret, a string like : Ey7nTKnggBc0bRN8WUjyShw2qzOZ6KW4fUyqcKBePxY=

2- Place this secret in an environment variable:

I recommend you to put this secret in an environment variable. You can use the .env file (or .env.local) or directly your next.config.js file. Here I take the example of the next.config.js file that I prefer to work with. In this file, add the line with the value NEXTAUTH_SECRET and your secret.
My Example in .env file: NEXTAUTH_SECRET='78zFZvyspgAIBXPKdA0AhFqcNWXX16/CEmBFOHU3iOg='

3- Adding the secret in the next-auth configuration:

Once your secret is set as an environment variable, next-auth must be able to access it. Under NextJS, environment variables are accessible on the server side through the process.env object and it is the NEXTAUTH_SECRET property that we are interested in here,
On your application, go to the file /pages/api/auth/[...nextauth].js, and add at the same level as providers and your possible callbacks, the value:

secret: process.env.NEXTAUTH_SECRET,

4- Relaunch a build:

Finally, remember to run a new npm run build and you’re all set 🥳 !

[Himan-Miku]

Thank you, this worked 🥲

[Dekita]

omg, thank you! this needs to be better documented! <3

[LuciKritZ]

Thanks a lot, it worked like a charm! :)

[AyedSamy]

+ REMOVING CACHE if all these steps don't do the trick directly!!

I faced this issue when working on localhost and this was the missing piece for me, don't forget that

[NguyenVu04]

thanks a lot :)))

[mkilincaslan]

I got the same issue JWT session error then I noticed that the jwt callback triggers twice and first time with parameters second time is undefined so I added a basic condition to fix it;

async jwt({ token, user }) {
      if (user && user.role) token.role = user.role;

      return token;
    },

Now it works properly, it took my 5 hours debugging to notice that! I tried many ways; update the secret, re-write the auth actions etc but it was that much easy. For role based controls.