Using Stytch for Remote MCP Server authorization

import { createMcpHandler, withMcpAuth } from "mcp-handler";
import * as stytch from "stytch";

const client = new stytch.Client({
   project_id: "PROJECT_ID",
   secret: "SECRET",
   custom_base_url: '${projectDomain}',
})

const handler = createMcpHandler(
  server => {
    // withMcpAuth will set the authInfo on the server for use in tool calls
     server.tool("whoami", {}, async ({authInfo}) => ({
        content: [{
          type: "text",
          text: "You are " + JSON.stringify(authInfo, null, 2),
        }]
     }));

     return server
  }
);

const verifyToken = async (req, token) => {
  if (!token) return;
  const { audience, scope, expires_at, ...rest } =
          await client.idp.introspectTokenLocal(token);

  // This payload will be passed as authInfo
  return {
     token,
     clientId: audience,
     scopes: scope.split(' '),
     expiresAt: expires_at,
     extra: rest
  };
};

const authHandler = withMcpAuth(handler, verifyToken, {
   required: true, // Make auth required for all requests
});

export { authHandler as GET, authHandler as POST };

from fastmcp import FastMCP
from fastmcp.server.auth import BearerAuthProvider
from fastmcp.server.dependencies import get_access_token, AccessToken

auth = BearerAuthProvider(
    jwks_uri=f"{os.getenv('STYTCH_DOMAIN')}/.well-known/jwks.json",
    issuer=os.getenv("STYTCH_DOMAIN"),
    algorithm="RS256",
    audience=os.getenv("STYTCH_PROJECT_ID")
)

mcp = FastMCP(name="My MCP Server", auth=auth)

@mcp.tool()
def whoami() -> str:
    """Retrieve the current caller information"""
    access_token = get_access_token()
    user_id = access_token.claims.get("sub")
    return f"user is: {user_id}"

import {Consumer} from '@hono/stytch-auth';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { StreamableHTTPTransport } from '@hono/mcp'

const bearerAuthMiddleware = Consumer.authenticateOAuthToken({
   onError: (c, err) => {
      console.error(err);
      // Construct the WWW-Authenticate header
      const url = new URL(c.req.url);
      const wwwAuthValue = `Bearer error="Unauthorized", ` +
        `error_description="Unauthorized",` +
        `resource_metadata="${url.origin}/.well-known/oauth-protected-resource"`;

      const errorResponse = new Response('Unauthorized', {
         status: 401,
         headers: {'WWW-Authenticate': wwwAuthValue}
      });
      throw new HTTPException(401, {res: errorResponse});
   }
});

export default new Hono()
  .use('/mcp', bearerAuthMiddleware)
  .route('/mcp', async (c) => {
     // The server can access the OAuth data validated by the bearerAuthMiddleware
     const {claims, token: accessToken} = Consumer.getOAuthData(c);

     const server = new McpServer({ name: "Demo", version: "1.0.0" });
     server.tool("whoami", {}, async () => ({
        content: [{
          type: "text",
          text: "You are " + JSON.stringify(claims, null, 2),
        }]
     }));

     const transport = new StreamableHTTPTransport()
     await mcpServer.connect(transport)
     return transport.handleRequest(c)
  })

// In src/app/.well-known/oauth-protected-resource/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
   const response =  NextResponse.json({
      resource: new URL(request.url).origin,
      authorization_servers: [process.env.STYTCH_DOMAIN],
      scopes_supported: ["openid", "email", "profile"]
   });

   response.headers.set('Access-Control-Allow-Origin', '*');
   response.headers.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
   response.headers.set('Access-Control-Allow-Headers',
     'Content-Type, Authorization');

   return response;
}

from fastmcp import FastMCP

# Use the auth defined before
mcp = FastMCP(name="My MCP Server", auth=auth)

@mcp.custom_route("/.well-known/oauth-protected-resource", methods=["GET", "OPTIONS"])
def oauth_metadata(request: StarletteRequest) -> JSONResponse:
    base_url = str(request.base_url).rstrip("/")

    return JSONResponse(
        {
            "resource": base_url,
            "authorization_servers": [os.getenv("STYTCH_DOMAIN")],
            "scopes_supported": ["openid", "email", "profile"]
        }
    )

import {Hono} from "hono";

export default new Hono()
  .get('/.well-known/oauth-protected-resource/:transport?', async (c) => {
     const url = new URL(c.req.url);
     return c.json({
        resource: url.origin,
        authorization_servers: [c.env.STYTCH_DOMAIN],
        scopes_supported: ['openid', 'email', 'profile'],
     })
  })

import { StytchUIClient } from '@stytch/vanilla-js';

const stytch = new StytchUIClient('PUBLIC_TOKEN');

// The user must be logged in before they can consent to share data
if (!stytch.user.getSync()) {
  throw Error('User is not logged in; please redirect to login')
}

stytch.mountIdentityProvider({
  // replace this with a selector for the element where you want to render the component
  elementId: '#stytch-idp-container',
});