# 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.