using next-auth v5, I have an AppNavbar component, that need to be async

export default async function AppNavbar() {
    const t = await getTranslations()
    const session = await auth()

    return (
      <NavbarLink href="/" active>
        {t('nav.home')}
      </NavbarLink>
      {session ? (<div>is logged in</div>) : (
          <SignIn/>
      )
    )

I'd like to access the router to know when to set the active attribute.
But I can't, because auth requires an await or async component.

I also tried

export default function AppNavbar() {
    const t = useTranslations()
    const [session, setSession] = useState<Session | null>(null)
    useEffect(() => {
        const getSession = async () => {
            const session = await auth()
            setSession(session)
        }
        getSession()
    }, [setSession])

but

Error: 
  × You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

However when I "use client"

Error: 
  × It is not allowed to define inline "use server" annotated Server Actions in Client Components.
  │ To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component. 

because

import {Button} from 'flowbite-react';
import {useTranslations} from 'next-intl';
import { signIn } from "@/auth"

export default function SignIn() {
    const t = useTranslations()
    return (
        <>
        <form
            action={async () => {
                "use server"
                await signIn("keycloak")
            }}
        >
            <Button type="submit" color="dark">{t('auth.sign_in')}</Button>
        </form>
        </>
    )
}