---
title: "Adding a UI to an Auth0-secured MCP server with Skybridge"
description: "Skybridge can return a React view alongside structured data from an MCP tool, allowing hosts such as ChatGPT, Claude, and VS Code to render an interface in the conversation. The tutorial scaffolds an MCP app, adds Auth0 through Skybridge’s auth0Provider, and protects the /mcp transport with bearer JWT verification before requests reach tool handlers. Auth0’s default opaque tokens create a compatibility issue because MCP clients send RFC 8707 resource indicators rather than an audience, so Skybridge advertises an authorization endpoint that includes the API audience. The view receives the verified user identity through structuredContent instead of relying on a name supplied by the model. Its additional tool calls use the same authenticated MCP session, and testing proceeds through DevTools, the Playground, real hosts, and deployment."
---

# Adding a UI to an Auth0-secured MCP server with Skybridge

[Auth0](https://yomu.fyi/company/auth0) · Julien Vallini · Aug 24, 2026

**Type:** Tutorial

## Summary

Skybridge can return a React view alongside structured data from an MCP tool, allowing hosts such as ChatGPT, Claude, and VS Code to render an interface in the conversation. The tutorial scaffolds an MCP app, adds Auth0 through Skybridge’s auth0Provider, and protects the /mcp transport with bearer JWT verification before requests reach tool handlers. Auth0’s default opaque tokens create a compatibility issue because MCP clients send RFC 8707 resource indicators rather than an audience, so Skybridge advertises an authorization endpoint that includes the API audience. The view receives the verified user identity through structuredContent instead of relying on a name supplied by the model. Its additional tool calls use the same authenticated MCP session, and testing proceeds through DevTools, the Playground, real hosts, and deployment.

## Context

An MCP app’s rendered UI needs to know which user is signed in, while tool calls must verify access tokens before reaching handlers. The example also addresses Auth0’s default opaque access tokens and its handling of MCP resource indicators, which otherwise prevents the resource server from verifying a JWT.

## Approach / What changed

Scaffold the app with Skybridge, configure auth0Provider with the Auth0 domain, API audience, public server URL, and required scopes, then configure the Auth0 tenant. Return the verified identity in structuredContent, render it in the React view, and rely on the host’s authenticated MCP session for tool calls initiated from the view.

## Takeaways

- auth0Provider exposes OAuth metadata and verifies bearer JWTs against the tenant’s JWKS at the transport layer, returning 401 challenges before unauthenticated requests reach tool handlers.
- Auth0 needs an API audience to issue a verifiable JWT, while MCP clients send a resource indicator; auth0Provider advertises an authorization endpoint with the audience included.
- structuredContent goes directly to the view, whereas content is read by the model, so the UI can display a verified identity without having the model relay it.

**Tags:** [Authentication](https://yomu.fyi/topic/authentication), [Open Source](https://yomu.fyi/topic/open-source), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Auth0](https://auth0.com/blog/adding-ui-auth0-secured-mcp-server-skybridge)
- Source URL: https://auth0.com/blog/adding-ui-auth0-secured-mcp-server-skybridge
- Ingested by Yomu: 2026-08-27T15:07:58.715Z

[Read original post](https://auth0.com/blog/adding-ui-auth0-secured-mcp-server-skybridge)