# Clerk on the Pages Router

The Pages Router integration looks similar to App Router but the auth APIs differ. Mixing the two is the failure.

## Provider setup

In `pages/_app.tsx`, wrap the app with `ClerkProvider` and spread `pageProps` into it:

```tsx
import { ClerkProvider } from '@clerk/nextjs'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    [ClerkProvider {...pageProps}]
      [Component {...pageProps} /]
    [/ClerkProvider]
  )
}
```

Skipping `{...pageProps}` breaks SSR hydration of the auth state: the client flashes signed-out on first paint.

Use `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` in `.env`. Middleware filename follows the same rule as App Router: `proxy.ts` on Next 16, `middleware.ts` on 15 and below, and `clerkMiddleware()` protects nothing by default, routes are public until you opt in.

## Server-side auth: getAuth(req)

There is no `auth()` helper in Pages Router. Inside `getServerSideProps` (or API routes under `pages/api`), use `getAuth(req)`:

```tsx
import { getAuth } from '@clerk/nextjs/server'

export async function getServerSideProps(context) {
  const { userId } = getAuth(context.req)
  if (!userId) {
    return { redirect: { destination: '/sign-in', permanent: false } }
  }
  // fetch data for userId here
  return { props: {} }
}
```

## Checklist

- `auth()` / `currentUser()` from `@clerk/nextjs/server` are App Router only. Calling them in Pages Router throws.
- Sign-in and sign-up catch-all pages (`pages/sign-in/[[...index]].tsx`) use the prebuilt components; if you set custom sign-in URLs, set them via env vars so `SignInButton` links somewhere real.
- If you use Tailwind v4, the docs require `appearance={{ cssLayerName: 'clerk' }}` on the provider plus the `@layer` line at the top of globals.css, or Clerk styles lose to Tailwind utilities.