React SDK
Components
Pre-built SignIn, SignUp, and UserButton components.
SignIn
A complete sign-in form with email/password, MFA challenge support, validation errors, and navigation links.
import { SignIn } from '@zautha/react';
function SignInPage() {
return (
<SignIn
signUpUrl="/sign-up"
redirectUrl="/dashboard"
forgotPasswordUrl="/forgot-password"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
redirectUrl | string | "/" | Where to redirect after successful sign-in |
signUpUrl | string? | — | Shows "Don't have an account? Sign up" link |
forgotPasswordUrl | string? | — | Shows "Forgot password?" link |
className | string? | — | Additional CSS class |
SignUp
A registration form with email, password, and confirm password fields. Passwords must match before the form submits.
import { SignUp } from '@zautha/react';
function SignUpPage() {
return (
<SignUp
signInUrl="/sign-in"
redirectUrl="/dashboard"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
redirectUrl | string | "/" | Where to redirect after successful sign-up |
signInUrl | string? | — | Shows "Already have an account? Sign in" link |
className | string? | — | Additional CSS class |
UserButton
An avatar dropdown with sign-out option. Shows the user's initials or avatar.
import { UserButton } from '@zautha/react';
function Header() {
return (
<nav>
<h1>My App</h1>
<UserButton afterSignOutUrl="/" />
</nav>
);
}withAuth HOC
Wraps a component to require authentication. Unauthenticated users are redirected to the sign-in page.
import { withAuth } from '@zautha/react';
const ProtectedPage = withAuth(({ user }) => {
return <div>Hello, {user.email}</div>;
});Styling
All SDK components use data-zautha-* attributes for CSS targeting:
[data-zautha-sign-in] { /* card container */ }
[data-zautha-field] { /* form field wrapper */ }
[data-zautha-submit] { /* submit button */ }
[data-zautha-error] { /* error message */ }
[data-zautha-footer] { /* footer links */ }Components use CSS custom properties with fallback values. Override them in your global CSS:
:root {
--zautha-accent: #6366f1;
--zautha-accent-hover: #4f46e5;
--zautha-bg: #f8fafc;
--zautha-text: #0f172a;
--zautha-border: #e2e8f0;
}