How to update session on click (update doesn't work)

[angelod1as]

I started this as an Issue but couldn't reproduce, so it was closed. I decided to ask a question here then.

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 237.63 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
    Yarn: 1.22.22 - ~/Documents/GIT/autoservice-frontend/node_modules/.bin/yarn
    npm: 9.6.7 - ~/.cache/fnm_multishells/28587_1716800537292/bin/npm
    pnpm: 8.15.4 - ~/.cache/fnm_multishells/28587_1716800537292/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.4.1
  npmPackages:
    next: ^14.2.3 => 14.2.3
    next-auth: ^4.24.7 => 4.24.7
    react: ^18.3.1 => 18.3.1

I'm using NextJS (as seen above) with an integration of Next-Auth and Keycloak.

this is the component code:

export const MarketingConsent = () => {
  const { data, update } = useSession()

  const handleChange = async () => {
    const newState = !user?.updatedInfo

    if (user?.id) {
      console.log(user?.updatedInfo) // false

      // Here we call the server to update the info in the database
      // it works properly, the database changes.
      await updateInfoInServer({ active: newState })
      
      console.log(user?.updatedInfo) // still false

      // How to update the user information? The server call succeeds — the database is updated — but the user data from useAuth is not updated. In order to see the correct data (updatedInfo === true) I need to logout and login again.

      // Here I try the update function, as the docs say.
      await update({ ...user, updatedInfo: newState })

      // according to the docs, the update function should've updated the "user" session.
      // But here it still returns false
      console.log(user?.updatedInfo) // still false
    }
  }

  return (
    <Checkbox
      id="update-account"
      name="update-account"
      checked={!!user?.updatedInfo}
      onChange={handleChange}
    >
      Update account
    </Checkbox>
  )
}

As seen above, I have a Checkbox component that's controlled by whatever user.updatedInfo is. Let's suppose it first returns false.

When the user clicks the checkbox, we call an API that updates the user data on the server and it returns 204 if successful.

The order would be:

• checkbox state is the state from user.updateInfo
• user clicks the checkbox
• a server call is made
• the information is changed
• we update the session with the new data
• the checkbox state changes

Right now calling update does not change the user session — not even when I refresh the page after clicking.

I need to totally logout and login to have the updated information.

How to force next-auth to refetch the user from the server entirely?

[oleksiimazurenko]

This is how I fixed the problem.

"use client";

import { Session } from "next-auth";
import { useSession } from "next-auth/react";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { authRoutes, publicRoutes } from "../routes";

export function useCustomSession() {
  const { data: lieSession, status, update } = useSession();
  const [truthSession, setUpdatedSession] = useState<Session | null>(null);

  const pathname = usePathname();

  //TODO: When logging out of your account, the session is not updated. An interesting fact is that the update occurs if you lose the focus of a browser tab and go back.
  useEffect(() => {
    update().then((s) => {
      setUpdatedSession(s);
    });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const session =
    publicRoutes.includes(pathname) || authRoutes.includes(pathname)
      ? truthSession
      : lieSession;

  return { session, status, update };
}