signOut not refreshing app and useSession does not get state from server side

[chrishj59]

In a client-only page, I call a server action using the signIn method. All other client components use the hook useSession are updated showing authorised options.

When call the signOut method the client components are not updated with the new state. It is only possible to see the user has logged out by refreshing the page from the browser.

I notice there is refresh flicker on login but no such flicker on logout.
`export async function signIn() {
return await auth.signIn('github');
}

export async function signOut() {
await auth.signOut();
}

Code to check status:
const session = useSession(); session.status
Versions: used:
"react": "18.2.0"
"next": "^14.2.4"
"next-auth": "^5.0.0-beta.19"

How do I get the app to recognise the user has logged out?

[MhL5]

have you tried signOut function from "next-auth/react" ?

import { signOut } from "next-auth/react"
 
export function SignOut() {
  return <button onClick={() => signOut()}>Sign Out</button>
}

[chrishj59]

In v5 Beta, the signOut hook in client only component is not available

[MhL5]

it is available
for client components you can use signOut function from "next-auth/react"

import { signOut } from "next-auth/react"

docs: https://authjs.dev/getting-started/session-management/login

[chrishj59]

When I call signout I get the error shown below:
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
await (async)
logout @ AppProfileSidebar.tsx:24
onClick @ AppProfileSidebar.tsx:60
callCallback @ react-dom.development.js:20565
invokeGuardedCallbackImpl @ react-dom.development.js:20614
invokeGuardedCallback @ react-dom.development.js:20689
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:20703
executeDispatch @ react-dom.development.js:32128
processDispatchQueueItemsInOrder @ react-dom.development.js:32160
processDispatchQueue @ react-dom.development.js:32173
dispatchEventsForPlugins @ react-dom.development.js:32184
eval @ react-dom.development.js:32374
batchedUpdates$1 @ react-dom.development.js:24953
batchedUpdates @ react-dom.development.js:28844
dispatchEventForPluginEventSystem @ react-dom.development.js:32373
dispatchEvent @ react-dom.development.js:30141
dispatchDiscreteEvent @ react-dom.development.js:30112
Show 14 more frames
Show less

[chrishj59]

The documentation you linked to seems to relate to V4 and not the V5

[MhL5]

its v5 document from https://authjs.dev/ ( they rebranded to auth.js and documentation for v5 is in auth.js website )
this is my code using "next-auth": "^5.0.0-beta.19" with signOut function from "next-auth/react"
works with no issue
I don't know why you are getting these errors but it should work

"use client";

import { Session } from "next-auth";
import Image from "next/image";
import profilePicPlaceholder from "@/assets/profile-pic-placeholder.png";
import { signIn, signOut } from "next-auth/react";

type UserMenuButtonProps = {
  session: Session | null;
};

export default function UserMenuButton({ session }: UserMenuButtonProps) {
  const user = session?.user;

  return (
    <div className="dropdown dropdown-end">
      <label tabIndex={0} className="btn btn-circle btn-ghost">
        {user ? (
          <Image
            src={user?.image || profilePicPlaceholder}
            alt="Profile picture"
            width={40}
            height={40}
            className="w-10 rounded-full"
          />
        ) : (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            className="inline-block h-5 w-5 stroke-current"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
            />
          </svg>
        )}
      </label>

      <ul
        tabIndex={0}
        className="menu dropdown-content menu-sm z-30 mt-3 w-52 rounded-box bg-base-200 p-2 shadow"
      >
        <li>
          {user ? (
            <button onClick={() => signOut({ callbackUrl: "/" })}>
              Sign Out
            </button>
          ) : (
            <button onClick={() => signIn()}>Sign In</button>
          )}
        </li>
      </ul>
    </div>
  );
}

[andreachiera]

Hi, I have a similar problem using a Custom Provider.
I'm using the following version of next and next-auth:

"next": "15.0.0-rc.0",
"next-auth": "^5.0.0-beta.19"

And I have this hierarchy in terms of components:

• Layout
• Client Component with a SessionProvider
• Client Component that uses the useSession() hook from next-auth/react, that is configured to show a string when session changes
• Normal Page Server side that uses the SignOut obtained by NextAuth in a server function

But, when I trigger the signOut function, the page component changes, but not the parent. It seems that the useSession hook is not updated. It happens after a while, maybe there is a polling mechanism to update the session in a sort of cache on client components??? But in each case, after a SignOut using also the redirectTo and redirect options, the parent client component doesn't receive immediately an update.

How can I resolve that triggering an update on all the client component that use the useSession from "next-auth/react"?

[chrishj59]

I have found a solution - use both server-side and client logout on the action for the signout button.
import
import { useSession, signOut as nextAuthSignOut } from 'next-auth/react';

Signout Button on both server actions and client side

<form
	action={async () => {
			await actions.signOut();
			await nextAuthSignOut({ redirect: false });
    }}>
	<Button type="submit">Sigin out</Button>
  </form>

[chrishj59]

This is a known issue.
I have a menu in a layout component on the left and the signout button in another layout component on the right side of the page.
The menu is now displayed correctly according to the authentication state.

[dikaaajs]

maybe you forgot to add "use client" on the top of code. signOut is just only for client component. this code is work in my case
<button onClick={() => signOut()} className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" > Sign out </button>

[chrishj59]

The sign out action occurs fine. It is that other other ‘client only’ pages are not updated with current authentication status immediately

[andreachiera]

Same problem described by @chrishj59 happens to me. Client component are non updated immediately after signOuy. To obtain that I have to use a redirectUrl that however triggers a complete page refresh. Otherwise other client components don't trigger rerender.

[habahabahaba]

I am also experiencing this issue.

    "next": "14.2.7",
    "next-auth": "5.0.0-beta.20"

To me, It looks like a bug with the next-auth/react/useSession.

I forgot to add: next-auth/react/useSession does eventually update, but it happens a few minutes later or after the page refresh or after switching to a different tab and then switching back.

[BobbaruK]

I'm also running into a similar issue. When I log in from a server function, the SessionProvider doesn’t update the session state correctly. However, if I perform the login or logout using client-side functions like signOut from next-auth/react, everything works as expected and the session updates properly.

As a workaround, after logging in from a server function, I chain a .then() to reload the page, which forces the session to refresh. For logging out, I use the signOut function in a client component, which updates the session without any issues.

I’ve also noticed behavior similar to what you described:

I forgot to add: next-auth/react/useSession does eventually update, but it happens a few minutes later, after a page refresh, or after switching to a different tab and then switching back.

If anyone has insight into how to ensure the SessionProvider updates correctly from server-side functions without needing a full page reload after login, I’d really appreciate the guidance!

Thanks!

[kris-park]

I have a similar issue in that useSession is not reactive and only outputs it's value once on page load. My workaround is to call getSession in a useEffect hook. i.e:

'use client';

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

export default function ClientSessionTest() {
  const { data: session } = useSession();
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const checkSession = async () => {
      const session = await getSession(); // Re-fetch session
      session && session?.user ? setIsLoggedIn(true) : setIsLoggedIn(false);
    };

    checkSession();
  }, [session]);

  if (isLoggedIn) {
    return <p className="text-green-500">You are logged in, welcome!</p>;
  }

  return <p className="text-red-500">You are not authorized to view this page!</p>;
}

[aaron-mota]

Same issue still occurring -- client component session state not updating when using signOut from const { ..., signOut } = NextAuth(config) (auth.ts) as server action.

next-auth: "beta" (v5)

One option: only use signOut from next-auth/react whenever signing out
Another option: chrishj59's solution (aka still using next-auth/react signOut 😩)

[alexmondaini]

I have the same issue using a custom provider too, is this going to be addressed ?

[satishkumarsajjan]

Still the problem occurs. The signOut is not working for both client side and server side.

[chinazhangyujia]

Thanks @chrishj59 's solution works. I have tested locally. These are the code

"use client";
import { useSession, signOut as nextAuthSignOut } from "next-auth/react";

const { data: session, status } = useSession();
const user = session?.user as User;

const handleSignOut = async () => {
    await userSignOut();
    await nextAuthSignOut({redirectTo: "/"});
  };

return user === null ? <button>login<button> : <button>logout<button>

in the server side file

"use server";

import { signIn, signOut } from "@/auth";


const userSignOut = async () => {
  await signOut({redirect: false});
};

you need to put redirect: false to the server side signout so that page won't auto refresh and the second line in the client code await nextAuthSignOut({redirectTo: "/"}); can be executed.

[ahmed-fawzy99]

How come this is a closed issue? The current solution is just a workaround.