Create a remote MCP server with authentication
In this guide, we'll walk through creating a remote MCP server using Cloudflare Workers and authenticate using Stytch Connected Apps. You can also check out the example app that this guide is based on.
Before you start
In order to complete this guide, you'll need:
Create a Stytch account. Within the sign up flow select Consumer Authentication as the authentication type you are interested in. Once your account is set up a Project called "My first project" will be automatically created for you. Note that this is supported in B2B as well but the example app uses Consumer
Navigate to Frontend SDKs to enable the Frontend SDK in Test
Navigate to Connected Apps to enable Dynamic Client Registration
Navigate to Project Settings to view your Project ID and API keys. You will need these values later
Integration steps
1Set up the To Do List app
In your terminal clone the project and install dependencies:
git clone https://github.com/stytchauth/mcp-stytch-consumer-todo-list.git
cd mcp-stytch-consumer-todo-list
pnpm iNext, create an .env.local file by running the command below which copies the contents of .env.template.
cp .env.template .env.localOpen .env.local in the text editor of your choice, and set the environment variables using the public_token found on Project Settings.
# This is what a completed .env.local file will look like
VITE_STYTCH_PUBLIC_TOKEN=public-token-test-abc123-abcde-1234-0987-0000-abcd1234Open wranger.jsonc in the text editor of your choice, and set vars.STYTCH_PROJECT_ID using the Project ID found on Project Settings.
// This is what a completed wrangler.jsonc will look like
"vars": {
"STYTCH_PROJECT_ID": "project-test-6c20cd16-73d5-44f7-852c-9a7e7b2ccf62"
},2Running locally
After completing all the setup steps above the application can be run with the command:
pnpm run devThe application will be available at http://localhost:3000 and the MCP server will be available at http://localhost:3000/sse.
Test your MCP server using the MCP Inspector
npx @modelcontextprotocol/inspector@latest3Deploy to CloudFlare Workers
First, create a KV namespace for the TODO app to use:
wrangler kv:namespace create TODOSNext, update the KV namespace ID in wrangler.jsonc with the ID you received:
"kv_namespaces": [
{
"binding": "TODOS",
"id": "your-kv-namespace-id"
}
]Then, deploy the worker:
pnpm run deployFinally, grant your deployment access to your Stytch project. Assuming your Stytch project was deployed at https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev:
- Add https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev/authenticate as an allowed Redirect URL
- Add https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev as an allowed Authorized Application in the Frontend SDKs configuration
What's next
Learn more:
- Explore the example app showing this use case