Add auth provider

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
+MIT

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
 

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
 }

src/react/useMcp.ts

@@ -839,5 +839,6 @@ export function useMcp(options: UseMcpOptions): UseMcpResult {
     disconnect,
     authenticate,
     clearStorage,
+    authProvider: authProviderRef.current,
   }
 }