From ca06ebe84b86ca8550cf93127fa365f39a2cc297 Mon Sep 17 00:00:00 2001
From: frgarciames <fran17901@gmail.com>
Date: Mon, 7 Jul 2025 13:10:26 +0200
Subject: [PATCH 1/2] add auth provider to useMcp result

---
 src/react/types.ts  | 3 +++
 src/react/useMcp.ts | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/react/types.ts b/src/react/types.ts
index 61934ea..69d873b 100644
--- a/src/react/types.ts
+++ b/src/react/types.ts
@@ -1,4 +1,5 @@
 import { Tool, Resource, ResourceTemplate, Prompt } from '@modelcontextprotocol/sdk/types.js'
+import { BrowserOAuthClientProvider } from '../auth/browser-provider'
 
 export type UseMcpOptions = {
   /** The /sse URL of your remote MCP server */
@@ -112,4 +113,6 @@ export type UseMcpResult = {
   authenticate: () => void
   /** Clears all stored authentication data (tokens, client info, etc.) for this server URL from localStorage. */
   clearStorage: () => void
+  /** The OAuth client provider used for authentication */
+  authProvider: BrowserOAuthClientProvider | null
 }
diff --git a/src/react/useMcp.ts b/src/react/useMcp.ts
index f95b4f2..239d674 100644
--- a/src/react/useMcp.ts
+++ b/src/react/useMcp.ts
@@ -839,5 +839,6 @@ export function useMcp(options: UseMcpOptions): UseMcpResult {
     disconnect,
     authenticate,
     clearStorage,
+    authProvider: authProviderRef.current,
   }
 }

From 9a33d6dac413fb2249e3cae407ef6f902f7e88e3 Mon Sep 17 00:00:00 2001
From: frgarciames <fran17901@gmail.com>
Date: Mon, 7 Jul 2025 13:28:13 +0200
Subject: [PATCH 2/2] update docs

---
 README.md           | 8 +++++---
 src/react/README.md | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 1b871b0..55c02bf 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,7 @@ function MyAIComponent() {
     retry,          // Retry connection manually
     authenticate,   // Manually trigger authentication
     clearStorage,   // Clear stored tokens and credentials
+    authProvider,   // Class for handling OAuth authentication and token management
   } = useMcp({
     url: 'https://your-mcp-server.com',
     clientName: 'My App',
@@ -115,7 +116,7 @@ function MyAIComponent() {
         ))}
       </ul>
       <button onClick={handleSearch}>Search</button>
-      
+
       {/* Example: Display and read resources */}
       {resources.length > 0 && (
         <div>
@@ -128,7 +129,7 @@ function MyAIComponent() {
           </button>
         </div>
       )}
-      
+
       {/* Example: Use prompts */}
       {prompts.length > 0 && (
         <div>
@@ -249,7 +250,8 @@ function useMcp(options: UseMcpOptions): UseMcpResult
 | `disconnect` | `() => void` | Disconnect from the MCP server |
 | `authenticate` | `() => void` | Manually trigger authentication |
 | `clearStorage` | `() => void` | Clear all stored authentication data |
+| `authProvider` | `BrowserOAuthClientProvider` | Class for handling OAuth authentication and token management |
 
 ## License
 
-MIT
\ No newline at end of file
+MIT
diff --git a/src/react/README.md b/src/react/README.md
index f523ea5..e7450d6 100644
--- a/src/react/README.md
+++ b/src/react/README.md
@@ -103,7 +103,7 @@ function MyChatComponent() {
       {mcp.state === 'authenticating' && <p>Waiting for authentication...</p>}
       {mcp.state === 'ready' && (
         <p>
-          Connected! Tools: {mcp.tools.length}, Resources: {mcp.resources.length + mcp.resourceTemplates.length}, 
+          Connected! Tools: {mcp.tools.length}, Resources: {mcp.resources.length + mcp.resourceTemplates.length},
           Prompts: {mcp.prompts.length}
         </p>
       )}
@@ -230,6 +230,7 @@ export default MyChatComponent
 - disconnect(): Disconnects the client from the server.
 - authenticate(): Manually attempts to start the authentication flow. Useful for triggering the popup via a user click if it was initially blocked.
 - clearStorage(): Removes all authentication-related data (tokens, client info, code verifier, state) for the configured server URL from localStorage. Useful for development or allowing users to "log out". Automatically disconnects the client.
+- authProvider: An internal class that manages OAuth authentication flows. This handles all OAuth-related operations behind the scenes and is automatically used by the hook (you typically won't need to interact with it directly).
 
 ### Setting up the OAuth Callback Route