Better Auth UI

The <SignedOut> component conditionally renders its children only when the user is not authenticated. It is a simple helper for handling UI components or pages that should only be accessible by guests (unauthenticated users).

Use this component to conditionally hide or show content based on the user's authentication status.

Usage

Wrap any content that should be displayed only to signed-out (unauthenticated) users within the <SignedOut> component:

import { SignedOut } from "@daveyplate/better-auth-ui"
 
export default function Example() {
    return (
        <SignedOut>
            <div>You need to log in to access this feature.</div>
        </SignedOut>
    )
}

Example

A practical view managing authentication states using both <SignedIn> and <SignedOut> components together:

import { SignedIn, SignedOut, UserButton } from "@daveyplate/better-auth-ui"
 
export default function Navbar() {
    return (
        <nav className="flex items-center justify-between px-4 h-14 border-b">
            <h1 className="text-lg font-semibold">
                Better Auth UI
            </h1>
 
            <div className="flex gap-3 items-center">
                <SignedOut>
                    <a href="/auth/sign-in" className="text-sm font-medium">
                        Sign In
                    </a>
                </SignedOut>
 
                <SignedOut>
                    <a href="/auth/sign-up" className="text-sm font-medium">
                        Create account
                    </a>
                </SignedOut>
 
                <UserButton />
            </div>
        </nav>
    )
}

<SignedOut>

Usage

Example

On this page