Better Auth UI

The <SignedIn /> component conditionally renders its child components based on whether a user is authenticated.

Use it to display content only visible to logged-in users.

Usage

Basic usage example:

import { SignedIn } from "@daveyplate/better-auth-ui"

export default function UserDashboard() {
    return (
        <SignedIn>
            <p>
                Only signed-in users will see this!
            </p>
        </SignedIn>
    )
}

Example

Here's an example demonstrating <SignedIn /> in a practical scenario:

import { SignedIn, SignedOut, UserButton } from "@daveyplate/better-auth-ui"

export default function Navbar() {
    return (
        <nav className="h-16 flex justify-between items-center px-4">
            <Link href="/">
                Home
            </Link>

            <SignedIn>
                <UserButton />
            </SignedIn>

            <SignedOut>
                <Link href="/auth/sign-in">
                    Sign In
                </Link>
            </SignedOut>
        </nav>
    )
}

In this example, the <UserButton /> component is displayed only if the user has an active session. Otherwise, visitors are prompted with a sign-in link.

<SignedIn />

Usage

Example

On this page