React (single-page apps)

Vite, Create React App or any static React site. With no server of your own, the session token is kept in the browser and sent to your API as a Bearer token.

Install

@tausi-auth/js on npmRequires React 18+ for the React helpers, Next.js 15+ for the Next.js helpers

Shell

npm install @tausi-auth/js

.env.env

VITE_TAUSI_URL=https://tausi-auth.onrender.com
VITE_TAUSI_KEY=pk_…

Add your dev and production origins (e.g. http://localhost:5173) to the project's allowed origins.

Provider

src/main.tsxTSX

import { TausiProvider } from "@tausi-auth/js/react";

createRoot(document.getElementById("root")!).render(
  <TausiProvider baseUrl={import.meta.env.VITE_TAUSI_URL} publishableKey={import.meta.env.VITE_TAUSI_KEY}>
    <App />
  </TausiProvider>,
);

The token is saved in localStorage and the session is checked with Tausi when the app loads.

Hooks and components

src/App.tsxTSX

import { AuthLoading, SignedIn, SignedOut, useAuth } from "@tausi-auth/js/react";

export function App() {
  return (
    <>
      <AuthLoading><Spinner /></AuthLoading>
      <SignedIn><Dashboard /></SignedIn>
      <SignedOut><SignIn /></SignedOut>
    </>
  );
}

function Dashboard() {
  const { user, signOut } = useAuth();
  return <button onClick={signOut}>Sign out {user?.email}</button>;
}

API	What it gives you
`useAuth()`	{ status: "loading" \| "signedIn" \| "signedOut", user, session, isLoaded, isSignedIn, getToken, signOut }
`useUser()`	The signed-in user, or null.
`useTausi()`	The client: signIn, signUp, updateUser, listSessions, …
`<SignedIn> <SignedOut> <AuthLoading>`	Render children only in that state.
`onAuthChange`	Provider prop called on every change, e.g. to clear a data cache.

Forms

SignIn.tsxTSX

const tausi = useTausi();

async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  const f = new FormData(e.currentTarget);
  try {
    await tausi.signIn({ email: String(f.get("email")), password: String(f.get("password")) });
  } catch (err) {
    if (isTausiError(err)) setError(err.code === "INVALID_CREDENTIALS" ? "Wrong email or password." : err.message);
  }
}

// Sign-up, with optional attributes:
await tausi.signUp({ name, email, password, username, phoneNumber, timezone: Intl.DateTimeFormat().resolvedOptions().timeZone });

Error codes to handle: INVALID_CREDENTIALS, EMAIL_NOT_VERIFIED, EMAIL_ALREADY_REGISTERED, USERNAME_TAKEN, ACCOUNT_BANNED, ACCOUNT_SUSPENDED, RATE_LIMITED (see err.retryAfter) and VALIDATION_ERROR (field messages in err.details.issues).

Call your API

api.tsTypeScript

const { getToken } = useAuth();
const res = await fetch("https://api.example.com/orders", {
  headers: { authorization: `Bearer ${await getToken()}` },
});

Verify the token on your server with the Node, PHP or Python SDK. When Tausi renews a token the client stores the new one; when it rejects one (revoked, banned, expired) the client signs out by itself.

Social sign-in

OAuthTypeScript

await tausi.signInWithOAuth("google", { redirectTo: `${location.origin}/auth/callback` });

// On the /auth/callback route:
const { status, error } = useOAuthCallback();   // "pending" | "done" | "error"