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 createAuthMiddleware() 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 you created earlier.

// 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:

// 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+).*)'],
};

// 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+).*)'],
};

Updated about 10 hours ago

What’s Next

Now that your authentication endpoints are set up and configured, let's verify that they're working correctly.

Test Auth Flows