From 02cfb47c83469ff2f855fc8071508784c3058992 Mon Sep 17 00:00:00 2001
From: Justin Spahr-Summers <justin@anthropic.com>
Date: Fri, 24 Jan 2025 13:09:58 +0000
Subject: [PATCH] Extract session storage keys into constants

---
 client/src/components/OAuthCallback.tsx | 5 +++--
 client/src/lib/auth.ts                  | 5 +++--
 client/src/lib/constants.ts             | 6 ++++++
 client/src/lib/hooks/useConnection.ts   | 3 ++-
 4 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 client/src/lib/constants.ts

diff --git a/client/src/components/OAuthCallback.tsx b/client/src/components/OAuthCallback.tsx
index 67fc91f..bc3e1dd 100644
--- a/client/src/components/OAuthCallback.tsx
+++ b/client/src/components/OAuthCallback.tsx
@@ -1,12 +1,13 @@
 import { useEffect } from 'react';
 import { handleOAuthCallback } from '../lib/auth';
+import { SESSION_KEYS } from '../lib/constants';
 
 const OAuthCallback = () => {
   useEffect(() => {
     const handleCallback = async () => {
       const params = new URLSearchParams(window.location.search);
       const code = params.get('code');
-      const serverUrl = sessionStorage.getItem('mcp_server_url');
+      const serverUrl = sessionStorage.getItem(SESSION_KEYS.SERVER_URL);
 
       if (!code || !serverUrl) {
         console.error('Missing code or server URL');
@@ -17,7 +18,7 @@ const OAuthCallback = () => {
       try {
         const accessToken = await handleOAuthCallback(serverUrl, code);
         // Store the access token for future use
-        sessionStorage.setItem('mcp_access_token', accessToken);
+        sessionStorage.setItem(SESSION_KEYS.ACCESS_TOKEN, accessToken);
         // Redirect back to the main app
         window.location.href = '/';
       } catch (error) {
diff --git a/client/src/lib/auth.ts b/client/src/lib/auth.ts
index 054f88e..c8faa57 100644
--- a/client/src/lib/auth.ts
+++ b/client/src/lib/auth.ts
@@ -1,4 +1,5 @@
 import pkceChallenge from 'pkce-challenge';
+import { SESSION_KEYS } from './constants';
 
 export interface OAuthMetadata {
   authorization_endpoint: string;
@@ -36,7 +37,7 @@ export async function startOAuthFlow(serverUrl: string): Promise<string> {
   const codeChallenge = challenge.code_challenge;
   
   // Store code verifier for later use
-  sessionStorage.setItem('mcp_code_verifier', codeVerifier);
+  sessionStorage.setItem(SESSION_KEYS.CODE_VERIFIER, codeVerifier);
   
   // Discover OAuth endpoints
   const metadata = await discoverOAuthMetadata(serverUrl);
@@ -53,7 +54,7 @@ export async function startOAuthFlow(serverUrl: string): Promise<string> {
 
 export async function handleOAuthCallback(serverUrl: string, code: string): Promise<string> {
   // Get stored code verifier
-  const codeVerifier = sessionStorage.getItem('mcp_code_verifier');
+  const codeVerifier = sessionStorage.getItem(SESSION_KEYS.CODE_VERIFIER);
   if (!codeVerifier) {
     throw new Error('No code verifier found');
   }
diff --git a/client/src/lib/constants.ts b/client/src/lib/constants.ts
new file mode 100644
index 0000000..b882179
--- /dev/null
+++ b/client/src/lib/constants.ts
@@ -0,0 +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;
\ No newline at end of file
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index f12d3cd..96a50a3 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -14,6 +14,7 @@ import { useState } from "react";
 import { toast } from "react-toastify";
 import { z } from "zod";
 import { startOAuthFlow } from "../auth";
+import { SESSION_KEYS } from "../constants";
 import { Notification, StdErrNotificationSchema } from "../notificationTypes";
 
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
@@ -167,7 +168,7 @@ export function useConnection({
         console.error("Failed to connect to MCP server:", error);
         if (error instanceof SseError && error.code === 401) {
           // Store the server URL for the callback handler
-          sessionStorage.setItem('mcp_server_url', sseUrl);
+          sessionStorage.setItem(SESSION_KEYS.SERVER_URL, sseUrl);
           const redirectUrl = await startOAuthFlow(sseUrl);
           window.location.href = redirectUrl;
         }