I have been working with MCP (Model Context Protocol) quite a bit recently, and one thing that kept coming up was the question of how to properly secure a remote MCP server. Most examples I found either skipped authentication entirely or hand-waved it. So I decided to build the full flow myself — a remote MCP client and server with real OAuth 2.0 authorization handled through Asgardeo. Along the way, I have been writing an article series documenting everything I have learned, and I also contributed a pull request that got merged into the official mcp-typescript-sdk.
The project has three main pieces. The remote MCP server uses Figma MCP under the hood, which exposes design file context like layout information, components, and variables to AI agents via the Model Context Protocol. The remote MCP client is a React-based AI chatbot powered by the Google Gemini LLM API that connects to the server and lets you interact with Figma designs through natural language. The authorization layer sits in between — Asgardeo acts as the OAuth 2.0 Authorization Server following the MCP Authorization spec, using the @asgardeo/mcp-express middleware to protect the endpoints.
React, Node JS, Express, Figma MCP, Google Gemini LLM API, Asgardeo
While building this project, I ran into a practical issue with CORS when using StreamableHTTP in browser-based MCP clients — the mcp-session-id header was getting blocked. I submitted a pull request to the official mcp-typescript-sdk repository to document this, and it was merged. Small contribution, but it felt good to give back to a project I was actively learning from.
This project is still ongoing, and I am continuing to build out the article series as I dig deeper into the MCP authorization spec. It started as a way to scratch my own itch — understanding how remote MCP servers should handle auth properly — and has turned into something I think others in the community can learn from too.