SignUp

The <SignUp> component renders a registration card that redirects users to Wocha hosted sign-up. It shares the same styling and layout system as <SignIn>.

Installation

pnpm add @wocha/ui @wocha/react

Or scaffold with the CLI

npx @wocha/cli init --framework nextjs

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

Basic usage

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

Props

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

Layout options

<SignUp
  title="Join Acme Corp"
  appearance={{
    options: {
      socialButtonsPlacement: "bottom",
      termsPageUrl: "/terms",
      privacyPageUrl: "/privacy",
    },
  }}
/>

Theming

import { shadcn } from "@wocha/ui/themes";
 
<WochaThemeProvider appearance={{ theme: shadcn, signUp: { radius: "lg" } }}>
  <SignUp />
</WochaThemeProvider>

Framework notes

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

SignUp

Installation

Basic usage

Props

Layout options

Theming

Framework notes

Related

On this page