Status useSession() is Unauthenticated but has next-auth.session-token

[irsyaadbp]

Question 💬

Hello i setup next auth with CredentialsProvider

in local work perfectfully but when i deploy it to windows server the issues has found
when i login -> logout -> login the value of status from useSession() is unauthenticated
but the token next-auth.session-token already exists, you can see my image below

this is status from useSession()

this is the cookies

How to reproduce ☕️

This is my [...nextauth].js

export default NextAuth({
  session: {
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      type: "credentials",
      credentials: {},
      async authorize(credentials) {
        try {
          const { usercode, password } = credentials;
          const user = await login({
            usercode,
            password,
          });

          return user;
        } catch (error) {
          const errorMessage = error?.response?.data || null;
          throw new Error(errorMessage ? JSON.stringify(errorMessage) : error);
        }
      },
    }),
  ],
  callbacks: {
    jwt: async ({ token, user }) => {
      // Persist the BE access_token to the token right after signin
      if (user) {
        token.roles = user.roles;
        token.usercode = user.usercode;
        token.email = user.email;
        token.name = user.name;

        if (user.token) {
          token.accessToken = user.token;
        }
      }

      return token;
    },
    session: ({ session, token, user }) => {
      // add cookies jwt token from FE (callback jwt) to client side
      if (token) {
        session.user.roles = token.roles;
        session.user.email = token.email;
        session.user.name = token.name;
        session.user.usercode = token.usercode;
        session.user.accessToken = token.accessToken;
      }

      return session;
    },
  },
  events: {
    async signOut(message) {
      await logout(message.token.accessToken);
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/login",
  },
});

and this is my login function

    const { usercode, password } = values;
    const res = await signIn("credentials", {
      usercode,
      password,
      redirect: false,
    });

    if (res?.ok) {
      const url = new URL(res.url);
      const searchParams = url.searchParams;
      const callbackUrl = searchParams.get("callbackUrl");
      const redirectUrl = callbackUrl || "/dashboard";
      router.replace(redirectUrl);
    }

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[ivanberry]

Hi, did u fix this problem? I get same and even worse. After Sign and redirect back, the status is unauthenticated, but the dev env works smooth.

[lifeBalance]

I'm also having issues with the status. It remains as unauthenticated after successfully logging in, and only updates after I reload the page. My setup is simpler though.

[AspireOne]

Have you fixed it?

[dimabolgov]

I have the same issue.

[ekimcem]

I have the same problem...

[michaelcillo22]

I'm having the same issues.

[EduardoWAOF]

I'm having the same issues.

Exist a solution?

[michaelcillo22]

I got to fix mine by using a Prisma Adapter which defaults the session strategy to database. Did not have to set up any callbacks and i finally was able to use the useSession Hook that checks whether a session exists or not.

[michaelcillo22]

Hi, Did you set up a session callback in your[ …nextauth.js] ?

…

On Mon, Jan 16, 2023 at 7:32 PM Eduardo Fortuna ***@***.***> wrote: I'm having the same issues. Exist a solution? — Reply to this email directly, view it on GitHub <#5719 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AO4HWVEH4ZDE2EKEEWNHGBTWSXSA7ANCNFSM6AAAAAASYAQSIQ> . You are receiving this because you commented.Message ID: ***@***.***>

[EduardoWAOF]

[shakizwastaken]

bro that doesnt even make any sense wtf

[timjacksonm]

In my case when I was redirecting in the callback config I was getting this error. I changed my callback config to no longer redirect but instead to return true on successful authentication or return false.

callbacks: {
    async signIn({ account, profile }) {
      const { email_verified } = profile as GoogleProfile;
      if (account?.provider === 'google' && email_verified) {
        return true;
      }
      return false;
    },
  },

On your signIn() click handler you can pass in a callbackUrl to redirect to a different page on your site.

 signIn('google', { callbackUrl: 'http://localhost:3000/dashboard' })

I would say in OP's issue they would need to use the signIn() method from next-auth and use the callbackUrl.

[brett-autocode]

Thank you! This fixed my issue! When using CredentialsProvider, I changed the routing from using useRouter to using the callbackUrl when signing in

[Berdsen]

In my case it was a problem with the order of components in the entry _app.tsx
I had the SessionProvider wrapped around an OptionalAuth component, so the Session remained unauthenticated until a page reload.
After wrapping the SessionProvider into the OptionalAuth (kind of AuthGuard for components, which have an requiresAuth property set to true) component it finally worked as expected.

Before

<>
    <SessionProvider session={session}>
        <OptionalAuth>{children}</OptionalAuth>
    </SessionProvider>
</>

After

<>
    <OptionalAuth>
        <SessionProvider session={session}>{children}</SessionProvider>
    </OptionalAuth>
</>

[shahargl]

Has anyone solved it? I'm having the same issue :(

[SparkGB]

same issue :(

[FelipeSchiavini]

I encountered an issue while attempting to use callbacks for signing in and returning a redirect route. However, I managed to resolve the problem by returning a boolean value.

[Thijmen]

I'm also currently experiencing this. Running NextJS in next dev mode, works fine. However after creating a build and running next start, it does not work.

/api/auth/session endpoint returns logged in user. The data in useSession() is however status unauthenticated.

Verbose logging on NextAuth doesn't show anything obvious to look at...

[Thijmen]

I fixed it I think. In my _app.tsx I changed App.getInitialProps to App.getServerSideProps and returned the session. Strange that this did not pop up during development builds, I hope it helps some of you.

[Berdsen]

It seems that after a successful login the /session api is not called.
I could finally fix it in my project with executing a router.reload on successful login. That finally triggered the session call and the status became authenticated.

So I did something like the following in my LoginComponent

const router = useRouter();
const session = useSession();

useEffect(() => {
  if (session.status == 'authenticated') router.push('NEW_ROUTE');
}, [session]);

const onLoginSuccess = () => {
    router.reload();
}

Edit:
After further looking into this problem and checking on what happens on login and logout, I figured out, that on logout it works, because there is a redirect when giving something like callbackUrl in the signout method, which does internally a window.location.href setting

if (options?.redirect ?? true) {
    const url = data.url ?? callbackUrl
    window.location.href = url
    // If url contains a hash, the browser does not reload the page. We reload manually
    if (url.includes("#")) window.location.reload()
    // @ts-expect-error
    return
  }

So we use an internal library to execute the signin process on a different backend, I had to do this also on the signIn process, where I give in a callbackUrl and on successful login, I also execute a redirect via window.location.href to the success location and then the session gets correctly loaded.

[crapthings]

i've still got this

maybe there's no session passed to SessionProvider component?
i can't get session with APP Router.

'use client'

import { redirect } from 'next/navigation'
import { SessionProvider } from 'next-auth/react'
import { useSession } from 'next-auth/react'

function Auth ({ children }) {
  const { data, status } = useSession()

  console.debug('session status', status, data)

  if (status === 'loading') {
    return (
      <div>loading</div>
    )
  }

  if (status === 'unauthenticated') {
    return null
  }

  return children
}

export default function AuthWrapper ({ children }) {
  return (
    <SessionProvider>
      <Auth>
        {children}
      </Auth>
    </SessionProvider>
  )
}

so i can't use redirect here

[prashant-rockymountain]

still getting the same issue getting login successfully but status is unauthenticated in useSession hook

[NinaZurash]

same here

[kreonix]

same

[AmandineTournay]

same 😢

[vprud]

same

[beaver700nh]

same

[alexookah]

same

[beaver700nh]

I found a workaround by putting the session logic on SSR with another internal component on the client side containing the rest of the logic:

Server:

import { auth } from "@/auth";

export default async function Component() {
  const session = await auth();

  return <ComponentInner session={session} />;
}

Client:

export default function ComponentInner({ session }: { session: Session | null }) {
  console.log(session?.user);

  // logic
}

[sanayasfp]

My workaround involves implementing a session provider that fetches /api/auth/session whenever there's a change in the path.

"use client";

import React from "react";
import { Session } from "next-auth";
import { usePathname } from "next/navigation";

type SessionProviderProps = React.PropsWithChildren<{
  session?: Session | null;
}>;

const sessionContext = React.createContext<Session | null>(null);

export function SessionProvider({ session: initialSession = null, children }: SessionProviderProps) {
  const [session, setSession] = React.useState<Session | null>(initialSession);
  const pathname = usePathname();

  React.useEffect(() => {
    const fetchSession = async () => {
      if (!initialSession) {
        const fetchedSession = await fetch("/api/auth/session").then((res) => res.json());
        setSession(fetchedSession);
      }
    };

    fetchSession();
  }, [initialSession, pathname]);

  return <sessionContext.Provider value={session}>{children}</sessionContext.Provider>;
}

export function useSession() {
  return React.useContext(sessionContext);
}

[LuisLenzi]

Thanks dude! This solved my problem 🙌

[HiroakiLion]

Having the same issue, no matter what, when I use router.push or router.replace or even the callback from signIn, to redirect to any page after login, it doesn't pick up the new session from useSession until I do a manual reload of the page.
So instead of letting signIn auto-redirect me, or the router do the redirect, i did

window.location.href = path;

to force redirect reload and it works fine for now.
I don't know if this is okay solution though, if there is any other way, I'd like to know.

[beaver700nh]

I was trying to avoid full reloading because I'm using Next.js and wanted to use the routing feature to preserve some content like the nav bar when switching pages. So if I used a hack like that it would flash the whole page white.

[drew-pi]

I fixed this issue by creating a middleware.ts file in the root of my directory (at the same level as the app/ directory). My application doesn't let users enter the site until you login so my middleware setup was super simple. This is all of the code that I have

export { default } from "next-auth/middleware"

export const config = {
  matcher: ['/'], // Apply middleware to all routes or specify specific routes
};

You can modify what routes call the middleware before they are rendered by using the matcher. You can find more information here.

Hopefully this helps!

[loloDawit]

I run into the same issue and after intensive investigation, I found out, the direct approach we followed may not have worked due to several reasons related to how client-side and server-side data fetching and hydration work in Next.js, especially with the SessionProvider from next-auth/react.

Here are some potential reasons why it didn't work:

Server-Side vs. Client-Side Context

• SSR: When you fetch the session on the server side and pass it to SessionProvider, the session data might not be immediately available or properly hydrated on the client side. This can lead to a mismatch between the server-rendered HTML and the client-side React state.

• Client-Side Context: SessionProvider expects to manage the session state internally. When we provide the session from the server side, it may not trigger the necessary updates on the client side, leading to stale or unauthenticated states.

• Asynchronous Nature: The SessionProvider may rely on its internal mechanism to asynchronously fetch and manage session data. When the session is provided directly from the server, it might not align with this asynchronous process, leading to timing issues where the session appears as null or unauthenticated momentarily.

and so many cases ....

The fix

In the layout, I removed session from the SessionProvider and on my component, I used getSession inside a use useEffect

'use client';

import { getSession, signOut, useSession } from 'next-auth/react';
import React, { useEffect, useState } from 'react';

const SettingsPage = () => {
  // const session = useSession(); <--remove this
  
  const [session, setSession] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchSession = async () => {
      const session = await getSession();
      setSession(session);
      setLoading(false);
    };
    fetchSession();
  }, []);

Client-Side Session fetching fixed the Issue for me, because, by fetching the session directly on the client side using getSession, I was able to make ensure that the session data is always up-to-date and consistent with the client's state. This avoids potential issues with server-client synchronization. This also help me avoid the hydration mismatch issue because the session data is fetched and set directly in the client's React state after the initial render.

[DevkumarPatel]

I had this same issue. I removed the SessionProvider wrapper and applied the useEffect to get the session. So then this begs the question, why use SessionProvider wrapper, if it will not work.
For me, the sessionprovider wrapper only worked locally; on production, it stopped.

Also, I think, if you are using Netlify, then your application is running on edge, and SessionProvider may not work.

[sbassalian]

I encountered a similar issue where the useSession() hook status is "unauthenticated", but the next-auth.session-token is still present. The solution I implemented tries to refetch the session once to handle this edge case.

Here's the approach:

const session = useSession();

const [userId, setUserId] = useState(session.data?.user?.payload?.user_id);
const [count, setCount] = useState(0);

const fetchSession = async () => {
  const fetchedSession = await fetch("/api/auth/session").then((res) =>
    res.json()
  );
  await session.update(fetchedSession);
  setCount(1); // Ensure refetch only happens once
};

useEffect(() => {
  if (userId) return;
  const status = session.status;
  
  // Try to refetch session once if unauthenticated
  if (status === "unauthenticated" && count < 1) {
    fetchSession();
  }
  
  setUserId(session.data?.user?.payload?.user_id);
}, [session.status, count, session.data?.user?.payload?.user_id]);

Explanation:
This solution refetches the session once if the status is "unauthenticated", while checking that the session token is still available.
The refetch only happens once, controlled by the count state, ensuring no infinite loop occurs.
Let me know if this helps or if further improvements are needed!

[SU-I-KA]

updating the session after signing in will fix the problem

[armdevjs]

Issue Description

When conditionally rendering the SessionProvider in a Next.js App Router layout, useSession() incorrectly returns "unauthenticated" status despite having a valid next-auth.session-token cookie present.

Environment

• Next.js version: 14.x
• next-auth version: 4.x
• Using App Router

What happened

The application was showing users as unauthenticated even though:

1. A valid next-auth.session-token cookie was present in the browser
2. The session should have been valid
3. No errors were logged in the console

Root Cause

The issue was caused by conditionally rendering the SessionProvider in the layout. The provider was only being mounted under certain conditions, which prevented next-auth from properly initializing and validating the session token.

// Problem code in layout.jsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {someCondition ? (
          <SessionProvider>
            {children}
          </SessionProvider>
        ) : (
          children
        )}
      </body>
    </html>
  );
}

Solution

Always render the SessionProvider regardless of any conditions. If you need conditional authentication logic, handle it within components that consume the session, not by conditionally rendering the provider itself.

// Fixed code in layout.jsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>
          {/* Any conditional logic can go here */}
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

Additional Notes

• When using SessionProvider, it must be rendered consistently to maintain session state
• The provider is responsible for reading and validating the session cookie
• Conditional rendering disrupts the provider's ability to initialize correctly
• This issue is particularly subtle because the cookie exists but isn't being properly validated

This bug can be confusing to debug since the cookie is present but the session appears invalid. Always ensure authentication providers wrap your application consistently.