Skip to main content
Install the core library and React Router adapter to get started with Wacht in your React Router application.

​
Installation

npm install @snipextt/wacht @snipextt/wacht-react-router react-router-dom

​
Basic Setup

​
1. App Configuration

Set up your React Router app with the Wacht provider:
src/App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { DeploymentProvider } from '@snipextt/wacht'
import { ReactRouterAdapter } from '@snipextt/wacht-react-router'

export default function App() {
  return (
    <BrowserRouter>
      <DeploymentProvider
        publicKey={import.meta.env.VITE_WACHT_PUBLIC_KEY}
        platformAdapter={ReactRouterAdapter}
      >
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/auth/signin" element={<SignInPage />} />
          <Route path="/auth/sso-callback" element={<SSOCallbackPage />} />
          <Route path="/dashboard" element={<DashboardPage />} />
        </Routes>
      </DeploymentProvider>
    </BrowserRouter>
  )
}

​
2. Environment Variables

Add your Wacht public key to your environment file:
.env.local
VITE_WACHT_PUBLIC_KEY=pk_your_public_key_here

​
3. Basic Usage

Use Wacht components in your pages:
src/pages/Home.tsx
import { SignedIn, SignedOut, UserButton, SignInForm } from '@snipextt/wacht'

export default function HomePage() {
  return (
    <div>
      <SignedOut>
        <SignInForm />
      </SignedOut>
      
      <SignedIn>
        <h1>Welcome!</h1>
        <UserButton />
      </SignedIn>
    </div>
  )
}

​
OAuth Callback

Set up the OAuth callback page:
src/pages/SSOCallback.tsx
import { SSOCallback } from '@snipextt/wacht'

export default function SSOCallbackPage() {
  return <SSOCallback />
}

​
Next Steps