Quick Start

Install the package, set your keys, mount the provider, and protect requests with Wacht.

Use this guide to add Wacht to a TanStack Router app with hosted authentication.

Install `@wacht/tanstack-router`

Install the TanStack Router package and its core dependencies.

pnpm add @wacht/tanstack-router @wacht/jsx @wacht/types @tanstack/react-router

Set your Wacht keys

Add the following keys to your environment file:

VITE_WACHT_PUBLISHABLE_KEY=pk_test_xxx
WACHT_API_KEY=wk_live_xxx

Add `DeploymentProvider` to your app

DeploymentProvider gives your app access to Wacht's deployment-backed client context.

import { createRouter, RouterProvider } from '@tanstack/react-router';
import { DeploymentProvider } from '@wacht/tanstack-router';
import { routeTree } from './routeTree.gen';

const router = createRouter({ routeTree });

export function App() {
  return (
    <DeploymentProvider publicKey={import.meta.env.VITE_WACHT_PUBLISHABLE_KEY}>
      <RouterProvider router={router} />
    </DeploymentProvider>
  );
}

If you want the embedded auth UI to use app-specific UI settings, add uiOverwrites here.

Protect a request

Use authenticateRequest() in route loaders or server-side request code.

import { authenticateRequest } from '@wacht/tanstack-router/server';

export async function getProtectedData(request: Request) {
  const result = await authenticateRequest(request);

  if (!result.auth.isAuthenticated) {
    throw new Response(null, {
      status: 302,
      headers: {
        ...Object.fromEntries(result.headers.entries()),
        Location: '/sign-in',
      },
    });
  }

  return result.auth.userId;
}

Forward the returned headers whenever you use authenticateRequest().

Add client-side auth controls

Use hosted auth pages first, then embed more of the auth surface only when you need it.

import {
  NavigateToSignIn,
  SignedIn,
  SignedOut,
  UserButton,
} from '@wacht/tanstack-router';

export function AuthControls() {
  return (
    <>
      <SignedIn>
        <UserButton showName={false} />
      </SignedIn>

      <SignedOut>
        <NavigateToSignIn />
      </SignedOut>
    </>
  );
}

Run your app

Start the app locally:

pnpm dev

Create your first user

Visit the app, select Sign in, and complete the hosted authentication flow.

Use Integration model to understand the deployment-backed setup, then Authentication and Client-side Auth for the client-side model. Finish with Server Auth for the request helper surface.