show proper authserverurl

Author: pcarleton

client/src/components/OAuthFlowProgress.tsx

@@ -128,38 +128,54 @@ export const OAuthFlowProgress = ({
           label="Metadata Discovery"
           {...getStepProps("metadata_discovery")}
         >
-          {authState.resourceMetadata && (
-            <details className="text-xs mt-2">
-              <summary className="cursor-pointer text-muted-foreground font-medium">
-                Retrieved OAuth Resource Metadata from {(new URL('/.well-known/oauth-protected-resource', serverUrl)).href}
-              </summary>
-              <pre className="mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]">
-                {JSON.stringify(authState.resourceMetadata, null, 2)}
-              </pre>
-            </details>
-          )}
-          {authState.resourceMetadataError && (
-            <div className="mt-2 p-3 border border-yellow-300 bg-yellow-50 rounded-md">
-              <p className="text-sm font-small text-yellow-700">
-                Failed to retrieve resource metadata, falling back to /.well-known/oauth-authorization-server:
-              </p>
-              <p className="text-xs text-yellow-600 mt-1">
-                {authState.resourceMetadataError.message}
-                {authState.resourceMetadataError instanceof TypeError
-                  ? " (This could indicate the endpoint doesn't exist or does not have CORS configured)"
-                  : authState.resourceMetadataError['status'] && ` (${authState.resourceMetadataError['status']})`}
-              </p>
-            </div>
-          )}
           {provider.getServerMetadata() && (
             <details className="text-xs mt-2">
               <summary className="cursor-pointer text-muted-foreground font-medium">
-                Retrieved OAuth Metadata from {serverUrl}
-                /.well-known/oauth-authorization-server
+                OAuth Metadata Sources
+                {!authState.resourceMetadata && " ℹ️"}
               </summary>
-              <pre className="mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]">
-                {JSON.stringify(provider.getServerMetadata(), null, 2)}
-              </pre>
+
+              {authState.resourceMetadata && (
+                <div className="mt-2">
+                  <p className="font-medium">Resource Metadata:</p>
+                  <p className="text-xs text-muted-foreground">
+                    From {new URL('/.well-known/oauth-protected-resource', serverUrl).href}
+                  </p>
+                  <pre className="mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]">
+                    {JSON.stringify(authState.resourceMetadata, null, 2)}
+                  </pre>
+                </div>
+              )}
+
+              {authState.resourceMetadataError && (
+                <div className="mt-2 p-3 border border-blue-300 bg-blue-50 rounded-md">
+                  <p className="text-sm font-medium text-blue-700">
+                    ℹ️ No resource metadata available from {' '}
+                    <a href={new URL('/.well-known/oauth-protected-resource', serverUrl).href} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-blue-700">
+                      {new URL('/.well-known/oauth-protected-resource', serverUrl).href}
+                    </a>
+                  </p>
+                  <p className="text-xs text-blue-600 mt-1">
+                    Resource metadata was added in the <a href="https://modelcontextprotocol.io/specification/draft/basic/authorization#2-3-1-authorization-server-location">2025-DRAFT-v2 specification update</a>
+                    <br />
+                    {authState.resourceMetadataError.message}
+                    {authState.resourceMetadataError instanceof TypeError
+                      && " (This could indicate the endpoint doesn't exist or does not have CORS configured)"}
+                  </p>
+                </div>
+              )}
+
+              {provider.getServerMetadata() && (
+                <div className="mt-2">
+                  <p className="font-medium">Authorization Server Metadata:</p>
+                  {authState.authServerUrl && <p className="text-xs text-muted-foreground">
+                    From {new URL('/.well-known/oauth-authorization-server', authState.authServerUrl).href}
+                  </p>}
+                  <pre className="mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]">
+                    {JSON.stringify(provider.getServerMetadata(), null, 2)}
+                  </pre>
+                </div>
+              )}
             </details>
           )}
         </OAuthStepDetails>

client/src/lib/auth-types.ts

@@ -31,6 +31,7 @@ export interface AuthDebuggerState {
   oauthStep: OAuthStep;
   resourceMetadata: OAuthProtectedResourceMetadata | null;
   resourceMetadataError: Error | { status: number; statusText: string; message: string } | null;
+  authServerUrl: URL | null;
   oauthMetadata: OAuthMetadata | null;
   oauthClientInfo: OAuthClientInformationFull | OAuthClientInformation | null;
   authorizationUrl: string | null;
@@ -48,6 +49,7 @@ export const EMPTY_DEBUGGER_STATE: AuthDebuggerState = {
   oauthMetadata: null,
   resourceMetadata: null,
   resourceMetadataError: null,
+  authServerUrl: null,
   oauthClientInfo: null,
   authorizationUrl: null,
   authorizationCode: "",

client/src/lib/oauth-state-machine.ts

@@ -26,13 +26,13 @@ export const oauthTransitions: Record<OAuthStep, StateTransition> = {
   metadata_discovery: {
     canTransition: async () => true,
     execute: async (context) => {
-      let authServerUrl = context.serverUrl;
+      let authServerUrl = new URL(context.serverUrl);
       let resourceMetadata: OAuthProtectedResourceMetadata | null = null;
       let resourceMetadataError: Error | null = null;
       try {
         resourceMetadata = await discoverOAuthProtectedResourceMetadata(context.serverUrl);
         if (resourceMetadata && resourceMetadata.authorization_servers?.length) {
-          authServerUrl = resourceMetadata.authorization_servers[0];
+          authServerUrl = new URL(resourceMetadata.authorization_servers[0]);
         }
       } catch (e) {
         console.info(`Failed to find protected resource metadata: ${e}`);
@@ -53,6 +53,7 @@ export const oauthTransitions: Record<OAuthStep, StateTransition> = {
       context.updateState({
         resourceMetadata,
         resourceMetadataError,
+        authServerUrl,
         oauthMetadata: parsedMetadata,
         oauthStep: "client_registration",
       });