Formatting

client/src/lib/auth.ts

@@ -1,32 +1,34 @@
-import pkceChallenge from 'pkce-challenge';
-import { SESSION_KEYS } from './constants';
+import pkceChallenge from "pkce-challenge";
+import { SESSION_KEYS } from "./constants";
 
 export interface OAuthMetadata {
   authorization_endpoint: string;
   token_endpoint: string;
 }
 
-export async function discoverOAuthMetadata(serverUrl: string): Promise<OAuthMetadata> {
+export async function discoverOAuthMetadata(
+  serverUrl: string,
+): Promise<OAuthMetadata> {
   try {
-    const url = new URL('/.well-known/oauth-authorization-server', serverUrl);
+    const url = new URL("/.well-known/oauth-authorization-server", serverUrl);
     const response = await fetch(url.toString());
 
     if (response.ok) {
       const metadata = await response.json();
       return {
         authorization_endpoint: metadata.authorization_endpoint,
-        token_endpoint: metadata.token_endpoint
+        token_endpoint: metadata.token_endpoint,
       };
     }
   } catch (error) {
-    console.warn('OAuth metadata discovery failed:', error);
+    console.warn("OAuth metadata discovery failed:", error);
   }
 
   // Fall back to default endpoints
   const baseUrl = new URL(serverUrl);
   return {
-    authorization_endpoint: new URL('/authorize', baseUrl).toString(),
-    token_endpoint: new URL('/token', baseUrl).toString()
+    authorization_endpoint: new URL("/authorize", baseUrl).toString(),
+    token_endpoint: new URL("/token", baseUrl).toString(),
   };
 }
 
@@ -44,19 +46,25 @@ export async function startOAuthFlow(serverUrl: string): Promise<string> {
 
   // Build authorization URL
   const authUrl = new URL(metadata.authorization_endpoint);
-  authUrl.searchParams.set('response_type', 'code');
-  authUrl.searchParams.set('code_challenge', codeChallenge);
-  authUrl.searchParams.set('code_challenge_method', 'S256');
-  authUrl.searchParams.set('redirect_uri', window.location.origin + '/oauth/callback');
+  authUrl.searchParams.set("response_type", "code");
+  authUrl.searchParams.set("code_challenge", codeChallenge);
+  authUrl.searchParams.set("code_challenge_method", "S256");
+  authUrl.searchParams.set(
+    "redirect_uri",
+    window.location.origin + "/oauth/callback",
+  );
 
   return authUrl.toString();
 }
 
-export async function handleOAuthCallback(serverUrl: string, code: string): Promise<string> {
+export async function handleOAuthCallback(
+  serverUrl: string,
+  code: string,
+): Promise<string> {
   // Get stored code verifier
   const codeVerifier = sessionStorage.getItem(SESSION_KEYS.CODE_VERIFIER);
   if (!codeVerifier) {
-    throw new Error('No code verifier found');
+    throw new Error("No code verifier found");
   }
 
   // Discover OAuth endpoints
@@ -64,20 +72,20 @@ export async function handleOAuthCallback(serverUrl: string, code: string): Prom
 
   // Exchange code for tokens
   const response = await fetch(metadata.token_endpoint, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
     },
     body: JSON.stringify({
-      grant_type: 'authorization_code',
+      grant_type: "authorization_code",
       code,
       code_verifier: codeVerifier,
-      redirect_uri: window.location.origin + '/oauth/callback'
-    })
+      redirect_uri: window.location.origin + "/oauth/callback",
+    }),
   });
 
   if (!response.ok) {
-    throw new Error('Token exchange failed');
+    throw new Error("Token exchange failed");
   }
 
   const data = await response.json();

client/src/lib/constants.ts

@@ -1,6 +1,6 @@
 // OAuth-related session storage keys
 export const SESSION_KEYS = {
-  CODE_VERIFIER: 'mcp_code_verifier',
-  SERVER_URL: 'mcp_server_url',
-  ACCESS_TOKEN: 'mcp_access_token',
-} as const;
+  CODE_VERIFIER: "mcp_code_verifier",
+  SERVER_URL: "mcp_server_url",
+  ACCESS_TOKEN: "mcp_access_token",
+} as const;

client/src/lib/hooks/useConnection.ts

@@ -1,5 +1,8 @@
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { SSEClientTransport, SseError } from "@modelcontextprotocol/sdk/client/sse.js";
+import {
+  SSEClientTransport,
+  SseError,
+} from "@modelcontextprotocol/sdk/client/sse.js";
 import {
   ClientNotification,
   ClientRequest,
@@ -149,7 +152,7 @@ export function useConnection({
       const headers: HeadersInit = {};
       const accessToken = sessionStorage.getItem(SESSION_KEYS.ACCESS_TOKEN);
       if (accessToken) {
-        headers['Authorization'] = `Bearer ${accessToken}`;
+        headers["Authorization"] = `Bearer ${accessToken}`;
       }
 
       const clientTransport = new SSEClientTransport(backendUrl, {