Web

Follow this guide to integrate Portal in your web app.

Portal provides MPC wallets and dApp connections for organizations and their users. To integrate Portal, an organization adds a client library to their web app, configures a CNAME record, and adds a few server API endpoints.

Basic setup

The basic Portal setup consists of a single packages:

• @portal-hq/web - The core Portal library

This allows you to initialize Portal in your app.

Authentication

Follow this guide to gather all of the credentials you need to Authenticate to Portal.

Installation

yarn

yarn add @portal-hq/web

npm

npm install --save @portal-hq/web

Update TSConfig

The Web SDK uses the TSConfig lib configuration to properly type interaction with the DOM. Update your TSConfig file to include this:

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["es2022", "dom"],
    ...
  },
  ...
}

Initializing Portal

import Portal from '@portal-hq/web'

const portal = Portal({ 
    apiKey: 'YOUR-CLIENT-API-KEY',
    autoApprove: true, // This should only be used for local development
    chainId: 5, 
    gatewayConfig: 'YOUR-INFURA-OR-ALCHEMY-URL',
    host: 'YOUR-CUSTOM-SUBDOMAN' // Set this once you've defined your custom subdomain
})

Custom Subdomain

In order to support usage on Safari or other browsers with third-party cookie restrictions, you need to configure a custom subdomain for the Portal Web API.

Follow the instructions in our Configuring a Custom Subdomain guide to complete setup for the Web SDK!