all

I am trying to show log in or log out button depending on whether the user is logged in or not in header component.

My approach

• in the header component i am simply checking if the session cookie exists.
• if the cookie exits, render logout
• if not, render login button and signup

Where is the header

• in the root layout because it is persistent throughout the app.

problem

• at first I had the header file be a server component to check the cookie, but the problem with that was that server components dont have a state, meaning the header will now “react” to logging in or logging out, it will just render the button depending on the first mount only

The header as a Server component :

import React from 'react'
import Typography from "@mui/material/Typography";
import "./navbarHeader.css"
import Link from 'next/link';
import LogoutButton from "./logoutButton.jsx"
import { cookies } from 'next/headers';
const navbarHeader = () => {
  const session = cookies().get("session")?.value;
    const isAuthenticated = session? true: false;
  console.log(isAuthenticated)
  return (
    <div className = "navbar-header">
      <div className='Nav-header-buttons'>
        {!isAuthenticated&&<Link className='button-28' href="/signup"> اشترك</Link>}
        {!isAuthenticated&&<Link className='button-28' href="/login"> تسجيل الدخول</Link>}
        { isAuthenticated && <LogoutButton></LogoutButton>}
      </div>

        <Typography variant="h1" component="h2">
          <Link className='logo' href="/"><span className='red'>365</span> News</Link>
          </Typography>
    </div>
  )
}

export default navbarHeader

• so, for example, if isAuthenticated was true when mounting, it will show the sign up and the log in button but not the logout. however even when pressing the log out and deleting the cookie, it wouldnt show the log out button because there’s no state, the component will not re run to check the cookie again.

so, i changed it to a client component to have a state and it worked…..for logout button, so i check the cookie, and if hit logout, the cookies gets deleted and the state changes which causes a re render and works fine

The client component Header :

"use client"
import React, { useEffect, useState } from 'react'
import Typography from "@mui/material/Typography";
import "./navbarHeader.css"
import Link from 'next/link';
import LogoutButton from "./logoutButton.jsx"
import isAuthenticated from "@/app/utils/serverActions/isAuth"
const navbarHeader = () => {
  const [isAuth, setIsAuth] = useState(isAuthenticated());

  useEffect(() => {
    (async () => {
      const isAuth = await isAuthenticated();
      setIsAuth(isAuth);
    })();

  }, [isAuth]);
  return (
    <div className = "navbar-header">
      <div className='Nav-header-buttons'>
        {!isAuth&&<Link className='button-28' href="/signup"> اشترك</Link>}
        {!isAuth&&<Link className='button-28' href="/login"> تسجيل الدخول</Link>}
        { isAuth && <LogoutButton setIsAuth= {setIsAuth}></LogoutButton>}
      </div>

        <Typography variant="h1" component="h2">
          <Link className='logo' href="/"><span className='red'>365</span> News</Link>
          </Typography>
    </div>
  )
}

export default navbarHeader

problems

• first, the login route doesnt have access to the “isAuth” state in the header component, that means, while i can cause the re render by logging out because the log out is a child of header, the same cannot be done here.
• it is slow

log in component :

export default function Login() {
  const router = useRouter()


  const onSubmit = async data =>{
    const bodyJson = JSON.stringify(data);
    const response = await fetch('/api/users/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: bodyJson
        })

    if(response.ok)
          router.push("/");
} 

  return (
    <loginform>
   
    <loginform/>
  );
}

the question is.

how would you go about it, how to achieve this, noting that the header is in the root layout

thank you in advance