React (Vite)

Before you start

• A React 19 app built with Vite.
• An application in the dashboard. Its publishable key is on the instance’s API keys page (or its overview). A React app needs no secret key: that one is for servers.

Install

npm i @zautha/react @zautha/ui

Add the code

<ZauthaProvider> loads the SDK with your publishable key and the prebuilt components from @zautha/ui; <Show> renders the sign-in form for a signed-out visitor and the user button for a signed-in one.

src/App.tsx

import { Show, SignIn, UserButton, ZauthaProvider } from "@zautha/react";
import { ui } from "@zautha/ui";
import "@zautha/ui/styles.css";

export function App() {
  return (
    <ZauthaProvider publishableKey="pk_test_..." ui={ui}>
      <Show when="signed-out">
        <SignIn />
      </Show>
      <Show when="signed-in">
        <UserButton />
      </Show>
    </ZauthaProvider>
  );
}

Run it

npm run dev

Open http://localhost:5173 and sign up. A development instance accepts localhost as it is; addresses ending in +zautha_test before the @ (such as jane+zautha_test@example.com) get no email and verify with the code 424242.

Next steps

• Node.js and Express or ASP.NET Core: an API that knows who is calling.
• @zautha/react: hooks, <Show> conditions, social sign-in, reverification.
• @zautha/ui: appearance and localization of the components.

Zautha’s end-to-end tests run this setup in a React (Vite) example app.