Extract session storage keys into constants

Author: jspahrsummers

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) {

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');
   }

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;

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;
         }