Skip to main content
1

Set environment variables

NEXT_PUBLIC_WACHT_PUBLISHABLE_KEY=pk_test_xxx
WACHT_API_KEY=wk_live_xxx
2

Wrap your app with DeploymentProvider

// app/layout.tsx
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>
  )
}
3

Protect routes with proxy/middleware

// proxy.ts (Next.js 16+)
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()
}, {
  apiRoutePrefixes: ['/api', '/trpc'],
})

export const config = {
  matcher: [
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
}
4

Use the backend client in server code (optional)

// app/api/webhooks/route.ts
import { NextResponse } from 'next/server'
import { wachtClient } from '@wacht/nextjs/server'

export async function GET() {
  const client = await wachtClient()
  const apps = await client.webhooks.listWebhookApps()
  return NextResponse.json({ apps })
}

​
Hosted Page Authentication

Wacht makes it easy to protect your application using our zero-configuration hosted authentication pages. Simply wrap your authenticated content with <SignedIn> and use <SignedOut> coupled with <NavigateToSignIn /> to automatically redirect unauthenticated users to your securely hosted login page. 
// app/page.tsx
import { SignedIn, SignedOut, NavigateToSignIn } from '@wacht/nextjs'

export default function Page() {
  return (
    <main>
      <SignedIn>
        <h1>Welcome back! You are authenticated.</h1>
        {/* Your protected dashboard content goes here */}
      </SignedIn>
      <SignedOut>
        <NavigateToSignIn />
      </SignedOut>
    </main>
  )
}

​
Middleware options

type WachtMiddlewareOptions = {
  publishableKey?: string
  signInUrl?: string
  authCookieName?: string
  sessionCookieName?: string
  devSessionCookieName?: string
  clockSkewInMs?: number
  requiredIssuer?: string
  apiRoutePrefixes?: string[]
  isApiRoute?: (request: NextRequest) => boolean
  gatewayUrl?: string
}

​
API route classification

{ apiRoutePrefixes: ['/api', '/trpc'] }
or: 
{ isApiRoute: (req) => req.nextUrl.pathname.startsWith('/internal') }