> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperauth.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js App Router
> Wire HyperAuthProvider into a Next.js App Router app: mount it on the client, emit the SDK's required CSP, and set runtime env vars.
This guide shows you how to wire `@hyperauth/react` into a Next.js App Router project. By the end, your app will mount `HyperAuthProvider` on the client, emit the Content Security Policy directives the SDK needs to boot, and read its runtime configuration from environment variables.
Use this guide if you build with Next.js 14 or later on the App Router. If you use Vite or another bundler, the [Quickstart](/quickstart) covers the simpler setup path.
## Prerequisites
* A Next.js 14+ project using the App Router.
* Node.js 18 or higher and a package manager (npm, pnpm, or bun).
* A browser that supports WebAuthn (Chrome, Firefox, or Safari).
## Install the packages
`@hyperauth/react` declares `viem` as a peer dependency. Install all three together:
```bash theme={null}
npm install @hyperauth/client @hyperauth/react viem
```
Make sure your lockfile resolves a single copy of `react`. If you ship a workspace with multiple apps, dedupe React at the root — the provider relies on `useSyncExternalStore`, which throws if it sees two React instances.
## Wrap the provider for the client boundary
`HyperAuthProvider` spawns browser workers and reads `useSyncExternalStore` at module-eval time. Both require the client runtime, so import it through `next/dynamic` with `ssr: false`:
```tsx app/_providers/hyperauth-provider.tsx theme={null}
"use client";
import dynamic from "next/dynamic";
import type { ClientConfig } from "@hyperauth/client";
import type { ReactNode } from "react";
const config: ClientConfig = {
// Falls back to https://cdn.hyperauth.dev/latest/{enclave,vault}.wasm
// when the env vars are undefined.
wasmUrl: process.env.NEXT_PUBLIC_HYPERAUTH_ENCLAVE_WASM_URL,
vaultWasmUrl: process.env.NEXT_PUBLIC_HYPERAUTH_VAULT_WASM_URL,
};
const HyperAuthProviderClient = dynamic(
() => import("@hyperauth/react").then((m) => ({ default: m.HyperAuthProvider })),
{ ssr: false },
);
export function DashboardHyperAuthProvider({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
Don't import `@hyperauth/react` directly into `app/layout.tsx`. The package's production bundle uses `react/jsx-runtime`, and Next.js will try to resolve the SSR path of the provider at build time. Routing the import through `next/dynamic({ ssr: false })` keeps the SDK off the server entirely.
Then mount the wrapper in the root layout:
```tsx app/layout.tsx theme={null}
import { DashboardHyperAuthProvider } from "./_providers/hyperauth-provider";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Components inside the tree can now call `useHyperAuth` and the other hooks from `@hyperauth/react`. See the [React Hooks Reference](/sdk-reference/react-hooks) for the full surface.
## Emit the required CSP
The SDK needs a specific set of Content Security Policy directives to boot. Without them, workers fail to start, OPFS writes are blocked, or the bundler ALPN handshake silently drops. Use Next.js middleware (named `proxy.ts` in Next 16+, `middleware.ts` in earlier versions) to attach the header:
```ts proxy.ts theme={null}
import { NextResponse, type NextRequest } from "next/server";
import { cspManifestString } from "@hyperauth/react";
// Next.js Server Components, next-themes, and framer-motion inject inline
//