Adding Web support

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:

npm

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