In need of guidance to troubleshoot the error "Encountering problem while reading properties of undefined (jwt)"

Question

In need of guidance to troubleshoot the error "Encountering problem while reading properties of undefined (jwt)"

I'm currently facing an authentication flow issue and I am looking for assistance from someone with a keen eye to help me troubleshoot and resolve the problem. The specific error message I am encountering is

[next-auth][error][JWT_SESSION_ERROR]  https://next-auth.js.org/errors#jwt_session_error Cannot read properties of undefined (reading 'jwt')

. I have already gone through the code multiple times to identify any potential issues. Here are the steps I followed and how you can reproduce the error:

Set up and configured the [...nextauth].js file according to the instructions below.
Updated Providers with required credentials.

When attempting a login test, I received the following error messages:

frontend/pages/api/auth/[...nextauth].js

import NextAuth from "next-auth";
import GoogleProvider from 'next-auth/providers/google';
import FacebookProvider from 'next-auth/providers/facebook';
import EmailProvider from 'next-auth/providers/email';

// Rest of the code snippet here

Error details listed below

[next-auth][error][JWT_SESSION_ERROR] 
https://next-auth.js.org/errors#jwt_session_error Cannot read properties of undefined (reading 'jwt') {
  message: "Cannot read properties of undefined (reading 'jwt')",
  stack: "TypeError: Cannot read properties of undefined (reading 'jwt')\n"
    '    at Object.session (webpack-internal:///(api)/./pages/api/auth/[...nextauth].js:45:32)\n' +
    '    at Object.session (/Users/PATH-TO-FILES...)\n'

  name: 'TypeError'
}

next.js strapi next-auth

Answer 1

Answer №1

Make sure to update the URI in the jwt callback with the following code snippet:

const response = await fetch(      `${process.env.NEXT_PUBLIC_API_URL}/api/auth/${account.provider}/callback?access_token=${account?.access_token}`);

Below is the setup for [...nextauth].js. Note: I'm utilizing authOptions instead of options to enable session retrieval on the server side in getServerSideProps.

import CredentialsProvider from 'next-auth/providers/credentials';
import GoogleProvider from 'next-auth/providers/google';
import axios from 'axios';

const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    CredentialsProvider({
      name: 'Email',
      type: 'credentials',

      async authorize(credentials) {
        const { email, password } = credentials;

        try {
          const { data } = await axios.post(
            `${process.env.NEXT_PUBLIC_API_URL}/api/auth/local`,
            {
              identifier: email,
              password: password,
            }
          );
          const user = await data;

          if (user) {
            return user;
          } else {
            return null;
          }
        } catch (err) {
          return null;
        }
      },
    }),
  ],

  session: {
    jwt: true,
  },
  secret: process.env.NEXTAUTH_SECRET,

  callbacks: {
    async session({ session, token, user }) {
      session.jwt = token.jwt;
      session.id = token.id;
      return session;
    },
    async jwt({ token, user, account }) {
      if (user) {
        if (account.provider !== 'credentials') {
          const response = await fetch(
            `${process.env.NEXT_PUBLIC_API_URL}/api/auth/${account.provider}/callback?access_token=${account?.access_token}`
          );
          const data = await response.json();

          token.jwt = data.jwt;
          token.id = data.user.id;
        } else {
          token.jwt = user.jwt;
          token.id = user.user.id;
        }
      }

      return token;
    },
  },

  pages: {
    signIn: '/auth/signin',
  },
};

const Auth = (req, res) => NextAuth(req, res, authOptions);

export default Auth;

Answer 2

Make sure to update the URI in the jwt callback with the following code snippet:

const response = await fetch(      `${process.env.NEXT_PUBLIC_API_URL}/api/auth/${account.provider}/callback?access_token=${account?.access_token}`);

Below is the setup for [...nextauth].js. Note: I'm utilizing authOptions instead of options to enable session retrieval on the server side in getServerSideProps.

import CredentialsProvider from 'next-auth/providers/credentials';
import GoogleProvider from 'next-auth/providers/google';
import axios from 'axios';

const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    CredentialsProvider({
      name: 'Email',
      type: 'credentials',

      async authorize(credentials) {
        const { email, password } = credentials;

        try {
          const { data } = await axios.post(
            `${process.env.NEXT_PUBLIC_API_URL}/api/auth/local`,
            {
              identifier: email,
              password: password,
            }
          );
          const user = await data;

          if (user) {
            return user;
          } else {
            return null;
          }
        } catch (err) {
          return null;
        }
      },
    }),
  ],

  session: {
    jwt: true,
  },
  secret: process.env.NEXTAUTH_SECRET,

  callbacks: {
    async session({ session, token, user }) {
      session.jwt = token.jwt;
      session.id = token.id;
      return session;
    },
    async jwt({ token, user, account }) {
      if (user) {
        if (account.provider !== 'credentials') {
          const response = await fetch(
            `${process.env.NEXT_PUBLIC_API_URL}/api/auth/${account.provider}/callback?access_token=${account?.access_token}`
          );
          const data = await response.json();

          token.jwt = data.jwt;
          token.id = data.user.id;
        } else {
          token.jwt = user.jwt;
          token.id = user.user.id;
        }
      }

      return token;
    },
  },

  pages: {
    signIn: '/auth/signin',
  },
};

const Auth = (req, res) => NextAuth(req, res, authOptions);

export default Auth;

In need of guidance to troubleshoot the error "Encountering problem while reading properties of undefined (jwt)"

Answer №1

Similar questions

What are some ways that next.js Link can prevent unnecessary server requests?

Creating a dynamic route that redirects to the same page using Nextjs

Implementing prop functions in Next.js applications

having trouble loading marker in react leaflet within next.js

Instructions on how to modify a document's content by its unique identifier using Firebase Modular SDK (V9)

Troubleshooting Next.js and Tailwind CSS Breakpoints: What's causing the

Using `import * as speechCommands from "@tensorflow-models/speech-commands"` is functional in React, but unfortunately does not operate correctly in NextJS

What could be causing the favicon in my Next.js application to not function properly?

Retrieving a single object in NEXT.JS and MongoDB can be achieved by returning just a single object

"Prisma encountered a roadblock when attempting to update a record, citing an issue with the unique constraint that resulted in

Implementing Dynamic Meta Keywords and Author in Next.js 13

Using NextJs to pass a prop as a className

Is it possible to utilize Apollo GraphQL with Next.js without the need for installing react-router-dom?

What Triggers a 400 Bad Request In Django Graphene and NextJs When Using the useMutation Hook?

When using React / Next.js, the .map() function may not rerender the output based on changes in the state array if the keys remain the same

Upcoming topics - The Challenge of Staying Hydrated at Basecamp One

There is a missing index.html file in my nextjs app, which seems to be causing an issue with Netlify

Tips for merging two arrays in NextJS?

Opinion sought: Which is better - creating a CustomWidget or tweaking the CSS? Implementing Surveyjs in conjunction with Next.js and Material UI

integrating the power of Next.js with Keystone.js