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

# Adding Web support

> [card] Recommended: JavaScript SDK for React Native
>
> While this SDK is still supported, we recommend using newer [JavaScript SDK](https://docs.dynamic.xyz/docs/javascript/reference/react-native-quickstart.md), which is optimized for React Native, but also comes with a host of other benefits.

The way Dynamic integrates with web applications is by extending our [client](https://docs.dynamic.xyz/docs/react-native/reference/client.md)
with the Web Extension.

## Installation

Install the web extension package using your preferred package manager:

> [tab] npm
>
> ```bash Shell theme={"system"}
> npm install @dynamic-labs/legacy-web-extension
> ```

> [tab] yarn
>
> ```bash Shell theme={"system"}
> yarn add @dynamic-labs/legacy-web-extension
> ```

> [tab] pnpm
>
> ```bash Shell theme={"system"}
> pnpm add @dynamic-labs/legacy-web-extension
> ```

## Setup

1. Import the WebExtension from the package
2. Create your Dynamic client
3. Extend it with the WebExtension

```typescript theme={"system"}
import { WebExtension } from '@dynamic-labs/legacy-web-extension';
import { createClient } from '@dynamic-labs/legacy-client';

export const dynamicClient = createClient({
  environmentId: 'YOUR-ENVIRONMENT-ID',
}).extend(WebExtension());
```

Now the `dynamicClient` is ready to be used on any web application.

## Example

This example demonstrates how to use a Dynamic Client with web support to prompt users for authentication in a React app.

```tsx theme={"system"}
import { WebExtension } from '@dynamic-labs/legacy-web-extension';

// Initialize the client
export const dynamicClient = createClient({
  environmentId: 'YOUR-ENVIRONMENT-ID',
}).extend(WebExtension());

const App = () => {
  return (
    <button onClick={() => dynamicClient.ui.auth.show()}>
      Sign In
    </button>
  )
}
```

## ExpoWeb integration

The `@dynamic-labs/legacy-web-extension` package is fully compatible with Expo Web applications.
To support both react-native and web you can simply extend the dynamic client with both react-native and web extensions.

> [!NOTE]
>
> Make sure to complete the [React Native setup](https://docs.dynamic.xyz/docs/react-native/reference/react-native-extension.md)

```typescript theme={"system"}
import { WebExtension } from '@dynamic-labs/legacy-web-extension';
import { ReactNativeExtension } from '@dynamic-labs/legacy-react-native-extension';

export const dynamicClient = createClient({
  environmentId: 'YOUR-ENVIRONMENT-ID',
})
  .extend(WebExtension())
  .extend(ReactNativeExtension());
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.