Next.js Adapter

This guide demonstrates how to integrate @mcpauth/auth inside a Next.js (App Router) project.

1. Install dependencies

npm install @mcpauth/auth @vercel/mcp-adapter

2. Initialize the provider

Create a file at lib/mcpauth.ts to configure the provider.

// lib/mcpauth.ts
import { McpAuth } from "@mcpauth/auth/adapters/next";
import { DrizzleAdapter } from "@mcpauth/auth/stores/drizzle";
import { db } from "./db"; // Your Drizzle instance
import { auth as nextAuth } from "./auth"; // Your existing NextAuth.js instance
import type { OAuthUser } from "@mcpauth/auth";
import { NextRequest } from "next/server";

export const { handlers, auth } = McpAuth({
  adapter: DrizzleAdapter(db), // Or PrismaAdapter(prisma)

  issuerUrl: process.env.NEXT_PUBLIC_BASE_URL!,
  issuerPath: "/api/oauth",

  authenticateUser: async (request: NextRequest) => {
    const session = await nextAuth();
    return (session?.user as OAuthUser) ?? null;
  },

  signInUrl: (request: NextRequest, callbackUrl: string) => {
    return "/api/auth/signin"; // Path to your NextAuth.js sign-in page
  },
});

3. Create the API Route

Create a catch-all API route at app/api/oauth/[...route]/route.ts to handle all OAuth requests.

// app/api/oauth/[...route]/route.ts
import { handlers } from "@/lib/mcpauth";
export const { GET, POST, OPTIONS } = handlers;

4. Configure Rewrites

To serve the .well-known discovery endpoints required by OAuth, add a rewrite rule to your next.config.mjs (or .js).

Note: for certain clients (e.g. MCP Inspector): Some clients may not automatically follow the WWW-Authenticate header to redirect for authentication to a non-root path. To ensure a smooth login flow, you must add a rewrite to the well-known endpoint.

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/.well-known/:slug*",
        destination: "/api/oauth/.well-known/:slug*",
      },
    ];
  },
};

export default nextConfig;

5. Protect an MCP Endpoint

Finally, use the auth function exported from lib/oauth.ts to protect your MCP API routes.

// app/api/mcp/[...transport]/route.ts
import { createMcpHandler } from "@vercel/mcp-adapter";
import { NextRequest, NextResponse } from "next/server";
import { auth as mcpAuth } from "@/lib/oauth";

const handler = async (req: NextRequest) => {
  const session = await mcpAuth(req);

  if (!session) {
    return NextResponse.json(
      { error: "unauthorized" },
      { status: 401, headers: { "Content-Type": "application/json" } }
    );
  }

  const mcpHandler = createMcpHandler({
    // ... your MCP configuration
  });

  return mcpHandler(req);
};

export { handler as GET, handler as POST };

6. Initialize your database store

See instructions in Database Stores.

Next: Express Adapter ➡️

Next.js Adapter

Next.js Adapter

1. Install dependencies

2. Initialize the provider

3. Create the API Route

4. Configure Rewrites

5. Protect an MCP Endpoint

6. Initialize your database store

On this page