JavaScript SDK

Learn how to integrate the Membrane JavaScript SDK into your application to build an integrations page for your customers.

🖥️

An interactive version of this guide is available in Membrane Console.

Step 1: Generate Authentication Token

To access Membrane through the REST API or Front-end SDK, you need an access token that contains information about your workspace, permissions, and the customer using the integration.

Create an endpoint on your backend that generates JWT tokens. The token must include your workspace key as the issuer (iss), a customer identifier (id), and an expiration time (exp).

You can find a test token in your workspace settings. To learn how to generate production tokens, check the Authentication guide.

Step 2: Setup JavaScript SDK

Install the Membrane JavaScript SDK and initialize the client.

Install JavaScript SDK

npm install @membranehq/sdk

Initialize the Client

The fetchToken function should call your backend endpoint that generates the authentication token from the previous step.

import { MembraneClient } from '@membranehq/sdk'

const membrane = new MembraneClient({
  fetchToken: async () => {
    const response = await fetch('/api/membrane-token')
    const { token } = await response.json()
    return token
  },
})

Reference: MembraneClient.constructor

Step 3: Display available integrations

Show your users the list of available integrations. Each integration includes metadata like name, logo, and description that you can use to build your UI.

Get list of integrations

await membrane.integrations.find()

Reference: IntegrationsAccessor.find

Search integrations

await membrane.integrations.find({ search: 'hubspot' })

Reference: IntegrationsAccessor.find

Step 4: Let user connect to a selected integration

When a user clicks "Connect" on an integration, open the connection flow. This launches a popup that guides the user through authentication with the external app.

Open connection flow

await membrane.integration('hubspot').openNewConnection()

Reference: IntegrationAccessor.openNewConnection

ℹ️

Advanced options

For more control over the connection flow, you can enable multiple connections per integration, customize integration parameters, or implement a custom OAuth callback. See the Connection UI documentation for details.

Step 5: Show connections

When a user connects to an app, a new connection is created. Display the user's connections to show which integrations are active.

Check the disconnected flag on each connection to show the current status. A disconnected connection needs to be re-authenticated.

Get list of connections

await membrane.connections.find()

Reference: ConnectionsAccessor.find

Step 6: Manage connection

After a connection is created, let users manage it: re-connect if disconnected, or delete it.

Re-connect

await membrane.connection(connectionId).openReconnectUI()

Reference: ConnectionAccessor.openReconnectUI

Delete connection

await membrane.connection(connectionId).archive()

Reference: ConnectionAccessor.archive

Reference

Explore the complete JavaScript SDK Reference to discover all available methods and options.