SignIn

The <SignIn> component renders a production-ready sign-in card that redirects users to Wocha hosted login. It supports social providers, passkeys, layout options, and per-component theming.

Installation

pnpm add @wocha/ui @wocha/react

Or scaffold with the CLI

npx @wocha/cli init --framework nextjs

import { SignIn } from "@wocha/ui";
import "@wocha/ui/styles.css";

For Next.js, use @wocha/nextjs instead of @wocha/react and wrap your app with WochaSessionProvider.

Basic usage

import { WochaProvider } from "@wocha/react";
import { WochaThemeProvider, SignIn } from "@wocha/ui";
 
<WochaProvider config={config}>
  <WochaThemeProvider>
    <SignIn redirectUrl="/dashboard" />
  </WochaThemeProvider>
</WochaProvider>

Props

Prop	Type	Default	Description
`redirectUrl`	`string`	—	URL to redirect to after successful sign-in
`organisation`	`string`	—	Organisation ID hint for the hosted login page
`providers`	`SocialProvider[]`	`["google", "github", "microsoft", "apple"]`	Social sign-in buttons to display
`appearance`	`WochaAppearance`	—	Visual customisation for this component
`withCard`	`boolean`	`true`	Wrap content in `AuthCard` with default branding
`title`	`ReactNode`	`"Sign in to continue"`	Card title override
`description`	`ReactNode`	`"Welcome back…"`	Card description override
`buttonLabel`	`string`	`"Continue with Wocha"`	Primary button label
`passkeys`	`boolean`	`false`	Show passkey sign-in button
`className`	`string`	—	Additional class name on the root element
`fallback`	`ReactNode`	—	Shown while auth context is loading

SocialProvider is "google" | "github" | "microsoft" | "apple".

Layout options

Control non-CSS layout via appearance.options:

<SignIn
  providers={["google", "github"]}
  appearance={{
    options: {
      socialButtonsPlacement: "top",
      socialButtonsVariant: "block",
      logoPlacement: "outside",
      termsPageUrl: "/terms",
      privacyPageUrl: "/privacy",
    },
  }}
/>

Theming

Apply a prebuilt theme globally or override SignIn only:

import { minimal } from "@wocha/ui/themes";
 
<WochaThemeProvider
  appearance={{
    theme: minimal,
    signIn: {
      variables: { "--wocha-color-primary": "#6366f1" },
    },
  }}
>
  <SignIn />
</WochaThemeProvider>

Framework notes

Framework	Provider setup
React SPA	`WochaProvider` + `WochaThemeProvider`
Next.js App Router	`WochaSessionProvider` + `WochaThemeProvider sdk="nextjs"`