The way Dynamic integrates with web applications is by extending our client with the Web Extension.

​
Installation

Install the web extension package using your preferred package manager:

Shell
npm install @dynamic-labs/web-extension

​
Setup

  1. Import the WebExtension from the package
  2. Create your Dynamic client
  3. Extend it with the WebExtension
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.

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.

Make sure to complete the React Native setup

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());