Auth0 MCP Demo (#40)

* feat: added example api worker to be called by mcp server

* chore: fix formatting issues

* chore: jwt middleware formatting

* feat: added mcp worker for auth0

* chore: fix formatting issues

* feat: replaced generic api with a todos api

* chore: minor improvements to todos api

* feat: added auth0 mcp server

* feat: added consent screen

* chore: added docs for the playground

* commit changes to root package-lock

---------

Co-authored-by: Jeremy Morrell <[email protected]>

Author: sandrinodimattia

demos/remote-mcp-auth0/.gitignore

@@ -0,0 +1,172 @@
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+.cache
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
+
+# wrangler project
+
+.dev.vars
+.wrangler/

demos/remote-mcp-auth0/.npmrc

@@ -0,0 +1,4 @@
+shamefully-hoist=true
+use-workspace-protocol=true
+link-workspace-packages = true
+prefer-workspace-packages = true

demos/remote-mcp-auth0/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 140,
+  "singleQuote": true,
+  "semi": false,
+  "useTabs": false,
+  "overrides": [
+    {
+      "files": ["*.jsonc"],
+      "options": {
+        "trailingComma": "none"
+      }
+    }
+  ]
+}

demos/remote-mcp-auth0/README.md

@@ -0,0 +1,51 @@
+# Model Context Protocol (MCP) Server + Auth0
+
+This is a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that supports remote MCP connections, with Auth0 built-in.
+
+The MCP server (powered by [Cloudflare Workers](https://developers.cloudflare.com/workers/)):
+
+- Acts as OAuth _Server_ to your MCP clients
+- Acts as OIDC _Client_ to your Auth0 Tenant
+
+## Getting Started
+
+This demo allows an MCP Server to call a protected API on behalf of the authenticated user. To get started you will need the following:
+
+1. Deploy the [Todos API](./packages/todos-api/README.md)
+2. Run the [MCP Server](./packages/mcp-auth0-oidc/README.md)
+
+## Access the remote MCP server from the Cloudflare Workers AI LLM Playground
+
+Navigate to [https://playground.ai.cloudflare.com/](https://playground.ai.cloudflare.com/) and connect to your MCP server on the bottom left using the following URL pattern:
+
+```bash
+https://mcp-auth0-oidc.<your-subdomain>.workers.dev/sse
+```
+
+This will open a popup where you can sign in after which you'll be able to use all of the tools.
+
+<img src="./docs/playground.jpg" width="500" alt="Workers AI LLM Playground">
+
+## Access the remote MCP server from Claude Desktop
+
+Open Claude Desktop and navigate to Settings -> Developer -> Edit Config. This opens the configuration file that controls which MCP servers Claude can access.
+
+Replace the content with the following configuration. Once you restart Claude Desktop, a browser window will open showing your OAuth login page. Complete the authentication flow to grant Claude access to your MCP server. After you grant access, the tools will become available for you to use.
+
+```
+{
+  "mcpServers": {
+    "math": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "https://mcp-auth0-oidc.<your-subdomain>.workers.dev/sse"
+      ]
+    }
+  }
+}
+```
+
+Once the Tools (under 🔨) show up in the interface, you can ask Claude to use them. For example: "Could you list my todos". Claude should invoke the tool and show the result generated by the MCP server.
+
+<img src="./docs/claude.png" width="500" alt="Claude Desktop">