Authentication

Wacht authentication spans three layers that should be implemented together.

Lifecycle diagram

User Browser
   |
   | 1) hosted sign-in / sign-up
   v
Wacht Auth UI
   |
   | 2) redirect back with session context
   v
Frontend App (SDK provider + SignedIn/SignedOut)
   |
   | 3) request protected backend route
   v
Backend Service (Node/Rust auth enforcement)
   |
   | 4) authorize + scope check (org/workspace)
   v
Protected data / mutation

Layer 1: user-facing auth entry

Users authenticate through hosted sign-in/sign-up pages and land back in your app with deployment-scoped session context.

• Next.js Quick Start
• React Router Quick Start
• TanStack Router Quick Start
• React (router-agnostic)

Layer 2: frontend session-aware UX

Use SDK components/hooks (SignedIn, SignedOut, UserButton, session hooks) to keep client UX aligned with session state.

• Next.js Client-side Auth
• React Router Client-side Auth
• TanStack Router Client-side Auth

Layer 3: backend enforcement

Always enforce auth server-side for protected data and mutations.

• Next.js Server-side Auth
• React Router Server Auth
• TanStack Router Server Auth
• Rust Axum Auth Layer

End-to-end track

If you want one full walkthrough across frontend and backend together, use:

• Full-stack auth lifecycle (React + Rust)