MCP Authentication Demo

A production-ready Model Context Protocol (MCP) server with OAuth 2.1 authentication built using Next.js 15 and Google OAuth.

🎯 Status: Production Ready ✅

OAuth 2.1 Compliant - Fully implements OAuth 2.1 authorization code flow with PKCE, removing deprecated implicit flow patterns.

Key Features

• ✅ OAuth 2.1 Authentication - Secure Google OAuth with PKCE support
• ✅ VS Code Integration - Seamless MCP authentication in VS Code
• ✅ MCP Remote Support - Full compatibility with mcp-remote for both local and remote servers
• ✅ Security First - No token exposure in URLs, proper error handling
• ✅ Standards Compliant - RFC 9728 OAuth Protected Resource Metadata

📋 Important Notice: mcp-remote Compatibility

💡 TIP: When using mcp-remote with remote servers, specify a unique port number (e.g., 59908) to avoid conflicts with other MCP servers. This server has been designed to handle both local and remote OAuth flows seamlessly.

Technical Background: This server resolves an architectural limitation in mcp-remote’s port detection by implementing intelligent redirect URI management that supports both OAuth 2.1 compliance and client compatibility requirements.

Usage Examples:

# Local development (no port needed)
npx mcp-remote http://localhost:3000/api/mcp

# Remote server (specify unique port)
npx mcp-remote https://your-server.vercel.app/api/mcp 59908

See detailed analysis: mcp-remote Port Detection Issue Analysis

🚀 Quick Start

Prerequisites

• Node.js 18+
• Google OAuth 2.0 credentials (Setup Guide)

Installation

# Clone and install
git clone 
cd mcp-auth-demo
pnpm install

Configuration

Create .env.local:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

Development

pnpm dev
# Server runs at http://localhost:3000

🔧 Usage

VS Code Integration

1. Configure MCP in .vscode/mcp.json:

   {
     "servers": {
       "hello-mcp": {
         "type": "http",
         "url": "http://localhost:3000/api/mcp"
       }
     }
   }
   

2. Start MCP Server in VS Code - Click the “Start” button and complete OAuth in browser

Command Line Testing

# Test with mcp-remote (handles OAuth automatically)
npx mcp-remote http://localhost:3000/api/mcp

# Works with remote servers too! (including Vercel deployments)
npx mcp-remote https://mcp-auth-demo-rust.vercel.app/api/mcp

📁 Project Structure

Core Application Files

app/api/[transport]/route.ts

Main MCP endpoint with OAuth 2.1 authentication middleware. Handles all MCP protocol messages with bearer token validation.