Troubleshooting Next.js 14 JWT Session Error in Conjunction with Next Auth - addressing a type

Recently, I delved into working with Next.js 14 and Next Auth 5 beta. However, every time I attempt to log in, I encounter the following error: [auth][error][JWTSessionError] [auth][cause]: TypeError: Cannot read properties of undefined (reading 'username'). Initially, I followed a tutorial that did not utilize TypeScript, which worked fine, but as a developer, I need to incorporate TS.

Below is my auth.ts:

import "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { connectDb } from "./lib/utils";
import { User } from "./lib/models";
import bcrypt from "bcrypt";
import { UserType } from "./lib/types";
import NextAuth, { NextAuthConfig } from "next-auth";

// Other module declarations...

// Login function and authConfig setup...

export const { signIn, signOut, auth } = NextAuth(authConfig);

The specific screenshot displaying the error can be viewed here: https://i.sstatic.net/ipvBm.jpg

Upon checking, it appears that the user retrieval process and token manipulation were successful based on console logs. Unsure of the next steps to resolve this issue, any assistance would be greatly appreciated.

Work-in-progress repo: https://github.com/CzechCoder/dashboard_next/tree/main

Answer №1

It seems that you are currently utilizing "Next Auth 5", but your current configuration is set up for v4. In version 5, the setup should look like this:

import NextAuth from "next-auth";

export const {
  handlers: { GET, POST },
  auth,
  signOut,
  signIn,
  update,
} = NextAuth({
  adapter: // if you are using an adapter,

  providers: [
    // add providers here 
  ],
  callbacks: {
   // add callbacks here
  },
});

We recommend following the upgrade-to-v5 guide for a smooth transition.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with script tag not loading content in Next.js, even though it works perfectly fine in React

Currently, I am attempting to utilize a widget that I have developed in ReactJS by utilizing script tags as shown below- React Implementation import React from "react"; import { Helmet } from "react-helmet"; const Dust = () => { ...

What is the best way to set an array as the value for a state variable?

Looking at my function, I have the following situation: execute(e) { let { items } = this.context; let array: number[] = []; for (var i = 0; i < 2; i++) array = [...array, i]; this.setState( { items: array, } ) ...

react-router: The 'history' type is not found in the current context

Here is some code snippet from App.tsx: interface AppProps{ history: any } export default class App extends React.Component<AppProps,...> { public state = { target: this.props.history.push('/') }; private route() { if (! ...

Upon updating AngularFire, an error is thrown stating: "FirebaseError: Expected type 'Ea', but instead received a custom Ta object."

I have recently upgraded to AngularFire 7.4.1 and Angular 14.2.4, along with RxFire 6.0.3. After updating Angular from version 12 to 15, I encountered the following error with AngularFire: ERROR FirebaseError: Expected type 'Ea', but it was: a c ...

What methods can be used to extract information from the applications uploaded/deployed on the Solana blockchain?

I've been attempting to retrieve data from the Solana blockchain, but I keep encountering errors and I'm unsure of how to proceed. After writing a program, building it, deploying it, and running test cases using Anchor, I now want to utilize Rea ...

Creating a custom autocomplete search using Angular's pipes and input

Trying to implement an autocomplete input feature for any field value, I decided to create a custom pipe for this purpose. One challenge I'm facing is how to connect the component displaying my JSON data with the component housing the autocomplete in ...

What is a dynamic route that does not include a slash?

I currently have a Next.js application set up with an SSR component that includes routes like /product1232312321. Previously, my solution was to create two folders: one named product and another nested folder inside it called [id]. Then I would redirect f ...

Can you explain the significance of the | symbol in TypeScript?

My journey with TypeScript is just beginning, and I recently encountered the symbol | while working on a problem in LeetCode using Typescript. I believe it has something to do with defining variable types. Can anyone provide more insight into this? /** ...

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

I have a challenge where I need to hide forms in a list if they are empty. These forms contain string values. I attempted to use *ngIf but unfortunately, it did not work as expected and empty fields are still visible in the list. How can I address this iss ...

Why is it necessary to merge an interface with a function when using the new keyword?

Assuming that the setting noImplicityAny is enabled. Consider the following: function Bar() { this.f = 100; } The following code snippet will not function as expected: let x = new Bar(); An error message will be displayed: 'new' expre ...

Modifying a property in a nested layout through a page in Next.js 13

Currently, I am facing a challenge in updating the page title within a nested layout structure. app/docs/layout.tsx: export const DocsLayout = ({children}:{children: React.ReactNode}) => { return ( <> <header> ...

Error: Could not find module: Unable to locate 'rxjs/add/observable/throw' in 'D:AngularhttpErrorHandlingExamplesrcapp'

I'm working on an Angular project to practice error handling, but I encountered an issue when trying to import the 'throw' module. The error message reads as follows: Error Message: "ERROR in ./src/app/employee.service.ts Module not found: E ...

Angular SwitchMap is a powerful operator that allows you

I am currently utilizing the mat-table component from angular material, in conjunction with pagination features. Whenever a user inputs text into the search field, a filter method is activated to send the text, page size, and current page to the backend f ...

Utilizing Typescript to Retrieve Keys of Property Arrays in React

My Homepage sends a modal component a profile in this manner. <ProfileOverviewModal open={openProfile} onClose={closeAllModals} onCreateProfile={onCreateProfile} profile={state.profil} /> Within my ProfileOverviewModal.tsx file, ...

Navigate to a different route in AntD Table by clicking on it

I am currently implementing React Router in my navigation component. My goal is to enable users to navigate from screen Y to screen X when they click on a table element. In the past, I achieved this by using "this" command but it seems that it does not ...

"Optimize Your Data with PrimeNG's Table Filtering Feature

I'm currently working on implementing a filter table using PrimeNG, but I'm facing an issue with the JSON structure I receive, which has multiple nested levels. Here's an example: { "id": "123", "category": "nice", "place": { "ran ...

Why is the scroll-to-top feature not functioning properly in Next.js Link when I switch routes?

My issue involves the next/link feature where the scroll to top functionality is not working when I change routes. <Link href="/some-page" scroll={false}> Go</Link> Does anyone know how to fix this problem? I have tried several metho ...

What is the method for developing a Typescript-connected High-Order React Component with Redux?

I am looking to develop a React Higher-Order Component that can safeguard routes within my application from unauthorized users without an access token. I aim to use this HOC to wrap a Component like so in the parent component: <Route exact path ...

Error: Cookie cannot be set due to headers already being sent

Here lies my code snippet import { Request, Response } from "express"; import { database } from "firebase-admin"; async function updateAccessToken( req: Request, res: Response, db: database.Database ) { try { await db ...

Tips for configuring TypeScript in a monorepo to successfully compile private packages

I have configured a monorepo using turborepo that includes Nestjs for the backend and Nextjs for the frontend. To reuse prisma definitions, I separated them into their own package with its own tsconfig. In the index file of my database package where prism ...