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);
}