Components
<SignedIn />
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.
Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.jsonUsage
Basic usage example:
import { SignedIn } from "@/components/auth";
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 "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.