---
updatedAt: 2026-05-28T23:48:34.000Z
agentTools:
  projectIndex: https://docs.wristband.dev/llms.txt
---

# Add Auth Middleware

Configure auth middleware to protect your Session Endpoint and any future routes requiring authentication.

To protect your Session Endpoint and other future API routes, you'll need to use the `createMiddlewareAuth()` function to create an auth middleware instance. Then, you'll use the created middleware within the Next.js proxy/middleware to enforce authentication on incoming requests.

## Configure Auth Middleware

Create and configure the authentication middleware in your `src/wristband.ts` file. Make sure to update the `sessionEndpoint` configuration to match the path of the [Session Endpoint](https://docs.wristband.dev/docs/nextjs-pages-router-add-auth-endpoints#session-endpoint) you created earlier.

```typescript Create Auth Middleware
// src/wristband.ts

import * as http from 'http';
import { createWristbandAuth, getPagesRouterSession, SessionOptions } from '@wristband/nextjs-auth';

export const wristbandAuth = createWristbandAuth({
  clientId: '<WRISTBAND_CLIENT_ID>',
  clientSecret: '<WRISTBAND_CLIENT_SECRET>',
  wristbandApplicationVanityDomain: '<WRISTBAND_APPLICATION_VANITY_DOMAIN>',
});

const sessionOptions: SessionOptions = {
  secrets: '<your-generated-secret>'
};

export function getSession(req: http.IncomingMessage, res: http.ServerResponse) {
  return getPagesRouterSession(req, res, sessionOptions);
}

// NEW: Configure the auth middleware to require authenticated sessions.
// By default the auth middleware only requires authentication for 
// requests to your Session Endpoint. However, later on, we will show 
// how to update it to enforce authentication on other pages and APIs.
export const requireAuth = wristbandAuth.createMiddlewareAuth({
  authStrategies: ['SESSION'],
  sessionConfig: {
    sessionOptions,
    sessionEndpoint: '/api/auth/session'  // Update this value to match your Session Endpoint path.
  },
});
```

## Use Auth Middleware

Once you've configured the auth middleware, you'll need to invoke it from either a proxy or middleware file, depending on the version of Next.js you are using:

* **Next.js 16+:** Create the proxy file at `src/proxy.ts`
* **Next.js 15 and earlier:** Create the middleware file at `src/middleware.ts`

Below are code snippets showing how to invoke your auth middleware instance:

```typescript Using Auth Middleware (Next.js 16+)
// src/proxy.ts

import { NextRequest } from 'next/server';
import { requireAuth } from 'src/wristband';

export async function proxy(request: NextRequest) {
  return await requireAuth(request);
}

export const config = {
  /*
   * Match all paths except for:
   * 1. /_next (Next.js internals)
   * 2. /fonts (inside /public)
   * 3. /examples (inside /public)
   * 4. all root files inside /public (e.g. /favicon.ico)
   */
  matcher: ['/((?!_next|fonts|examples|[\\w-]+\\.\\w+).*)'],
};
```
```typescript Using Auth Middleware (Next.js 15 and earlier)
// src/middleware.ts

import { NextRequest } from 'next/server';
import { requireAuth } from 'src/wristband';

export async function middleware(request: NextRequest) {
  return await requireAuth(request);
}

export const config = {
  /*
   * Match all paths except for:
   * 1. /_next (Next.js internals)
   * 2. /fonts (inside /public)
   * 3. /examples (inside /public)
   * 4. all root files inside /public (e.g. /favicon.ico)
   */
  matcher: ['/((?!_next|fonts|examples|[\\w-]+\\.\\w+).*)'],
};
```

<br />

<HTMLBlock>{`
<style>
.UpdatedAt {
  display: none;
}
</style>
`}</HTMLBlock>