Skip to main content

​
1. Install the SDK package

pnpm add @wacht/nextjs @wacht/jsx @wacht/types

​
2. Add environment variables

NEXT_PUBLIC_WACHT_PUBLISHABLE_KEY=pk_test_xxx
# Optional, only for backend API calls from server code
WACHT_API_KEY=wk_live_xxx

​
3. Mount provider in your app

import { DeploymentProvider } from '@wacht/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <DeploymentProvider publicKey={process.env.NEXT_PUBLIC_WACHT_PUBLISHABLE_KEY!}>
          {children}
        </DeploymentProvider>
      </body>
    </html>
  )
}

​
4. Protect a server-side request

import { NextResponse } from 'next/server'
import { createRouteMatcher, wachtMiddleware } from '@wacht/nextjs/server'

const isProtected = createRouteMatcher(['/dashboard(.*)', '/api/private(.*)'])

export default wachtMiddleware(async (auth, req) => {
  if (!isProtected(req)) return NextResponse.next()
  await auth.protect()
  return NextResponse.next()
})

​
Next

  • Next.js details: /nextjs-sdk/quickstart
  • React Router details: /react-router-sdk/quickstart
  • TanStack Router details: /tanstack-router-sdk/quickstart
  • Rust details: /rust-sdk/quickstart