> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-use.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Authentication

> OAuth and bearer tokens for MCP client connections

## OAuth (automatic)

For HTTP servers without a bearer token, the client auto-provisions OAuth on connect:

```typescript theme={null}
import { MCPClient } from "@mcp-use/client";

const client = new MCPClient({
  mcpServers: {
    demo: { url: "https://api.example.com/mcp" },
  },
});

// Node: blocks until authorized (loopback). Browser: popup or redirect.
await client.connect("demo");
```

Disable with `oauth: false`. Override options with an `oauth` object on the server config. Pass a custom `authProvider` to skip auto-provisioning.

### React

```tsx theme={null}
const mcp = useMcp({ url: "https://api.example.com/mcp" });

if (mcp.state === "pending_auth") {
  return <button onClick={mcp.authenticate}>Sign in</button>;
}
```

OAuth callback: import `onMcpAuthorization` from `@mcp-use/client/react` on your callback route. See [React integration](/typescript/client/usemcp#oauth-callback).

### Flow modes

| Mode            | Option                  | When                   |
| --------------- | ----------------------- | ---------------------- |
| Popup (default) | —                       | Desktop web            |
| Redirect        | `useRedirectFlow: true` | Mobile, popup blockers |

### Manual browser authorization

Set `preventAutoAuth: true` on a `BrowserOAuthClientProvider` to prepare an
authorization URL without opening it automatically. Read that URL with
`getLastAttemptedAuthUrl()` and present it to the user in the same page
lifetime. The fallback URL is intentionally kept in memory only and is not
available after the provider or page is recreated; start a new authorization
attempt after a reload.

### Pre-registered client

```typescript theme={null}
const client = new MCPClient({
  mcpServers: {
    slack: {
      url: "https://mcp.example.com/mcp",
      oauth: {
        clientId: "my-client-id",
        clientMetadataUrl:
          "https://app.example.com/.well-known/oauth-client-metadata.json",
        scope: "openid profile",
      },
    },
  },
});
```

Browser clients are public PKCE clients — no client secrets in the browser.

### OAuth proxy (browser)

When upstream OAuth endpoints lack CORS:

```typescript theme={null}
useMcp({
  url: "https://mcp.example.com/mcp",
  oauthProxyUrl: "https://app.example.com/api/mcp-oauth",
});
```

## Bearer token

```typescript theme={null}
const client = new MCPClient({
  mcpServers: {
    api: {
      url: "https://api.example.com/mcp",
      authToken: process.env.API_KEY,
    },
  },
});
```

Or use headers (also disables auto-OAuth):

```typescript theme={null}
headers: { Authorization: "Bearer sk-..." }
```

## Server config fields

| Field          | Description                          |
| -------------- | ------------------------------------ |
| `authToken`    | Bearer token                         |
| `headers`      | Custom HTTP headers                  |
| `oauth`        | OAuth options, or `false` to disable |
| `authProvider` | Custom SDK-compatible provider       |

## Node OAuth helpers

```typescript theme={null}
import {
  createOAuthProvider,
  NodeOAuthClientProvider,
  completeOAuthFlow,
  isUnauthorized,
  FileKVStore,
} from "@mcp-use/client";
```

Use these for headless scripts or custom storage. Browser OAuth uses `localStorage` automatically.