Quick Start

1. Install the SDK

npm install @zautha/sdk @zautha/react

2. Add the Provider

Wrap your application with the ZauthaProvider:

import { ZauthaProvider } from '@zautha/react';

function App({ children }) {
  return (
    <ZauthaProvider projectKey="pk_live_xxx">
      {children}
    </ZauthaProvider>
  );
}

The projectKey is your project's public API key, found in the dashboard under Projects > API Keys.

3. Use Authentication

Access authentication state with hooks:

import { useAuth, useUser } from '@zautha/react';

function Dashboard() {
  const { isSignedIn, signOut } = useAuth();
  const { user } = useUser();

  if (!isSignedIn) {
    return <SignIn />;
  }

  return (
    <div>
      <p>Welcome, {user.email}</p>
      <button onClick={signOut}>Sign out</button>
    </div>
  );
}

4. Use Pre-built Components

Drop in ready-made auth forms:

import { SignIn, SignUp, UserButton } from '@zautha/react';

// Sign-in page
function SignInPage() {
  return (
    <SignIn
      signUpUrl="/sign-up"
      redirectUrl="/dashboard"
      forgotPasswordUrl="/forgot-password"
    />
  );
}

// Sign-up page
function SignUpPage() {
  return (
    <SignUp
      signInUrl="/sign-in"
      redirectUrl="/dashboard"
    />
  );
}

// User menu (avatar + dropdown)
function Header() {
  return <UserButton afterSignOutUrl="/" />;
}

Base URLs

Environment	Auth Runtime	Control Plane
Production	`https://auth.zautha.com`	`https://api.zautha.com`
Development	`http://localhost:5001`	`http://localhost:5000`

Next Steps

Core Concepts — Understand Tenants, Projects, and Organizations
React SDK — Full SDK reference
API Reference — REST API endpoints