hzhang/inspector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract session storage keys into constants

Browse Source
This commit is contained in:
Justin Spahr-Summers
2025-01-24 13:09:58 +00:00
parent 23f89e49b8
commit 02cfb47c83
4 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/OAuthCallback.tsx
View File

@@ -1,12 +1,13 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { handleOAuthCallback } from '../lib/auth'; import { handleOAuthCallback } from '../lib/auth';
import { SESSION_KEYS } from '../lib/constants';
const OAuthCallback = () => { const OAuthCallback = () => {
useEffect(() => { useEffect(() => {
const handleCallback = async () => { const handleCallback = async () => {
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const code = params.get('code'); const code = params.get('code');
const serverUrl = sessionStorage.getItem('mcp_server_url'); const serverUrl = sessionStorage.getItem(SESSION_KEYS.SERVER_URL);
if (!code || !serverUrl) { if (!code || !serverUrl) {
console.error('Missing code or server URL'); console.error('Missing code or server URL');
@@ -17,7 +18,7 @@ const OAuthCallback = () => {
try { try {
const accessToken = await handleOAuthCallback(serverUrl, code); const accessToken = await handleOAuthCallback(serverUrl, code);
// Store the access token for future use // 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 // Redirect back to the main app
window.location.href = '/'; window.location.href = '/';
} catch (error) { } catch (error) {

5
client/src/lib/auth.ts
View File

@@ -1,4 +1,5 @@
import pkceChallenge from 'pkce-challenge'; import pkceChallenge from 'pkce-challenge';
import { SESSION_KEYS } from './constants';
export interface OAuthMetadata { export interface OAuthMetadata {
authorization_endpoint: string; authorization_endpoint: string;
@@ -36,7 +37,7 @@ export async function startOAuthFlow(serverUrl: string): Promise<string> {
const codeChallenge = challenge.code_challenge; const codeChallenge = challenge.code_challenge;
// Store code verifier for later use // Store code verifier for later use
sessionStorage.setItem('mcp_code_verifier', codeVerifier); sessionStorage.setItem(SESSION_KEYS.CODE_VERIFIER, codeVerifier);
// Discover OAuth endpoints // Discover OAuth endpoints
const metadata = await discoverOAuthMetadata(serverUrl); 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> { export async function handleOAuthCallback(serverUrl: string, code: string): Promise<string> {
// Get stored code verifier // Get stored code verifier
const codeVerifier = sessionStorage.getItem('mcp_code_verifier'); const codeVerifier = sessionStorage.getItem(SESSION_KEYS.CODE_VERIFIER);
if (!codeVerifier) { if (!codeVerifier) {
throw new Error('No code verifier found'); throw new Error('No code verifier found');
} }

6
client/src/lib/constants.ts Normal file
View File

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

3
client/src/lib/hooks/useConnection.ts
View File

@@ -14,6 +14,7 @@ import { useState } from "react";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { z } from "zod"; import { z } from "zod";
import { startOAuthFlow } from "../auth"; import { startOAuthFlow } from "../auth";
import { SESSION_KEYS } from "../constants";
import { Notification, StdErrNotificationSchema } from "../notificationTypes"; import { Notification, StdErrNotificationSchema } from "../notificationTypes";
const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000; const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
@@ -167,7 +168,7 @@ export function useConnection({
console.error("Failed to connect to MCP server:", error); console.error("Failed to connect to MCP server:", error);
if (error instanceof SseError && error.code === 401) { if (error instanceof SseError && error.code === 401) {
// Store the server URL for the callback handler // 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); const redirectUrl = await startOAuthFlow(sseUrl);
window.location.href = redirectUrl; window.location.href = redirectUrl;
} }