Session Data Inconsistency on Initial Login in NextAuth v5 Beta

[0xTanzim]

Environment

  System:
    OS: Windows 11 10.0.22631
    CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
    Memory: 2.47 GB / 15.83 GB
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.3527

Reproduction URL

https://github.com/TanzimHossain2/LwsKart

Describe the issue

The session data should be consistently available in both the root layout and client components immediately after login without requiring a hard reload.

After login I get this data in the console... The root layout component correctly logs the session data

---

But in the client-side console Log I get no data until the hard Reload. The client component logs an unauthenticated state:

---

After hard reload I get the expected data

Additional Information:

• This issue occurs only immediately after logging in using credentials. A hard reload of the page resolves the issue and the session data is correctly reflected in the client component.
• It seems the session state is not being correctly propagated to the client components on initial login.

Attempts to Resolve:

• Verified the session data in the root layout.
• Ensured the <SessionProvider> is correctly wrapping the application.
• Attempted to force a state update after login, but the issue persists.

How to reproduce

1. Set up a Next.js application with NextAuth v5 Beta.
2. Configure authentication using credentials.
3. Log in using valid credentials.
4. In the root layout component, use const session = await auth(); and log the session data.
5. Pass the session data to the <SessionProvider session={session}> in the _app.js or equivalent.
6. In a client component, log the session data using the useSession hook.

Expected behavior

The session data should be consistently available in both the root layout and client components immediately after login without requiring a hard reload.

After login I get this data in the console... The root layout component correctly logs the session data

---

But in the client-side console Log I get no data until the hard Reload. The client component logs an unauthenticated state:

---

After hard reload I get the expected data

[fahminurk]

same issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[0xTanzim]

same issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

---- I create custom provider to resolve this. but it need to fix

[Damianvit]

add "as Adapter" as bellow and see if there will be a change. // @/auth.ts import NextAuth from "next-auth"; import GitHub from "next-auth/providers/github"; import Google from "next-auth/providers/google"; import { MongoDBAdapter } from "@auth/mongodb-adapter"; import clientPromise from "./lib/db"; import Credentials from "next-auth/providers/credentials"; import bcrypt from "bcryptjs"; import { getUserFromDb, getUserByEmail } from "@/data/user"; import { Adapter } from "next-auth/adapters";

export const { handlers, auth, signIn, signOut } = NextAuth({ adapter: MongoDBAdapter(clientPromise) as Adapter,

[0xTanzim]

add "as Adapter" as bellow and see if there will be a change. // @/auth.ts import NextAuth from "next-auth"; import GitHub from "next-auth/providers/github"; import Google from "next-auth/providers/google"; import { MongoDBAdapter } from "@auth/mongodb-adapter"; import clientPromise from "./lib/db"; import Credentials from "next-auth/providers/credentials"; import bcrypt from "bcryptjs"; import { getUserFromDb, getUserByEmail } from "@/data/user"; import { Adapter } from "next-auth/adapters";

export const { handlers, auth, signIn, signOut } = NextAuth({ adapter: MongoDBAdapter(clientPromise) as Adapter,

adapter can't be used in middleware, if you use an adapter it isn't supported at edge run time... https://authjs.dev/guides/edge-compatibility

[emre-turan]

As far as I understand, auth v5 still does not support the update session on the server. To trigger the session callback, a hard refresh is required to get the updated session information from the server, which is not ideal. I'm also looking for a proper solution.

[mhdizmni]

I tried creating my custom useUser hook using SWR to refetch the user on interval from /api/auth/session but that's a burden at the moment. not very pragmatic

[SpinBoxx]

Any news on this ? I have the same probleme as you @TanzimHossain2

[0xTanzim]

@SpinBoxx no bro.... You can create your own provider and set valu from layout and provider receive props. I have try and get value...

[SpinBoxx]

@SpinBoxx no bro.... You can create your own provider and set valu from layout and provider receive props. I have try and get value...

Can you give me more detail for tthis pls ? I created my custom provider but cant get my session with useSession

[0xTanzim]

@SpinBoxx I am sorry for late reply...

You can follow those steps.

Frist create a provider:

Then send the props

[sideBeaze]

@SpinBoxx I am sorry for late reply...

You can follow those steps. ....

If I understand correctly, using await auth() in the root layout opts your entire app out of using any SSG pages?

[ws-rush]

I've encountered this issue as well, and I wanted to share that it seems to be intermittent. Sometimes the functionality works as expected, and other times it doesn't, without any apparent changes on my end. This makes it quite a tricky bug to reproduce and diagnose.

As a temporary workaround, as @SpinBoxx mentioned, you can write a custom provider. Here's an example of how I've implemented it:

// FactoriesSessionProvider.tsx
'use client'

import React, { createContext, useContext } from 'react'

const FactoriesSessionContext = createContext({})

export const useFactoriesSession = () => useContext(FactoriesSessionContext)

export function FactoriesSessionProvider({ children, session }: any) {
  return (
    <FactoriesSessionContext.Provider value={session}>
      {children}
    </FactoriesSessionContext.Provider>
  )
}

// layout.tsx
const Root = async ({ children }: Props) => {
  const session = await auth()

  return (
    <FactoriesSessionProvider session={session}>
      {children}
    </FactoriesSessionProvider>
  )
}

For those who want to fully depend on SSG, I think it might be better not to depend on next-auth at all.

I hope this information helps in pinpointing the root cause and provides a useful workaround for now. Let me know if there's any specific data or logs I can provide to assist further.

[0xTanzim]

@ws-rush It's important not to fully depend on a library. Sometimes we need to manually perform tasks, such as creating a custom context.

[peccaa]

Jepp.. I have to reload the page to get the session on a client component. 🥴

"next": "14.2.15",
"next-auth": "^5.0.0-beta.20",

workaround with the update function, I suppose this refetches the session and sync it with the server-side session.

"use client";

import { useSession, signOut } from "next-auth/react";
import { useEffect } from "react";

export default function ProfilePage() {
  const { data: session, status, update } = useSession();

  useEffect(() => {
    if (status === "unauthenticated") {
      update()
        .then(() => {})
        .catch(console.error);
    }
  }, [status, update]);

  if (status === "loading") {
    return <div>Loading...</div>;
  }

  if (!session) {
    return <div>nothing....</div>;
  }

  return <div>{
  JSON.stringify(session.user)
  <Button
        size="sm"
        onClick={async () =>
          await signOut({ redirectTo: "/login" })
        }
      >
        client logout
      </Button>
  }</div>
}

[0xTanzim]

@peccaa if your problem is that you need to reload the page every time to get the session data, you can create a custom provider. Look up my previous discussion. You can try.

[peccaa]

Hi @TanzimHossain2, thanks for your response! 😊 I’m curious, why is this issue happening now? It was working fine before. Could it be related to using Credentials as the only provider?

You mentioned that adding an extra Context provider helps resolve the problem. Could you explain why and how this works? From what I can see, the Context you’re referring to doesn’t seem to be doing much, or am I missing something?

Additionally, why go for the Context approach when using the update() function from useSession() also resolves the issue, even though the session should work without needing it?

Thanks in advance for clarifying! Best regards

[0xTanzim]

@peccaa You raised a good question. I appreciate your thoughtfulness. I am not sure why this issue arose; it was a bug in v5 beta. I use these Context providers to bootstrap the application. The root layout loads the user session data and makes it available to all top-level components throughout the application.

I am using the next auth provider, but it did not provide the expected behavior. If you read my issue carefully, you will understand the main problem.

You mentioned that the update() function can resolve this issue, but my question is: did you resolve my issue? The update function is triggered when an event fires; it is used to update the session data. However, when the application is bootstrapped and the root layout needs to trigger the update() function, does that make sense?

You also asked why I use context. I use context to store data throughout the application. You can use another state management solution like Redux, Zustand, or Easy-Peasy for state management, but I prefer to use React's built-in native support. I hope this clarifies things for you.

[monterourena]

I implemented a modified version of the workaround suggested by @peccaa. It may not cover all use cases, but it worked well for mine. I hope it helps some of you experiencing this issue.

import { Session, User } from 'next-auth'

/**
 * Represents a fully authenticated session with a guaranteed user object.
 * This extends the base Session type to ensure the user property is always present
 * and fully typed, rather than being optional.
 */
interface AuthenticatedSession extends Session {
  user: User
}
interface UseAuthenticatedSessionConfig {
  /**
   * Maximum number of retry attempts to refresh the session.
   * If undefined, will retry indefinitely.
   */
  maxRetries?: number
}
/**
 * The return type for the useAuthenticatedSession hook.
 * @property session - The authenticated session data with guaranteed user information
 * @property isUpdating - Whether the session is currently being refreshed/updated
 * @property error - Any error message that occurred during session handling, or null if no error
 */
interface UseAuthenticatedSessionResult {
  session: AuthenticatedSession
  isUpdating: boolean 
  error: string | null
}
/**
 * Custom hook for handling authenticated sessions in protected routes.
 *
 * This hook is specifically designed for routes where we know the user is already authenticated,
 * but we need to ensure the session data is fully loaded before rendering content.
 *
 * This hook implements a workaround by automatically attempting to refresh the session
 * when an unauthenticated state is detected in a protected route context. It will:
 * 1. Monitor the authentication status
 * 2. Automatically retry session refresh if unauthenticated
 * 3. Implement configurable retry attempts
 *
 * @param config - Configuration options for the hook behavior
 * @param config.maxRetries - Maximum number of retry attempts (no limit if undefined)
 *
 * @returns Object containing session data, loading state and potential error
 *
 * @example
 * ```tsx
 * // Basic usage in a protected route component:
 * const { session, isUpdating, error } = useAuthenticatedSession({
 *   maxRetries: 5
 * })
 *
 * if (error) {
 *   return <div>Error: {error}</div>
 * }
 *
 * if (isUpdating) {
 *   return <LoadingSpinner />
 * }
 *
 * return <div>Welcome {session.user.name}</div>
 * ```
 */
export const useAuthenticatedSession = ({ maxRetries }: UseAuthenticatedSessionConfig = {}): UseAuthenticatedSessionResult => {
  const { data: session, status, update } = useSession()
  const [isUpdating, setIsUpdating] = useState(status !== 'authenticated')
  const [retryCount, setRetryCount] = useState(0)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    if (status === 'unauthenticated') {
      if (maxRetries !== undefined && retryCount >= maxRetries) {
        setError(`Failed to authenticate after ${maxRetries} attempts`)
        setIsUpdating(false)
        return
      }

      update()
        .then(() => {
          setRetryCount((count) => count + 1)
        })
        .catch((err) => {
          setRetryCount((count) => count + 1)
        })
    }

    if (status === 'authenticated') {
      setIsUpdating(false)
      setError(null)
    }
  }, [status, update, maxRetries, retryCount])

  return { session: session as AuthenticatedSession, isUpdating, error }
}

[ricardomarsanc]

Having this exact same problem. I'm unable to get the session data after logging in without a hard reload unless I perform an update operation as some people was suggesting in this thread. The custom Provider didn't work for me, as the session in the RootLayout is not being update properly either, so I is not correctly propagated.

Is there any way of doing a simple request for getting the updated session right after login?

[0xTanzim]

Having this exact same problem. I'm unable to get the session data after logging in without a hard reload unless I perform an update operation as some people was suggesting in this thread. The custom Provider didn't work for me, as the session in the RootLayout is not being update properly either, so I is not correctly propagated.

Is there any way of doing a simple request for getting the updated session right after login?

Consider creating your own provider to replace the default one. Test it out and let me know if it works! Check my screenshot

[ricardomarsanc]

Consider creating your own provider to replace the default one. Test it out and let me know if it works! Check my screenshot

The problem is that I'm unable to get the updated session in the RootLayout as it is not re-rendering when the user logs in unless I force a hard reload, and once I do that, the default "SessionProvider" works fine.

If I cannot get the session in the RootLayout, it doesn't matter if I create a custom provider or not, right? "session" will be null anyway.

[0xTanzim]

Consider creating your own provider to replace the default one. Test it out and let me know if it works! Check my screenshot

The problem is that I'm unable to get the updated session in the RootLayout as it is not re-rendering when the user logs in unless I force a hard reload, and once I do that, the default "SessionProvider" works fine.

If I cannot get the session in the RootLayout, it doesn't matter if I create a custom provider or not, right? "session" will be null anyway.

https://github.com/nextauthjs/next-auth/issues/11034#issuecomment-2201664598 try this method once and check is it solve your problem or not

[benediktdertinger]

Any plans to actually resolve this (instead of using shaky workarounds)?

[DavidCodina]

This issue has been around for a real long time. See here: https://github.com/nextauthjs/next-auth/issues/9504

The cleanest solution is probably to attach and update the key prop on the SessionProvider:

'use client'

import { SessionProvider as NextAuthSessionProvider, SessionProviderProps } from 'next-auth/react'

export const SessionProvider = ({ children, ...otherProps }: SessionProviderProps) => {
  const { sessionKey } = useAppContext()
  return (
    <NextAuthSessionProvider {...otherProps} key={sessionKey}>
      {children}
    </NextAuthSessionProvider>
  )
}