Fix types for OAuth State Machine

[matteo8p]

No description provided.

[coderabbitai]

Walkthrough

The changes strengthen type safety across OAuth flow components by replacing a generic string type for registration strategy with a union of two specific strategy types (RegistrationStrategy2025_06_18 and RegistrationStrategy2025_11_25). Related handlers and type annotations are updated accordingly. The registrationStrategy configuration parameter is made required rather than optional in the state machine factory. Additionally, a label in the sequence diagram is reformatted without functional impact.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 947365f and ab0f1cb.

📒 Files selected for processing (3)

• client/src/components/OAuthFlowTab.tsx (5 hunks)
• client/src/components/OAuthSequenceDiagram.tsx (1 hunks)
• client/src/lib/oauth/state-machines/factory.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Prefer interfaces for defining object shapes
Constrain generics with appropriate type bounds
Use type guards to narrow unknown or union types before usage
Enforce import ordering consistently

**/*.{ts,tsx}: Prefer named exports in TypeScript modules
Use 2-space indentation
Declare types and interfaces using PascalCase

Files:

• client/src/components/OAuthSequenceDiagram.tsx
• client/src/lib/oauth/state-machines/factory.ts
• client/src/components/OAuthFlowTab.tsx

client/src/**/*.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

Follow consistent React component structure in the frontend

Files:

• client/src/components/OAuthSequenceDiagram.tsx
• client/src/components/OAuthFlowTab.tsx

client/src/{app,components}/**/*.tsx

📄 CodeRabbit inference engine (client/CLAUDE.md)

client/src/{app,components}/**/*.tsx: Use React functional components with React.FC typing for all UI components and pages
Define explicit Props interfaces for components, including proper children prop handling
Type event handlers with React-provided types (e.g., React.MouseEvent, FormEvent)
Follow React 19 patterns: hooks-centric components, Suspense and Error Boundaries where appropriate, and concurrent features
Maintain component isolation: avoid excessive prop drilling, use Context wisely, favor composition, and optimize renders
Build responsive layouts using the established Tailwind breakpoint system, grids, flex, and container queries
Ensure accessibility: proper ARIA attributes, keyboard navigation, focus management, and screen reader support

Files:

• client/src/components/OAuthSequenceDiagram.tsx
• client/src/components/OAuthFlowTab.tsx

client/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (client/CLAUDE.md)

Implement strict TypeScript types: strict prop types, event types, state interfaces, and utility types

In client code, use the @/ alias for imports

Files:

• client/src/components/OAuthSequenceDiagram.tsx
• client/src/lib/oauth/state-machines/factory.ts
• client/src/components/OAuthFlowTab.tsx

client/src/{app,components,hooks}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (client/CLAUDE.md)

Use React hooks for local state: apply useState/useReducer patterns, create custom hooks, and always clean up effects

Files:

• client/src/components/OAuthSequenceDiagram.tsx
• client/src/components/OAuthFlowTab.tsx

client/src/components/**/*.tsx

📄 CodeRabbit inference engine (client/CLAUDE.md)

Use Radix UI primitives for dialogs, dropdowns, form controls, and tooltips

React components in client/src/components should be functional and saved as PascalCase.tsx files

Files:

• client/src/components/OAuthSequenceDiagram.tsx
• client/src/components/OAuthFlowTab.tsx

client/src/{stores/servers,lib}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (client/CLAUDE.md)

Persist configuration: local storage, export/import, sync, and backup/restore options

Files:

• client/src/lib/oauth/state-machines/factory.ts

🧠 Learnings (9)

📚 Learning: 2025-10-19T23:06:33.450Z

Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/**/*.{ts,tsx} : Implement strict TypeScript types: strict prop types, event types, state interfaces, and utility types

Applied to files:

• client/src/components/OAuthFlowTab.tsx

📚 Learning: 2025-10-19T23:06:33.450Z

Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/mcp,lib/api}/**/*.{ts,tsx} : Implement authentication setup: OAuth configuration, token management, scopes, and refresh handling

Applied to files:

• client/src/components/OAuthFlowTab.tsx

📚 Learning: 2025-10-19T23:06:33.450Z

Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{lib/api,hooks/llm}/**/*.{ts,tsx} : Implement Anthropic Claude integration: authentication flow, request formatting, stream processing, and rate limiting

Applied to files:

• client/src/components/OAuthFlowTab.tsx

📚 Learning: 2025-10-19T23:06:33.450Z

Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components}/**/*.tsx : Follow React 19 patterns: hooks-centric components, Suspense and Error Boundaries where appropriate, and concurrent features

Applied to files:

• client/src/components/OAuthFlowTab.tsx

📚 Learning: 2025-10-19T23:06:33.450Z

Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components,hooks}/**/*.{ts,tsx} : Use React hooks for local state: apply useState/useReducer patterns, create custom hooks, and always clean up effects

Applied to files:

• client/src/components/OAuthFlowTab.tsx

📚 Learning: 2025-10-19T23:06:33.450Z

Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/components/**/*.tsx : Use Radix UI primitives for dialogs, dropdowns, form controls, and tooltips

Applied to files:

• client/src/components/OAuthFlowTab.tsx

📚 Learning: 2025-10-19T23:06:33.450Z

Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/{mcp,transport}}/**/*.{ts,tsx} : Provide transport selection UIs and logic: protocol options, configuration forms, validation rules, and presets

Applied to files:

• client/src/components/OAuthFlowTab.tsx

📚 Learning: 2025-10-19T23:07:08.982Z

Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/{routes/mcp/**,utils/mcp-utils.ts,types/mcp.ts} : Implement MCP protocol using Mastra (mastra/core, mastra/mcp) for MCP handling, helpers, and types

Applied to files:

• client/src/components/OAuthFlowTab.tsx

📚 Learning: 2025-10-19T23:07:08.982Z

Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Provide comprehensive MCP server testing (spec validation, OAuth flows, prompt/resource checks, error simulation)

Applied to files:

• client/src/components/OAuthFlowTab.tsx

🧬 Code graph analysis (1)

client/src/components/OAuthFlowTab.tsx (2)

client/src/lib/oauth/state-machines/types.ts (2)

• RegistrationStrategy2025_06_18 (157-157)
• RegistrationStrategy2025_11_25 (158-158)

client/src/lib/oauth/state-machines/factory.ts (2)

• getSupportedRegistrationStrategies (112-123)
• getDefaultRegistrationStrategy (96-107)

🔍 Remote MCP

I'll search for relevant context about OAuth state machines and type patterns to help inform the review of these changes.Based on the search results, I've gathered relevant context about TypeScript union types and factory patterns that would help in reviewing this PR. However, since this is an internal repository PR with specific code changes, I should note the limitations of what general web searches can provide.

Summary of Relevant Context

TypeScript Union Types and Type Safety

The PR changes introduce stricter typing by converting the registration strategy from a loose string type to a typed union (RegistrationStrategy2025_06_18 | RegistrationStrategy2025_11_25). This aligns with TypeScript best practices:

A common technique for working with unions is to have a single field which uses literal types which you can use to let TypeScript narrow down the possible current type. The PR's approach of using a union type enables better compile-time type safety and prevents invalid values from being assigned.

Factory Configuration Pattern

Making the registrationStrategy field required in OAuthStateMachineFactoryConfig follows established factory pattern practices. Factory functions often define configuration objects where some fields are optional because defaults are supplied, but the factory and the implementation use slightly different versions of the same set of options. This PR reverses that for this field, indicating it's now a required dependency for proper state machine initialization.

Type Safety Benefits

Union types provide the flexibility to handle variables that may take multiple types of values while ensuring that developers don't accidentally misuse the variable by providing type checks at compile time. The explicit type casts in the event handlers (particularly in the onValueChange handler and protocol version change handler) ensure runtime values align with the union type constraints.

Key Observations for Review

1. Type Alignment: The changes consistently cast incoming values to the union type across all state mutation points (localStorage load, event handlers, protocol version changes)
2. Backward Compatibility: The localStorage persistence logic remains intact, but now validates against the stricter type
3. Required Field: Making registrationStrategy required in the factory config eliminates ambiguity about when state machine initialization can succeed

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: prettier-and-build

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}