What is the best approach when handling the protected and unprotected routes

Cannot update a component (`Router`) while rendering a different component (`AuthLayout`). To locate the bad setState() call inside `AuthLayout`, follow the stack trace as described in https://react.dev/link/setstate-in-render

'use client'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'

import { authClient } from '@/auth/auth-client'

import { Logo } from '@/components/navigation-bar/logo'
import { Button } from '@/components/ui/button'

export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
  const { data: session } = authClient.useSession()

  const router = useRouter()
  const pathname = usePathname()
  const isSignIn = pathname === '/sign-in'

  if (session) {
    router.push('/')
  }

  return (
    <div className='flex min-h-screen flex-col'>
      <header>
        <nav className='flex h-13 items-center justify-between px-4'>
          <Logo />

          {isSignIn ? (
            <Button variant='outline' asChild>
              <Link href='/sign-up'>Sign Up</Link>
            </Button>
          ) : (
            <Button variant='outline' asChild>
              <Link href='/sign-in'>Sign In</Link>
            </Button>
          )}
        </nav>
      </header>
      <div className='flex flex-1 flex-col items-center justify-center'>{children}</div>
    </div>
  )
}