> ## 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

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

## Installation

Install the web extension package using your preferred package manager:

<Tabs>
  <Tab title="npm">
    ```bash Shell theme={"system"}
    npm install @dynamic-labs/web-extension
    ```
  </Tab>

  <Tab title="yarn">
    ```bash Shell theme={"system"}
    yarn add @dynamic-labs/web-extension
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash Shell theme={"system"}
    pnpm add @dynamic-labs/web-extension
    ```
  </Tab>
</Tabs>

## 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/web-extension';
import { createClient } from '@dynamic-labs/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/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/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](/react-native/reference/react-native-extension)
</Note>

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

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