I want dynamic updates happening to the UI of a page when the user signs in.

[Abraham599]

I am using @/lib/supabase/server for storing the cookies but I want to dynamically change the text of the auth button from "Sign in" to "Sign out" (which is in nav-header.tsx) as the user successfully signs in. I tried onAuthStateChange but as it is for client-side mechanism, it only works well when the cookies are stored in client-side and not in server-side.

here is the nav-header.tsx which is global throughout the app

"use client"

import { supabase } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import {
NavigationMenu,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
import { useEffect, useState } from "react"
import { LogOut, Loader2, Moon, Sun } from 'lucide-react'
import { useTheme } from "next-themes"

export function NavHeader() {
const router = useRouter()
const [isLoading, setIsLoading] = useState(true)
const [isAuthenticated, setIsAuthenticated] = useState(false)
const { theme, setTheme } = useTheme()
const [mounted, setMounted] = useState(false)

useEffect(() => {
setMounted(true)

const checkAuth = async () => {
  const { data: { session } } = await supabase.auth.getSession()
  setIsAuthenticated(!!session)
  setIsLoading(false)
}
checkAuth()

const { data: { subscription } } = supabase.auth.onAuthStateChange(async (_event, session) => {
  const isAuthed = !!session
  setIsAuthenticated(isAuthed)
  setIsLoading(false)
})

return () => subscription.unsubscribe()

}, [])

const handleSignOut = async () => {
try {
await supabase.auth.signOut()
router.push('/')
router.refresh()
} catch (error) {
console.error('Sign out failed:', error)
}
}

const toggleTheme = () => {
setTheme(theme === 'dark' ? 'light' : 'dark')
}

return (

InterviewPro

    <div className="flex items-center space-x-2">
      {mounted && (
        <Button
          variant="ghost"
          size="icon"
          onClick={toggleTheme}
          className="text-muted-foreground hover:text-foreground"
        >
          {theme === 'dark' ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
          <span className="sr-only">Toggle theme</span>
        </Button>
      )}

      {isLoading ? (
        <Button variant="ghost" disabled>
          <Loader2 className="h-4 w-4 animate-spin" />
        </Button>
      ) : isAuthenticated ? (
        <Button 
          variant="ghost" 
          onClick={handleSignOut}
          className="text-muted-foreground hover:text-foreground"
        >
          <LogOut className="h-4 w-4 mr-2" />
          Sign Out
        </Button>
      ) : (
        <Button 
          variant="ghost" 
          onClick={() => router.push('/auth/login')}
          className="text-muted-foreground hover:text-foreground"
        >
          Sign In
        </Button>
      )}
    </div>
  </div>
</header>

)
}