Wocha Docs

Auth buttons

Unstyled SignInButton, SignUpButton, and SignOutButton trigger wrappers.

Wocha provides minimal trigger buttons that call auth actions from context. Use them when you want full control over button styling.

Installation

pnpm add @wocha/ui @wocha/react
Or scaffold with the CLI
npx @wocha/cli init --framework nextjs
import { SignInButton, SignUpButton, SignOutButton } from "@wocha/ui";

SignInButton

Triggers the hosted sign-in flow.

<SignInButton redirectUrl="/dashboard">
  Log in
</SignInButton>
PropTypeDefaultDescription
childrenReactNode"Sign in"Button label
classNamestring—CSS class for styling
redirectUrlstring—URL to return to after sign-in

SignUpButton

Triggers the hosted registration flow.

<SignUpButton redirectUrl="/welcome" className="btn btn-primary">
  Get started
</SignUpButton>
PropTypeDefaultDescription
childrenReactNode"Sign up"Button label
classNamestring—CSS class for styling
redirectUrlstring—URL to return to after registration

SignOutButton

Signs the user out and optionally redirects.

<SignOutButton redirectUrl="/" className="text-red-600">
  Log out
</SignOutButton>
PropTypeDefaultDescription
childrenReactNode"Sign out"Button label
classNamestring—CSS class for styling
redirectUrlstring—URL to redirect to after sign-out

Usage with Show

Combine with <Show> for conditional rendering:

<Show when="signed-out">
  <SignInButton className="nav-link" />
  <SignUpButton className="btn-primary" />
</Show>
 
<Show when="signed-in">
  <SignOutButton className="nav-link" />
</Show>

Framework notes

These are client components. In Next.js, import them in client-marked files ("use client").

Previous

Show

Next

Lifecycle

On this page