Auth.js v5 now requires a manual page reload in order to display session data using the useSession() function. Experience seamless authentication with this update in

Currently in the process of developing a website using NextJS 14 and Auth.js v5. The issue I'm facing pertains to the settings page post user login redirection. Depending on whether the user logs in using OAuth like Github or with Credentials, there should be varying degrees of settings that can be modified (such as enabling 2FA, etc.). However, at present, after logging in with credentials, the session does not update automatically and a site refresh is required to view the updated session data. This issue seems to be related to the useSession hook from auth.js, but resolving it has been challenging for me. As someone who is relatively new to NextJS and Auth.js, please pardon any imprecise language used. I welcome the opportunity to provide further clarification if needed. Provided below are images and code snippets. For the complete code, please refer to GitHub: https://github.com/EnXan/UTP. I have followed a tutorial where everything functions as expected: https://github.com/Hombre2014/nextjs-14-auth-v5-tutorial)

  1. LoginPage https://i.sstatic.net/2cx7oXM6.png

  2. Settings page after log in with credentials (no session available) https://i.sstatic.net/GPyzfPYQ.png

  3. Settings page after reloading https://i.sstatic.net/7wBKiVeK.png

  4. Settings page after log in with Github (no need to refresh page; everything works here) https://i.sstatic.net/JfNcsG42.png

settings (page.tsx)

Code Snippet Here

Root-Layout (layout.tsx)

Code Snippet Here

useCurrentUser-Hook

Code Snippet Here
typescriptauthenticationnext.jsnext-authokta-auth-js

Answer №1

After encountering an error, I resolved it by simply reloading the page upon hitting the submit button for SignIn.

  const resolveError = (values: z.infer<typeof LoginSchema>) => {
    setError("");
    setSuccess("");

    startTransition(() => {
      login(values)
        .then((data) => {
          window.location.reload();

          if (data?.error) {
            form.reset();
            setError(data.error);
          }

          if (data?.success) {
            form.reset();
            setSuccess(data.success);
            update();
          }

          if (data?.twoFactor) {
            setShowTwoFactor(true);
          }
        })
        .catch(() => setError("An error occurred!"));
    });
  };

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

Do we need to import Vue in every component when using Nuxt with TypeScript?

I recently integrated TypeScript into Nuxt using the guidelines provided in the documentation: However, I have a specific question regarding component setup. Should I always include import vue from "vue" and export default Vue.extend ({}); in al ...

typescriptvue.jsvuejs2nuxt.js

What is the best way to incorporate Tradingview's JavaScript into the render function of a React Typescript

I'm trying to incorporate some widgets into my Typescript React component. Here is the embed code export default class App extends React.Component { render(): ReactNode { return ( <div> Chart test <div className= ...

javascripthtmlreactjstypescripttradingview-api

Can you explain the distinction between @types/material-ui and the official @mui/types bundle?

When it comes to npm packages, I came across @types/material-ui and @mui/types. I'm aware that the former is backed by the Definitely Typed community, but what's the reasoning behind its existence when an official types package already exists? D ...

typescriptmaterial-ui

Safari on Mac/iPhone crashes when you click the back button on a Next.js page

On some versions of IOS, the context object is undefined. When checking the network tab, cached .json files in the browser disk cache may throw a "403" error when the back button is clicked. I have included a snapshot of the network tab for reference. The ...

reactjsnext.jssafariakamai

Issue with MUI Dialog: Struggling to pass the onClose function to onClick within dialog actions

Currently, I am in the process of developing a reusable component called Dialog which is based on MUI dialog. Below is the code snippet for this component: import React from 'react'; import { Dialog as MuiDialog, DialogProps, Button, Dia ...

reactjstypescriptmaterial-uidialogreact-typescript

A guide on retrieving TypeScript mongoose/typegoose schema

Here is a defined schema for an account class AccountSchema; Below is the model declaration for the account const AccountClass: Model<AccountSchema & Document>; class Account extends AccountClass; Why isn't this functioning as expected? ...

typescriptgenericsmongoosemetaprogrammingtypegoose

Endure the class attribute in Angular 5

My SearchComponent has a route (/search) and SearchDetailComponent has a route (/search-detail:id). In the SearchComponent, there is a searchbox (input field) where I can type any text to start a search. After loading the search results and navigating to ...

angulartypescriptangular5

Eliminate the eslint@typescript-eslint/no-unused-vars error in TypeScript when the index parameter is not utilized within a map function

Here's the code snippet in question: const reducer = (element:number, index: number) => [element]; //eslint-message. const positionsArray = $.map(this.positions, reducer); I am converting a Float32Array (this.positions) to a JavaScript array. The ...

typescripteslintmap-function

The inRequestScope feature seems to be malfunctioning and is not functioning as intended

Need help with using inRequestScope in inversifyJS For example: container.bind<ITransactionManager>(Types.MysqlTransactionManager).to(MysqlTransactionManager).inRequestScope() ... container.get<ITransactionManager>(Types.MysqlTransactionMana ...

javascripttypescriptexpressinversifyjs

Bringing together projects utilizing varying Typescript versions within Visual Studio 2015

When working with VS2015-SP2, imagine a solution that contains two typescript projects. One project is using version 1.5 and the other is using version 1.7. How will the compiler handle this situation? ...

typescriptvisual-studio-2015typescript1.5typescript1.7

How to access type properties in typescript without using the "this" keyword

Below is a snippet of code that I am working with: class Player implements OthelloPlayer { depth; constructor(depth: number) { this.depth = depth; } getMove(state: OthelloState) { return this.MinimaxDecision(stat ...

typescript

Tips on displaying hyperlinks within a text area in an Angular application

In my Angular application, I am facing an issue with displaying hyperlinks within a text area box for dynamic content. The hyperlinks are not recognized and therefore cannot be clicked. Can someone please advise on how to properly display hyperlinks with ...

javascripthtmlcssangulartypescript

Determine the Variable Type by Evaluating the Value of Another Variable

I am looking to implement the following functionality: document("post").insert({ ... } /* TYPE SHOULD BE AUTOMATICALLY DETERMINED BY TYPESCRIPT */ ); The document() function returns an object that includes methods like insert. The returned objec ...

typescript

Tips on saving a cookie using universal-cookie

I followed a solution on Stack Overflow to set a cookie in my React application. However, the cookie expires with the session. Is there a way I can make this cookie persist beyond the session so it remains even when the browser is closed and reopened? ex ...

javascriptreactjstypescriptcookiessetcookie

Sending Text Input Data from Angular Form to a Restful API

I'm currently working on a project where I need to send data from a reactive form to a REST API running on my local express.js server. The form consists of basic text input fields like name, surname, and email. When the form data is submitted, it is ...

javascriptangularresttypescriptexpress

Issue: ES Module NextJS Web3AuthConnector not found in required modules

Currently, I am working on a project with a NextJS (Typescript) setup that involves Express. My authentication methods include Moralis, Wagmi, and Web3Auth. While Metamask authentication is functioning properly, I encountered an issue when attempting to se ...

expressnext.jsmoralisweb3auth

Struggling to set up a full-page video background in Next.js, only to end up with a frustrating blank

I need assistance with implementing a full-page video background on the homepage of my Nextjs application. Currently, all I see is white space where the content should be displayed. As a newcomer to Nextjs, I believe I may have overlooked something obviou ...

reactjsvideobackgroundnext.js

Is there a method to implement retries for inconsistent tests with jest-puppeteer?

Currently, I am struggling with an issue where there is no built-in method to retry flaky tests in Jest. My tech stack includes Jest + TypeScript + Puppeteer. Has anyone else encountered this problem or have any suggestions for possible solutions? I attem ...

typescriptautomated-testsjestjspuppeteere2e-testing

Using an environment variable for the `projectId` in a Firebase config can cause it to malfunction

Something really strange is happening with my Firebase config object and Vercel environment variables. I have successfully built my entire Firebase config object using Vercel environment variables, but when I try to use an environment variable for the val ...

firebasenext.jsenvironment-variablesvercel

The element within the array object is not properly defined and is causing error messages to be displayed

Whenever I try to use Icons[link.label] in my const, I receive the following error message: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'iconsProps'. No index sig ...

javascriptreactjstypescriptnext.js