Guided-auth removal, OAuth smoke testing, and TUI/CLI support (#1531)
* refactor(web): update OAuth E2E tests to use new authentication method - Replaced `runGuidedAuth` with `authenticate` in the InspectorClient OAuth end-to-end tests to support quick authentication with CIMD pre-registration. - Updated comments to reflect the change in authentication method and its support for HTTP test metadata URLs. - Ensured that the tests continue to validate the expected authorization URL after the change. Additionally, imported `ensureCimdClientRegistration` in the OAuthManager to streamline client registration during the authentication process. * Guided-auth removal, OAuth smoke testing, and TUI/CLI support * Added CLI OAuth runner flags tests * Added clarifying comment on port 0 binding * README notes on TUI oauth callback port, prettier fixes for CLI tests * CIMD validation uses inline like EMA IdP * Fixed TUI test failures from merge * test: bring 5 OAuth files over the 90 per-file coverage gate The guided-auth-removal work added/touched several files that fell below the repo's >=90 per-file coverage gate (npm run coverage). CI doesn't run the gate (it's local-only), so validate + test:integration passed while these gaps slipped through. Bring them all back over the line: - core/auth/node/runner-oauth-callback.ts: test bad-URL/non-http-scheme throws, no-port->80 default, and IPv6 hostname bracketing. Annotate the provably-dead guards (empty host, out-of-range port, String(err) fallback, pathname "/" fallback) -- all rejected by new URL() upstream -- with justified v8 ignore comments instead of lowering the gate. - core/auth/cimd.ts: test the AS-doesn't-support-CIMD early return. - core/react/useClientSettingsDraft.ts: test the functional-updater path, the stale-onChange-after-close prev===null guard, and the timer-fires-after-close value===null guard. - ClientSettingsForm.tsx: test the CIMD checkbox toggle and CIMD URL clear. - clients/tui/src/utils/oauthDisplay.ts: test static/dcr registration kinds, the expired IdP session, and the configured-scope/empty-scope branches of formatScopes. npm run coverage now passes (exit 0) across web, cli, tui, launcher. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: cliffhall <cliff@futurescale.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bob Dickinson
GitHub
parent
4a927d3978
commit
13dafe457b
3 changed files with 5702 additions and 4444 deletions
|
|
@ -12,7 +12,6 @@ import { dirname, join } from "path";
|
|||
import type {
|
||||
MessageEntry,
|
||||
FetchRequestEntry,
|
||||
MCPServerConfig,
|
||||
InspectorClientOptions,
|
||||
InspectorClientEnvironment,
|
||||
} from "@inspector/core/mcp/index.js";
|
||||
|
|
@ -45,7 +44,15 @@ import { useStderrLog } from "@inspector/core/react/useStderrLog.js";
|
|||
import {
|
||||
CallbackNavigation,
|
||||
MutableRedirectUrlProvider,
|
||||
isUnauthorizedError,
|
||||
} from "@inspector/core/auth/index.js";
|
||||
import { isEmaClientNotConfiguredError } from "@inspector/core/auth/ema/clientConfigError.js";
|
||||
import type { ClientConfig } from "@inspector/core/client/types.js";
|
||||
import {
|
||||
buildRunnerClientAuthOptions,
|
||||
isOAuthCapableServerConfig,
|
||||
} from "@inspector/core/client/runner.js";
|
||||
import { formatRunnerOAuthRedirectUrl } from "@inspector/core/auth/node/runner-oauth-callback.js";
|
||||
import {
|
||||
createOAuthCallbackServer,
|
||||
type OAuthCallbackServer,
|
||||
|
|
@ -114,6 +121,7 @@ type FocusArea =
|
|||
|
||||
interface AppProps {
|
||||
mcpServers: Record<string, TuiServer>;
|
||||
clientConfig: ClientConfig;
|
||||
clientId?: string;
|
||||
clientSecret?: string;
|
||||
clientMetadataUrl?: string;
|
||||
|
|
@ -124,15 +132,9 @@ interface AppProps {
|
|||
};
|
||||
}
|
||||
|
||||
/** HTTP transports (SSE, streamable-http) can use OAuth. No config gate. */
|
||||
function isOAuthCapableServer(config: MCPServerConfig | null): boolean {
|
||||
if (!config) return false;
|
||||
const c = config as MCPServerConfig & { oauth?: unknown };
|
||||
return c.type === "sse" || c.type === "streamable-http";
|
||||
}
|
||||
|
||||
function App({
|
||||
mcpServers,
|
||||
clientConfig,
|
||||
clientId,
|
||||
clientSecret,
|
||||
clientMetadataUrl,
|
||||
|
|
@ -168,13 +170,13 @@ function App({
|
|||
logging?: number;
|
||||
}>({});
|
||||
const [oauthStatus, setOauthStatus] = useState<
|
||||
"idle" | "authenticating" | "success" | "error"
|
||||
"idle" | "authenticating" | "error"
|
||||
>("idle");
|
||||
const [oauthMessage, setOauthMessage] = useState<string | null>(null);
|
||||
const [oauthRevision, setOauthRevision] = useState(0);
|
||||
const [connectError, setConnectError] = useState<string | null>(null);
|
||||
const oauthInProgressRef = useRef(false);
|
||||
const [selectedAuthAction, setSelectedAuthAction] = useState<
|
||||
"guided" | "quick" | "clear"
|
||||
>("guided");
|
||||
const callbackServerRef = useRef<OAuthCallbackServer | null>(null);
|
||||
|
||||
// Tool test modal state
|
||||
const [toolTestModal, setToolTestModal] = useState<{
|
||||
|
|
@ -287,23 +289,11 @@ function App({
|
|||
.map((m) => [m.key, m.value]),
|
||||
)
|
||||
: undefined;
|
||||
const oauthFromSettings =
|
||||
savedSettings &&
|
||||
(savedSettings.oauthClientId ||
|
||||
savedSettings.oauthClientSecret ||
|
||||
savedSettings.oauthScopes)
|
||||
? {
|
||||
...(savedSettings.oauthClientId && {
|
||||
clientId: savedSettings.oauthClientId,
|
||||
}),
|
||||
...(savedSettings.oauthClientSecret && {
|
||||
clientSecret: savedSettings.oauthClientSecret,
|
||||
}),
|
||||
...(savedSettings.oauthScopes && {
|
||||
scope: savedSettings.oauthScopes,
|
||||
}),
|
||||
}
|
||||
: undefined;
|
||||
const clientAuthOptions = buildRunnerClientAuthOptions(
|
||||
clientConfig,
|
||||
savedSettings,
|
||||
{ clientId, clientSecret, clientMetadataUrl },
|
||||
);
|
||||
const opts: InspectorClientOptions = {
|
||||
environment,
|
||||
pipeStderr: true,
|
||||
|
|
@ -316,12 +306,15 @@ function App({
|
|||
defaultMetadata,
|
||||
}),
|
||||
...(savedSettings && { serverSettings: savedSettings }),
|
||||
...clientAuthOptions,
|
||||
};
|
||||
if (isOAuthCapableServer(serverConfig)) {
|
||||
if (isOAuthCapableServerConfig(serverConfig)) {
|
||||
const redirectUrlProvider =
|
||||
redirectUrlProvidersRef.current[serverName] ??
|
||||
(redirectUrlProvidersRef.current[serverName] =
|
||||
new MutableRedirectUrlProvider());
|
||||
redirectUrlProvider.redirectUrl =
|
||||
formatRunnerOAuthRedirectUrl(callbackUrlConfig);
|
||||
environment.oauth = {
|
||||
storage: new NodeOAuthStorage(),
|
||||
navigation: new CallbackNavigation(
|
||||
|
|
@ -329,12 +322,6 @@ function App({
|
|||
),
|
||||
redirectUrlProvider,
|
||||
};
|
||||
opts.oauth = {
|
||||
...(oauthFromSettings ?? {}),
|
||||
...(clientId && { clientId }),
|
||||
...(clientSecret && { clientSecret }),
|
||||
...(clientMetadataUrl && { clientMetadataUrl }),
|
||||
};
|
||||
}
|
||||
const client = new InspectorClient(serverConfig, opts);
|
||||
newClients[serverName] = client;
|
||||
|
|
@ -373,11 +360,19 @@ function App({
|
|||
setStderrLogStates((prev) => ({ ...prev, ...newStderrLogStates }));
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [clientId, clientSecret, clientMetadataUrl]);
|
||||
}, [
|
||||
clientConfig,
|
||||
clientId,
|
||||
clientSecret,
|
||||
clientMetadataUrl,
|
||||
callbackUrlConfig,
|
||||
]);
|
||||
|
||||
// Cleanup: destroy managers and disconnect all clients on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
void callbackServerRef.current?.stop();
|
||||
callbackServerRef.current = null;
|
||||
Object.values(managedToolsStates).forEach((manager) => {
|
||||
manager.destroy();
|
||||
});
|
||||
|
|
@ -435,7 +430,7 @@ function App({
|
|||
if (
|
||||
activeTab === "auth" &&
|
||||
selectedServerConfig &&
|
||||
!isOAuthCapableServer(selectedServerConfig)
|
||||
!isOAuthCapableServerConfig(selectedServerConfig)
|
||||
) {
|
||||
setActiveTab("info");
|
||||
}
|
||||
|
|
@ -455,6 +450,7 @@ function App({
|
|||
instructions: inspectorInstructions,
|
||||
connect: connectInspector,
|
||||
disconnect: disconnectInspector,
|
||||
lastError: inspectorLastError,
|
||||
} = useInspectorClient(selectedInspectorClient);
|
||||
|
||||
// Log state from managers (per-server)
|
||||
|
|
@ -538,46 +534,23 @@ function App({
|
|||
selectedManagedPromptsState,
|
||||
);
|
||||
|
||||
// Connect handler - InspectorClient now handles fetching server data automatically
|
||||
const handleConnect = useCallback(async () => {
|
||||
if (!selectedServer || !selectedInspectorClient) return;
|
||||
|
||||
try {
|
||||
await connectInspector();
|
||||
// InspectorClient automatically fetches server data (capabilities, tools, resources, resource templates, prompts, etc.)
|
||||
// on connect, so we don't need to do anything here
|
||||
} catch {
|
||||
// Error handling is done by InspectorClient and will be reflected in status
|
||||
}
|
||||
}, [selectedServer, selectedInspectorClient, connectInspector]);
|
||||
|
||||
// Disconnect handler
|
||||
const handleDisconnect = useCallback(async () => {
|
||||
if (!selectedServer) return;
|
||||
await disconnectInspector();
|
||||
// InspectorClient will update status automatically, and data is preserved
|
||||
}, [selectedServer, disconnectInspector]);
|
||||
|
||||
// Shared ref for OAuth callback server; stop before starting new (avoids EADDRINUSE when prior auth failed without redirect)
|
||||
const callbackServerRef = useRef<OAuthCallbackServer | null>(null);
|
||||
|
||||
// OAuth Quick Auth (quick execution; callback server + open URL)
|
||||
const handleQuickAuth = useCallback(async () => {
|
||||
// Connect — on 401, run OAuth then retry (same pattern as web App.tsx).
|
||||
const runOAuthAuthentication = useCallback(async () => {
|
||||
if (
|
||||
!selectedServer ||
|
||||
!selectedInspectorClient ||
|
||||
!selectedServerConfig ||
|
||||
!isOAuthCapableServer(selectedServerConfig)
|
||||
!isOAuthCapableServerConfig(selectedServerConfig)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (oauthInProgressRef.current) return;
|
||||
oauthInProgressRef.current = true;
|
||||
setOauthStatus("authenticating");
|
||||
setOauthMessage(null);
|
||||
getTuiLogger().info(
|
||||
{ server: selectedServer },
|
||||
"OAuth authentication started (Quick Auth)",
|
||||
"OAuth authentication started",
|
||||
);
|
||||
const existing = callbackServerRef.current;
|
||||
if (existing) {
|
||||
|
|
@ -624,12 +597,7 @@ function App({
|
|||
if (authUrl !== undefined) {
|
||||
await flowDone;
|
||||
}
|
||||
setOauthStatus("success");
|
||||
setOauthMessage("OAuth complete. Press C to connect.");
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(msg);
|
||||
setOauthRevision((n) => n + 1);
|
||||
} finally {
|
||||
oauthInProgressRef.current = false;
|
||||
}
|
||||
|
|
@ -640,186 +608,92 @@ function App({
|
|||
callbackServerBaseOptions,
|
||||
]);
|
||||
|
||||
// OAuth Guided Auth - step-by-step
|
||||
const handleGuidedStart = useCallback(async () => {
|
||||
if (
|
||||
!selectedServer ||
|
||||
!selectedInspectorClient ||
|
||||
!selectedServerConfig ||
|
||||
!isOAuthCapableServer(selectedServerConfig)
|
||||
) {
|
||||
const handleConnect = useCallback(async () => {
|
||||
if (!selectedServer || !selectedInspectorClient || !selectedServerConfig) {
|
||||
return;
|
||||
}
|
||||
if (oauthInProgressRef.current) return;
|
||||
oauthInProgressRef.current = true;
|
||||
setOauthStatus("authenticating");
|
||||
setOauthMessage(null);
|
||||
getTuiLogger().info(
|
||||
{ server: selectedServer },
|
||||
"OAuth authentication started (Guided Auth)",
|
||||
);
|
||||
// Stop any previous callback server (e.g. from failed auth where AS never redirected)
|
||||
const existing = callbackServerRef.current;
|
||||
if (existing) {
|
||||
await existing.stop();
|
||||
callbackServerRef.current = null;
|
||||
}
|
||||
const callbackServer = createOAuthCallbackServer();
|
||||
callbackServerRef.current = callbackServer;
|
||||
try {
|
||||
const { redirectUrl } = await callbackServer.start({
|
||||
...callbackServerBaseOptions,
|
||||
onCallback: async (params) => {
|
||||
try {
|
||||
await selectedInspectorClient!.completeOAuthFlow(params.code);
|
||||
setOauthStatus("success");
|
||||
setOauthMessage("OAuth complete. Press C to connect.");
|
||||
} catch (err) {
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
callbackServerRef.current = null;
|
||||
}
|
||||
},
|
||||
onError: (params) => {
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(
|
||||
params.error_description ?? params.error ?? "OAuth error",
|
||||
);
|
||||
void callbackServer.stop();
|
||||
callbackServerRef.current = null;
|
||||
},
|
||||
});
|
||||
const redirectUrlProvider =
|
||||
redirectUrlProvidersRef.current[selectedServer];
|
||||
if (redirectUrlProvider) {
|
||||
redirectUrlProvider.redirectUrl = redirectUrl;
|
||||
}
|
||||
await selectedInspectorClient.beginGuidedAuth();
|
||||
|
||||
const finishConnect = async () => {
|
||||
await connectInspector();
|
||||
setConnectError(null);
|
||||
setOauthStatus("idle");
|
||||
} catch (err) {
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
oauthInProgressRef.current = false;
|
||||
}
|
||||
}, [
|
||||
selectedServer,
|
||||
selectedInspectorClient,
|
||||
selectedServerConfig,
|
||||
callbackServerBaseOptions,
|
||||
]);
|
||||
|
||||
const handleGuidedAdvance = useCallback(async () => {
|
||||
if (!selectedInspectorClient) return;
|
||||
if (oauthInProgressRef.current) return;
|
||||
oauthInProgressRef.current = true;
|
||||
setOauthStatus("authenticating");
|
||||
setOauthMessage(null);
|
||||
getTuiLogger().info(
|
||||
"OAuth authentication started (Guided Auth advance step)",
|
||||
);
|
||||
try {
|
||||
await selectedInspectorClient.proceedOAuthStep();
|
||||
const state = selectedInspectorClient.getOAuthFlowState();
|
||||
if (state?.oauthStep === "authorization_code" && state.authorizationUrl) {
|
||||
await openUrl(state.authorizationUrl);
|
||||
}
|
||||
setOauthStatus("idle");
|
||||
} catch (err) {
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
oauthInProgressRef.current = false;
|
||||
}
|
||||
}, [selectedInspectorClient]);
|
||||
|
||||
const handleRunGuidedToCompletion = useCallback(async () => {
|
||||
if (
|
||||
!selectedServer ||
|
||||
!selectedInspectorClient ||
|
||||
!selectedServerConfig ||
|
||||
!isOAuthCapableServer(selectedServerConfig)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (oauthInProgressRef.current) return;
|
||||
oauthInProgressRef.current = true;
|
||||
setOauthStatus("authenticating");
|
||||
setOauthMessage(null);
|
||||
getTuiLogger().info(
|
||||
{ server: selectedServer },
|
||||
"OAuth authentication started (Run Guided Auth to completion)",
|
||||
);
|
||||
|
||||
const ensureCallbackServer = async () => {
|
||||
if (callbackServerRef.current) return;
|
||||
const callbackServer = createOAuthCallbackServer();
|
||||
callbackServerRef.current = callbackServer;
|
||||
const { redirectUrl } = await callbackServer.start({
|
||||
...callbackServerBaseOptions,
|
||||
onCallback: async (params) => {
|
||||
try {
|
||||
await selectedInspectorClient!.completeOAuthFlow(params.code);
|
||||
setOauthStatus("success");
|
||||
setOauthMessage("OAuth complete. Press C to connect.");
|
||||
} catch (err) {
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
callbackServerRef.current = null;
|
||||
}
|
||||
},
|
||||
onError: (params) => {
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(
|
||||
params.error_description ?? params.error ?? "OAuth error",
|
||||
);
|
||||
void callbackServer.stop();
|
||||
callbackServerRef.current = null;
|
||||
},
|
||||
});
|
||||
const redirectUrlProvider =
|
||||
redirectUrlProvidersRef.current[selectedServer];
|
||||
if (redirectUrlProvider) {
|
||||
redirectUrlProvider.redirectUrl = redirectUrl;
|
||||
}
|
||||
setOauthMessage(null);
|
||||
};
|
||||
|
||||
try {
|
||||
await ensureCallbackServer();
|
||||
const authUrl = await selectedInspectorClient.runGuidedAuth();
|
||||
if (authUrl) {
|
||||
await openUrl(authUrl);
|
||||
}
|
||||
setOauthStatus("idle");
|
||||
await finishConnect();
|
||||
} catch (err) {
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
oauthInProgressRef.current = false;
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
setConnectError(msg);
|
||||
|
||||
if (isEmaClientNotConfiguredError(err)) {
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
isOAuthCapableServerConfig(selectedServerConfig) &&
|
||||
isUnauthorizedError(err)
|
||||
) {
|
||||
try {
|
||||
setOauthStatus("authenticating");
|
||||
setOauthMessage(null);
|
||||
// Tear down the failed handshake transport so the post-OAuth connect
|
||||
// creates a fresh transport with tokens from storage (same as web,
|
||||
// which reloads the client after redirect).
|
||||
await disconnectInspector();
|
||||
await runOAuthAuthentication();
|
||||
await finishConnect();
|
||||
} catch (authErr) {
|
||||
const authMsg =
|
||||
authErr instanceof Error ? authErr.message : String(authErr);
|
||||
setConnectError(authMsg);
|
||||
if (isEmaClientNotConfiguredError(authErr)) {
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(authErr.message);
|
||||
return;
|
||||
}
|
||||
setOauthStatus("error");
|
||||
setOauthMessage(authMsg);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, [
|
||||
selectedServer,
|
||||
selectedInspectorClient,
|
||||
selectedServerConfig,
|
||||
callbackServerBaseOptions,
|
||||
connectInspector,
|
||||
disconnectInspector,
|
||||
runOAuthAuthentication,
|
||||
]);
|
||||
|
||||
const handleClearOAuth = useCallback(() => {
|
||||
if (selectedInspectorClient) {
|
||||
selectedInspectorClient.clearOAuthTokens();
|
||||
setOauthStatus("idle");
|
||||
setOauthMessage(null);
|
||||
// Disconnect handler
|
||||
const handleDisconnect = useCallback(async () => {
|
||||
if (!selectedServer) return;
|
||||
await disconnectInspector();
|
||||
// InspectorClient will update status automatically, and data is preserved
|
||||
}, [selectedServer, disconnectInspector]);
|
||||
|
||||
const handleClearOAuth = useCallback(async () => {
|
||||
if (!selectedInspectorClient) return;
|
||||
selectedInspectorClient.clearOAuthTokens();
|
||||
setOauthStatus("idle");
|
||||
setOauthMessage(null);
|
||||
setConnectError(null);
|
||||
if (inspectorStatus === "connected" || inspectorStatus === "connecting") {
|
||||
await disconnectInspector();
|
||||
}
|
||||
}, [selectedInspectorClient]);
|
||||
setOauthRevision((n) => n + 1);
|
||||
}, [selectedInspectorClient, inspectorStatus, disconnectInspector]);
|
||||
|
||||
// Build current server state from InspectorClient data (tools from ManagedToolsState)
|
||||
const currentServerState = useMemo(() => {
|
||||
if (!selectedServer) return null;
|
||||
return {
|
||||
status: inspectorStatus,
|
||||
error: null, // InspectorClient doesn't track error in state, only emits error events
|
||||
error: connectError ?? inspectorLastError ?? null,
|
||||
capabilities: inspectorCapabilities,
|
||||
serverInfo: inspectorServerInfo,
|
||||
instructions: inspectorInstructions,
|
||||
|
|
@ -832,6 +706,8 @@ function App({
|
|||
}, [
|
||||
selectedServer,
|
||||
inspectorStatus,
|
||||
connectError,
|
||||
inspectorLastError,
|
||||
inspectorCapabilities,
|
||||
inspectorServerInfo,
|
||||
inspectorInstructions,
|
||||
|
|
@ -842,22 +718,6 @@ function App({
|
|||
inspectorStderrLogs,
|
||||
]);
|
||||
|
||||
// 401 on connect → prompt to authenticate (HTTP servers). Hide during/after auth.
|
||||
const show401AuthHint = useMemo(() => {
|
||||
if (inspectorStatus !== "error") return false;
|
||||
if (oauthStatus === "authenticating" || oauthStatus === "success")
|
||||
return false;
|
||||
if (!selectedServerConfig || !isOAuthCapableServer(selectedServerConfig))
|
||||
return false;
|
||||
return inspectorFetchRequests.some((r) => r.responseStatus === 401);
|
||||
}, [
|
||||
inspectorStatus,
|
||||
oauthStatus,
|
||||
selectedServerConfig,
|
||||
inspectorFetchRequests,
|
||||
]);
|
||||
|
||||
// Helper functions to render details modal content
|
||||
const renderResourceDetails = (
|
||||
resource:
|
||||
| Resource
|
||||
|
|
@ -1220,29 +1080,11 @@ function App({
|
|||
exit();
|
||||
}
|
||||
|
||||
// G/Q/S: switch to Auth tab (if not already) and select Guided/Quick/Clear
|
||||
const showAuthTabForAccel =
|
||||
!!selectedServer &&
|
||||
!!selectedServerConfig &&
|
||||
isOAuthCapableServer(selectedServerConfig);
|
||||
const lower = input.toLowerCase();
|
||||
if (
|
||||
showAuthTabForAccel &&
|
||||
(lower === "g" || lower === "q" || lower === "s")
|
||||
) {
|
||||
setActiveTab("auth");
|
||||
setFocus("tabContentList");
|
||||
setSelectedAuthAction(
|
||||
lower === "g" ? "guided" : lower === "q" ? "quick" : "clear",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Tab switching with accelerator keys (first character of tab name)
|
||||
const showAuthTab =
|
||||
!!selectedServer &&
|
||||
!!selectedServerConfig &&
|
||||
isOAuthCapableServer(selectedServerConfig);
|
||||
isOAuthCapableServerConfig(selectedServerConfig);
|
||||
const showLoggingTab =
|
||||
!!selectedServer &&
|
||||
inspectorClients[selectedServer]?.getServerType() === "stdio";
|
||||
|
|
@ -1265,8 +1107,16 @@ function App({
|
|||
]),
|
||||
);
|
||||
if (tabAccelerators[input.toLowerCase()]) {
|
||||
setActiveTab(tabAccelerators[input.toLowerCase()]);
|
||||
setFocus("tabs");
|
||||
const nextTab = tabAccelerators[input.toLowerCase()]!;
|
||||
setActiveTab(nextTab);
|
||||
setFocus(nextTab === "auth" ? "tabContentList" : "tabs");
|
||||
} else if (
|
||||
activeTab === "auth" &&
|
||||
showAuthTab &&
|
||||
input.toLowerCase() === "s"
|
||||
) {
|
||||
void handleClearOAuth();
|
||||
setFocus("tabContentList");
|
||||
} else if (key.tab && !key.shift) {
|
||||
// Flat focus order: servers -> tabs -> list -> details -> wrap to servers
|
||||
const focusOrder: FocusArea[] =
|
||||
|
|
@ -1322,7 +1172,7 @@ function App({
|
|||
const showAuthTab =
|
||||
!!selectedServer &&
|
||||
!!selectedServerConfig &&
|
||||
isOAuthCapableServer(selectedServerConfig);
|
||||
isOAuthCapableServerConfig(selectedServerConfig);
|
||||
const showLoggingTab =
|
||||
!!selectedServer &&
|
||||
inspectorClients[selectedServer]?.getServerType() === "stdio";
|
||||
|
|
@ -1358,7 +1208,6 @@ function App({
|
|||
}
|
||||
|
||||
// Accelerator keys for connect/disconnect (work from anywhere)
|
||||
// 'a' switches to Auth tab; use the Auth tab for Quick/Guided auth
|
||||
if (selectedServer) {
|
||||
if (
|
||||
input.toLowerCase() === "c" &&
|
||||
|
|
@ -1543,24 +1392,14 @@ function App({
|
|||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
{show401AuthHint && (
|
||||
{oauthStatus === "authenticating" && (
|
||||
<Box marginTop={1}>
|
||||
<Text color="yellow">
|
||||
401 Unauthorized. Press <Text bold>A</Text> to authenticate.
|
||||
</Text>
|
||||
<Text dimColor>OAuth: authenticating…</Text>
|
||||
</Box>
|
||||
)}
|
||||
{oauthStatus !== "idle" && (
|
||||
{oauthStatus === "error" && oauthMessage && (
|
||||
<Box marginTop={1}>
|
||||
{oauthStatus === "authenticating" && (
|
||||
<Text dimColor>OAuth: authenticating…</Text>
|
||||
)}
|
||||
{oauthStatus === "success" && oauthMessage && (
|
||||
<Text color="green">{oauthMessage}</Text>
|
||||
)}
|
||||
{oauthStatus === "error" && oauthMessage && (
|
||||
<Text color="red">OAuth: {oauthMessage}</Text>
|
||||
)}
|
||||
<Text color="red">OAuth: {oauthMessage}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
|
@ -1577,7 +1416,7 @@ function App({
|
|||
!!(
|
||||
selectedServer &&
|
||||
selectedServerConfig &&
|
||||
isOAuthCapableServer(selectedServerConfig)
|
||||
isOAuthCapableServerConfig(selectedServerConfig)
|
||||
)
|
||||
}
|
||||
showLogging={
|
||||
|
|
@ -1623,26 +1462,23 @@ function App({
|
|||
{activeTab === "auth" &&
|
||||
selectedServer &&
|
||||
selectedServerConfig &&
|
||||
isOAuthCapableServer(selectedServerConfig) ? (
|
||||
isOAuthCapableServerConfig(selectedServerConfig) ? (
|
||||
<AuthTab
|
||||
serverName={selectedServer}
|
||||
serverConfig={selectedServerConfig}
|
||||
inspectorClient={selectedInspectorClient}
|
||||
oauthStatus={oauthStatus}
|
||||
oauthMessage={oauthMessage}
|
||||
oauthRevision={oauthRevision}
|
||||
width={contentWidth}
|
||||
height={contentHeight}
|
||||
focused={
|
||||
focus === "tabContentList" || focus === "tabContentDetails"
|
||||
}
|
||||
selectedAction={selectedAuthAction}
|
||||
onSelectedActionChange={setSelectedAuthAction}
|
||||
onQuickAuth={handleQuickAuth}
|
||||
onGuidedStart={handleGuidedStart}
|
||||
onGuidedAdvance={handleGuidedAdvance}
|
||||
onRunGuidedToCompletion={handleRunGuidedToCompletion}
|
||||
onClearOAuth={handleClearOAuth}
|
||||
isOAuthCapable={true}
|
||||
onClearOAuth={() => {
|
||||
void handleClearOAuth();
|
||||
}}
|
||||
connectionStatus={inspectorStatus}
|
||||
/>
|
||||
) : null}
|
||||
{activeTab === "resources" &&
|
||||
|
|
|
|||
|
|
@ -1,53 +1,41 @@
|
|||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { Box, Text, useInput, type Key } from "ink";
|
||||
import { ScrollView, type ScrollViewRef } from "ink-scroll-view";
|
||||
import { SelectableItem } from "./SelectableItem.js";
|
||||
import type {
|
||||
MCPServerConfig,
|
||||
InspectorClient,
|
||||
ConnectionStatus,
|
||||
} from "@inspector/core/mcp/index.js";
|
||||
import type { OAuthFlowState, OAuthStep } from "@inspector/core/auth/index.js";
|
||||
|
||||
const STEP_LABELS: Record<OAuthStep, string> = {
|
||||
metadata_discovery: "Metadata Discovery",
|
||||
client_registration: "Client Registration",
|
||||
authorization_redirect: "Preparing Authorization",
|
||||
authorization_code: "Request Authorization Code",
|
||||
token_request: "Token Request",
|
||||
complete: "Authentication Complete",
|
||||
};
|
||||
|
||||
const STEP_ORDER: OAuthStep[] = [
|
||||
"metadata_discovery",
|
||||
"client_registration",
|
||||
"authorization_redirect",
|
||||
"authorization_code",
|
||||
"token_request",
|
||||
"complete",
|
||||
];
|
||||
|
||||
function stepIndex(step: OAuthStep): number {
|
||||
const i = STEP_ORDER.indexOf(step);
|
||||
return i >= 0 ? i : 0;
|
||||
}
|
||||
import type { OAuthConnectionState } from "@inspector/core/auth/types.js";
|
||||
import {
|
||||
formatAuthProtocol,
|
||||
formatClientRegistrationKind,
|
||||
formatIdpSession,
|
||||
formatScopes,
|
||||
} from "../utils/oauthDisplay.js";
|
||||
|
||||
interface AuthTabProps {
|
||||
serverName: string | null;
|
||||
serverConfig: MCPServerConfig | null;
|
||||
inspectorClient: InspectorClient | null;
|
||||
oauthStatus: "idle" | "authenticating" | "success" | "error";
|
||||
oauthStatus: "idle" | "authenticating" | "error";
|
||||
oauthMessage: string | null;
|
||||
oauthRevision: number;
|
||||
width: number;
|
||||
height: number;
|
||||
focused?: boolean;
|
||||
selectedAction: "guided" | "quick" | "clear";
|
||||
onSelectedActionChange: (action: "guided" | "quick" | "clear") => void;
|
||||
onQuickAuth: () => Promise<void>;
|
||||
onGuidedStart: () => Promise<void>;
|
||||
onGuidedAdvance: () => Promise<void>;
|
||||
onRunGuidedToCompletion: () => Promise<void>;
|
||||
onClearOAuth: () => void;
|
||||
isOAuthCapable: boolean;
|
||||
connectionStatus: ConnectionStatus;
|
||||
}
|
||||
|
||||
function OAuthDetailRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<Box flexDirection="row" gap={1}>
|
||||
<Text dimColor>{label}:</Text>
|
||||
<Text>{value}</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export function AuthTab({
|
||||
|
|
@ -55,115 +43,57 @@ export function AuthTab({
|
|||
inspectorClient,
|
||||
oauthStatus,
|
||||
oauthMessage,
|
||||
oauthRevision,
|
||||
width,
|
||||
height,
|
||||
focused = false,
|
||||
selectedAction,
|
||||
onSelectedActionChange,
|
||||
onQuickAuth,
|
||||
onGuidedStart,
|
||||
onGuidedAdvance,
|
||||
onRunGuidedToCompletion,
|
||||
onClearOAuth,
|
||||
isOAuthCapable,
|
||||
connectionStatus,
|
||||
}: AuthTabProps) {
|
||||
const isLiveConnection =
|
||||
connectionStatus === "connected" || connectionStatus === "connecting";
|
||||
const scrollViewRef = useRef<ScrollViewRef>(null);
|
||||
const [oauthFlowState, setOauthFlowState] = useState<
|
||||
OAuthFlowState | undefined
|
||||
const [oauthState, setOauthState] = useState<
|
||||
OAuthConnectionState | undefined
|
||||
>(undefined);
|
||||
const [guidedStarted, setGuidedStarted] = useState(false);
|
||||
const [clearedConfirmation, setClearedConfirmation] = useState(false);
|
||||
const [lastClearDisconnected, setLastClearDisconnected] = useState(false);
|
||||
|
||||
// Sync oauthFlowState from InspectorClient
|
||||
useEffect(() => {
|
||||
const refreshOAuthState = useCallback(async () => {
|
||||
if (!inspectorClient) {
|
||||
setOauthFlowState(undefined);
|
||||
setGuidedStarted(false);
|
||||
setOauthState(undefined);
|
||||
return;
|
||||
}
|
||||
|
||||
const update = () => setOauthFlowState(inspectorClient.getOAuthFlowState());
|
||||
update();
|
||||
|
||||
const onStepChange = () => update();
|
||||
inspectorClient.addEventListener("oauthStepChange", onStepChange);
|
||||
inspectorClient.addEventListener("oauthComplete", onStepChange);
|
||||
return () => {
|
||||
inspectorClient.removeEventListener("oauthStepChange", onStepChange);
|
||||
inspectorClient.removeEventListener("oauthComplete", onStepChange);
|
||||
};
|
||||
const state = await inspectorClient.getOAuthState();
|
||||
setOauthState(state);
|
||||
}, [inspectorClient]);
|
||||
|
||||
// Reset guided state when switching servers
|
||||
useEffect(() => {
|
||||
setGuidedStarted(false);
|
||||
}, [serverName]);
|
||||
void refreshOAuthState();
|
||||
}, [refreshOAuthState, oauthRevision]);
|
||||
|
||||
// Clear confirmation when switching away from Clear menu item
|
||||
useEffect(() => {
|
||||
if (selectedAction !== "clear") {
|
||||
setClearedConfirmation(false);
|
||||
}
|
||||
}, [selectedAction]);
|
||||
setClearedConfirmation(false);
|
||||
setLastClearDisconnected(false);
|
||||
}, [oauthRevision]);
|
||||
|
||||
const guidedFlowStarted = !!oauthFlowState?.oauthStep;
|
||||
const currentStep = oauthFlowState?.oauthStep ?? "metadata_discovery";
|
||||
const needsAuthCode =
|
||||
currentStep === "authorization_code" && oauthFlowState?.authorizationUrl;
|
||||
const isComplete = currentStep === "complete";
|
||||
useEffect(() => {
|
||||
if (!inspectorClient) return;
|
||||
|
||||
const handleContinue = useCallback(async () => {
|
||||
if (!guidedStarted) {
|
||||
await onGuidedStart();
|
||||
setGuidedStarted(true);
|
||||
} else if (!needsAuthCode && !isComplete) {
|
||||
await onGuidedAdvance();
|
||||
}
|
||||
}, [
|
||||
guidedStarted,
|
||||
needsAuthCode,
|
||||
isComplete,
|
||||
onGuidedStart,
|
||||
onGuidedAdvance,
|
||||
]);
|
||||
const update = () => {
|
||||
void refreshOAuthState();
|
||||
};
|
||||
inspectorClient.addEventListener("oauthComplete", update);
|
||||
return () => {
|
||||
inspectorClient.removeEventListener("oauthComplete", update);
|
||||
};
|
||||
}, [inspectorClient, refreshOAuthState]);
|
||||
|
||||
// Keyboard: G/Q/S select menu item (handled by App when not focused),
|
||||
// left/right select, Enter run, up/down scroll
|
||||
useInput(
|
||||
(input: string, key: Key) => {
|
||||
if (!focused || !isOAuthCapable) return;
|
||||
if (!focused) return;
|
||||
|
||||
const lower = input.toLowerCase();
|
||||
if (lower === "g") {
|
||||
onSelectedActionChange("guided");
|
||||
return;
|
||||
}
|
||||
if (lower === "q") {
|
||||
onSelectedActionChange("quick");
|
||||
return;
|
||||
}
|
||||
if (lower === "s") {
|
||||
onSelectedActionChange("clear");
|
||||
return;
|
||||
}
|
||||
|
||||
if (key.leftArrow) {
|
||||
onSelectedActionChange(
|
||||
selectedAction === "guided"
|
||||
? "clear"
|
||||
: selectedAction === "quick"
|
||||
? "guided"
|
||||
: "quick",
|
||||
);
|
||||
} else if (key.rightArrow) {
|
||||
onSelectedActionChange(
|
||||
selectedAction === "guided"
|
||||
? "quick"
|
||||
: selectedAction === "quick"
|
||||
? "clear"
|
||||
: "guided",
|
||||
);
|
||||
} else if (key.upArrow && scrollViewRef.current) {
|
||||
if (key.upArrow && scrollViewRef.current) {
|
||||
scrollViewRef.current.scrollBy(-1);
|
||||
} else if (key.downArrow && scrollViewRef.current) {
|
||||
scrollViewRef.current.scrollBy(1);
|
||||
|
|
@ -173,210 +103,123 @@ export function AuthTab({
|
|||
} else if (key.pageDown && scrollViewRef.current) {
|
||||
const h = scrollViewRef.current.getViewportHeight() || 1;
|
||||
scrollViewRef.current.scrollBy(h);
|
||||
} else if (key.return) {
|
||||
if (selectedAction === "guided") onRunGuidedToCompletion();
|
||||
else if (selectedAction === "quick") onQuickAuth();
|
||||
else if (selectedAction === "clear") {
|
||||
onClearOAuth();
|
||||
setClearedConfirmation(true);
|
||||
}
|
||||
} else if (input === " " && selectedAction === "guided") {
|
||||
handleContinue();
|
||||
} else if (input.toLowerCase() === "s") {
|
||||
setLastClearDisconnected(isLiveConnection);
|
||||
onClearOAuth();
|
||||
setClearedConfirmation(true);
|
||||
}
|
||||
},
|
||||
{
|
||||
isActive: focused,
|
||||
},
|
||||
{ isActive: focused },
|
||||
);
|
||||
|
||||
if (!serverName || !isOAuthCapable) {
|
||||
if (!serverName) {
|
||||
return (
|
||||
<Box width={width} height={height} paddingX={1} paddingY={1}>
|
||||
<Text dimColor>
|
||||
Select an OAuth-capable server (SSE or Streamable HTTP) to configure
|
||||
authentication.
|
||||
</Text>
|
||||
<Text dimColor>Select a server to view authentication.</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const scopes = oauthState ? formatScopes(oauthState) : undefined;
|
||||
const accessToken = oauthState?.tokens?.access_token;
|
||||
|
||||
return (
|
||||
<Box width={width} height={height} flexDirection="column" paddingX={1}>
|
||||
<Box paddingY={1} flexShrink={0}>
|
||||
<Text bold backgroundColor={focused ? "yellow" : undefined}>
|
||||
Authentication
|
||||
OAuth
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
flexGrow={0}
|
||||
overflow="hidden"
|
||||
flexDirection="column"
|
||||
gap={0}
|
||||
paddingY={0}
|
||||
>
|
||||
{/* Action bar and hint - single container for tight spacing */}
|
||||
<Box flexShrink={0} flexDirection="column" gap={0} paddingBottom={1}>
|
||||
<Box flexDirection="row" gap={2}>
|
||||
<SelectableItem
|
||||
isSelected={selectedAction === "guided"}
|
||||
bold={selectedAction === "guided"}
|
||||
>
|
||||
<Text underline>G</Text>uided Auth
|
||||
</SelectableItem>
|
||||
<SelectableItem
|
||||
isSelected={selectedAction === "quick"}
|
||||
bold={selectedAction === "quick"}
|
||||
>
|
||||
<Text underline>Q</Text>uick Auth
|
||||
</SelectableItem>
|
||||
<SelectableItem
|
||||
isSelected={selectedAction === "clear"}
|
||||
bold={selectedAction === "clear"}
|
||||
>
|
||||
|
||||
<ScrollView ref={scrollViewRef} height={height - 8}>
|
||||
<Box flexDirection="column" gap={0}>
|
||||
{oauthStatus === "authenticating" && (
|
||||
<Text color="yellow">Authenticating…</Text>
|
||||
)}
|
||||
{oauthStatus === "error" && oauthMessage && (
|
||||
<Text color="red">{oauthMessage}</Text>
|
||||
)}
|
||||
|
||||
{oauthState ? (
|
||||
<Box flexDirection="column" marginTop={1} gap={0}>
|
||||
<Text bold>OAuth Details</Text>
|
||||
<Box marginTop={1} flexDirection="column" paddingLeft={0} gap={0}>
|
||||
<OAuthDetailRow
|
||||
label="Protocol"
|
||||
value={formatAuthProtocol(oauthState.protocol)}
|
||||
/>
|
||||
<OAuthDetailRow
|
||||
label="Status"
|
||||
value={
|
||||
oauthState.authorized ? "Authorized" : "Not authorized"
|
||||
}
|
||||
/>
|
||||
{oauthState.client?.clientId && (
|
||||
<OAuthDetailRow
|
||||
label="Client ID"
|
||||
value={oauthState.client.clientId}
|
||||
/>
|
||||
)}
|
||||
{oauthState.client?.registrationKind && (
|
||||
<OAuthDetailRow
|
||||
label="Client registration"
|
||||
value={formatClientRegistrationKind(
|
||||
oauthState.client.registrationKind,
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{oauthState.protocol === "ema" &&
|
||||
oauthState.ema?.idpSession && (
|
||||
<OAuthDetailRow
|
||||
label="IdP session"
|
||||
value={formatIdpSession(oauthState.ema.idpSession)}
|
||||
/>
|
||||
)}
|
||||
{oauthState.authorizationServerMetadata
|
||||
?.authorization_endpoint && (
|
||||
<OAuthDetailRow
|
||||
label="Auth URL"
|
||||
value={
|
||||
oauthState.authorizationServerMetadata
|
||||
.authorization_endpoint
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{scopes && <OAuthDetailRow label="Scopes" value={scopes} />}
|
||||
{accessToken && (
|
||||
<OAuthDetailRow
|
||||
label="Access token"
|
||||
value={`${accessToken.slice(0, 24)}…`}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
oauthStatus !== "authenticating" && (
|
||||
<Box marginTop={1} flexDirection="column" gap={0}>
|
||||
<Text dimColor>No OAuth information yet.</Text>
|
||||
<Text dimColor>
|
||||
Connect (C) to authorize when this server requires it.
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
)}
|
||||
|
||||
<Box marginTop={2} flexDirection="column" gap={0}>
|
||||
<SelectableItem isSelected bold>
|
||||
Clear OAuth <Text underline>S</Text>tate
|
||||
{isLiveConnection && " and disconnect"}
|
||||
</SelectableItem>
|
||||
</Box>
|
||||
<Box flexDirection="column">
|
||||
{selectedAction === "guided" && (
|
||||
<>
|
||||
<Text dimColor>
|
||||
Press [Space] to advance one step through guided auth.
|
||||
</Text>
|
||||
<Text dimColor>
|
||||
Press [Enter] to run guided auth to completion.
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
{selectedAction === "quick" && (
|
||||
<Text dimColor>Press [Enter] to run quick auth.</Text>
|
||||
)}
|
||||
{selectedAction === "clear" && (
|
||||
<Text dimColor>Press [Enter] to clear OAuth state.</Text>
|
||||
{clearedConfirmation && (
|
||||
<Text color="green">
|
||||
{lastClearDisconnected
|
||||
? "OAuth state cleared. Disconnected."
|
||||
: "OAuth state cleared."}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<ScrollView ref={scrollViewRef} height={height - 10}>
|
||||
{selectedAction === "guided" && (
|
||||
<Box key="guided" flexShrink={0} flexDirection="column">
|
||||
<Text bold>Guided OAuth Flow Progress</Text>
|
||||
{STEP_ORDER.map((step) => {
|
||||
const stepIdx = stepIndex(step);
|
||||
const currentIdx = stepIndex(currentStep);
|
||||
const completed =
|
||||
guidedFlowStarted &&
|
||||
(stepIdx < currentIdx ||
|
||||
(step === currentStep && isComplete));
|
||||
const inProgress =
|
||||
guidedFlowStarted && step === currentStep && !isComplete;
|
||||
const details = oauthFlowState
|
||||
? getStepDetails(oauthFlowState, step)
|
||||
: null;
|
||||
|
||||
const icon = completed ? "✓" : inProgress ? "→" : "○";
|
||||
const color = completed
|
||||
? "green"
|
||||
: inProgress
|
||||
? "cyan"
|
||||
: "gray";
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={step}
|
||||
marginTop={1}
|
||||
flexDirection="column"
|
||||
paddingLeft={2}
|
||||
>
|
||||
<Text color={color}>
|
||||
{icon} {STEP_LABELS[step]}
|
||||
{inProgress && " (in progress)"}
|
||||
</Text>
|
||||
{completed && details && (
|
||||
<Box marginTop={1} paddingLeft={2} flexDirection="column">
|
||||
<Text dimColor>{details}</Text>
|
||||
</Box>
|
||||
)}
|
||||
{inProgress && details && (
|
||||
<Box marginTop={1} paddingLeft={2} flexDirection="column">
|
||||
<Text dimColor>{details}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Waiting for auth - URL was opened when we reached this step */}
|
||||
{oauthFlowState &&
|
||||
needsAuthCode &&
|
||||
oauthFlowState?.authorizationUrl && (
|
||||
<Box marginTop={2} flexDirection="column">
|
||||
<Text bold>Authorization URL opened in browser</Text>
|
||||
<Box marginTop={1}>
|
||||
<Text dimColor>
|
||||
{oauthFlowState.authorizationUrl.toString()}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text dimColor>
|
||||
Complete authorization in the browser. You will be
|
||||
redirected and the flow will complete automatically.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{selectedAction === "quick" && (
|
||||
<Box key="quick" flexShrink={0} flexDirection="column">
|
||||
{oauthStatus === "authenticating" && (
|
||||
<Text dimColor>Authenticating...</Text>
|
||||
)}
|
||||
{oauthStatus === "error" && oauthMessage && (
|
||||
<Text color="red">{oauthMessage}</Text>
|
||||
)}
|
||||
{oauthStatus === "success" &&
|
||||
oauthFlowState &&
|
||||
oauthFlowState.execution === "quick" &&
|
||||
(oauthFlowState.oauthTokens ||
|
||||
oauthFlowState.oauthClientInfo) && (
|
||||
<>
|
||||
<Text bold>Quick Auth Results</Text>
|
||||
{oauthFlowState.oauthClientInfo && (
|
||||
<Box marginTop={1} flexDirection="column" paddingLeft={2}>
|
||||
<Text dimColor>
|
||||
Client:{" "}
|
||||
{JSON.stringify(
|
||||
oauthFlowState.oauthClientInfo,
|
||||
null,
|
||||
2,
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
{oauthFlowState.oauthTokens && (
|
||||
<Box marginTop={1} flexDirection="column" paddingLeft={2}>
|
||||
<Text dimColor>
|
||||
Access Token:{" "}
|
||||
{oauthFlowState.oauthTokens.access_token?.slice(
|
||||
0,
|
||||
20,
|
||||
)}
|
||||
...
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{selectedAction === "clear" && clearedConfirmation && (
|
||||
<Box key="clear" flexShrink={0} flexDirection="column">
|
||||
<Text color="green">OAuth state cleared.</Text>
|
||||
</Box>
|
||||
)}
|
||||
</ScrollView>
|
||||
</Box>
|
||||
</ScrollView>
|
||||
|
||||
{focused && (
|
||||
<Box
|
||||
|
|
@ -386,52 +229,10 @@ export function AuthTab({
|
|||
backgroundColor="gray"
|
||||
>
|
||||
<Text bold color="white">
|
||||
←/→ select, G/Q/S or Enter run, ↑/↓ scroll
|
||||
S {isLiveConnection ? "clear+disconnect" : "clear"}, ↑/↓ scroll
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function getStepDetails(state: OAuthFlowState, step: OAuthStep): string | null {
|
||||
switch (step) {
|
||||
case "metadata_discovery":
|
||||
if (state.resourceMetadata || state.oauthMetadata) {
|
||||
const parts: string[] = [];
|
||||
if (state.resourceMetadata) {
|
||||
parts.push(
|
||||
`Resource: ${JSON.stringify(state.resourceMetadata, null, 2)}`,
|
||||
);
|
||||
}
|
||||
if (state.oauthMetadata) {
|
||||
parts.push(`OAuth: ${JSON.stringify(state.oauthMetadata, null, 2)}`);
|
||||
}
|
||||
return parts.join("\n");
|
||||
}
|
||||
return null;
|
||||
case "client_registration":
|
||||
if (state.oauthClientInfo) {
|
||||
return JSON.stringify(state.oauthClientInfo, null, 2);
|
||||
}
|
||||
return null;
|
||||
case "authorization_redirect":
|
||||
if (state.authorizationUrl) {
|
||||
return `URL: ${state.authorizationUrl.toString()}`;
|
||||
}
|
||||
return null;
|
||||
case "authorization_code":
|
||||
return state.authorizationCode
|
||||
? `Code received: ${state.authorizationCode.slice(0, 10)}...`
|
||||
: null;
|
||||
case "token_request":
|
||||
return "Exchanging code for tokens...";
|
||||
case "complete":
|
||||
if (state.oauthTokens) {
|
||||
return `Tokens: access_token=${state.oauthTokens.access_token?.slice(0, 15)}...`;
|
||||
}
|
||||
return null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
42
clients/tui/src/utils/oauthDisplay.ts
Normal file
42
clients/tui/src/utils/oauthDisplay.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import type {
|
||||
OAuthClientRegistrationKind,
|
||||
OAuthConnectionState,
|
||||
} from "@inspector/core/auth/types.js";
|
||||
|
||||
export function formatAuthProtocol(
|
||||
protocol: OAuthConnectionState["protocol"],
|
||||
): string {
|
||||
return protocol === "ema" ? "Enterprise-managed" : "Standard";
|
||||
}
|
||||
|
||||
export function formatIdpSession(
|
||||
session: NonNullable<OAuthConnectionState["ema"]>["idpSession"],
|
||||
): string {
|
||||
switch (session) {
|
||||
case "logged_in":
|
||||
return "Signed in";
|
||||
case "expired":
|
||||
return "Session expired";
|
||||
default:
|
||||
return "Not signed in";
|
||||
}
|
||||
}
|
||||
|
||||
export function formatClientRegistrationKind(
|
||||
kind: OAuthClientRegistrationKind,
|
||||
): string {
|
||||
switch (kind) {
|
||||
case "static":
|
||||
return "Static (preregistered)";
|
||||
case "dcr":
|
||||
return "Dynamic (DCR)";
|
||||
case "cimd":
|
||||
return "Client ID Metadata (CIMD)";
|
||||
}
|
||||
}
|
||||
|
||||
export function formatScopes(state: OAuthConnectionState): string | undefined {
|
||||
const scopeSource = state.grantedScope ?? state.configuredScope;
|
||||
const scopes = scopeSource?.split(" ").filter(Boolean);
|
||||
return scopes && scopes.length > 0 ? scopes.join(", ") : undefined;
|
||||
}
|
||||
Loading…
Reference in a new issue