useSession doenst render content conditionally

[shahbaz4783]

When i logout successfully, the header still shows links which should only render when user in logged in.
It works after a reload.

This is the code for render:

'use client';

import { Button } from '@/components/ui/button';
import NavLink from '../ui/NavLink';
import { AUTH_NAV_ITEMS, loggedInExtraNav } from '@/constants/navigation';
import { UserProfileMenu } from '../shared/UserProfileMenu';
import Link from 'next/link';
import { useSession } from 'next-auth/react';

const AuthNavigation = () => {
  const session = useSession();
  console.log({ session });

  let authContent: React.ReactNode;

  if (session.status === 'loading') {
    authContent = null;
  } else if (session.data?.user) {
    authContent = (
      <div className="hidden items-center gap-8 md:flex">
        {loggedInExtraNav.map((data) => (
          <Link href={data.path} key={data.path} className="w-full space-y-8">
            <li className="flex cursor-pointer list-none items-center justify-between">
              <span>{data.icon && <data.icon />}</span>
            </li>
          </Link>
        ))}
        <li className="cursor-pointer list-none">
          <UserProfileMenu />
        </li>
      </div>
    );
  } else {
    authContent = (
      <div className="hidden gap-4 lg:flex">
        {AUTH_NAV_ITEMS.map((data, index) => (
          <NavLink key={index} href={data.path}>
            <Button variant={data.variant}>{data.title}</Button>
          </NavLink>
        ))}
      </div>
    );
  }

  return authContent;
};

export default AuthNavigation;

This image is when im logged In

This image is when im logged out, see how the auth links are still showing on header, but homepage content changed.

This image is when i reload the page

[oleksiimazurenko]

I have the same problem, I don't know how to solve.

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