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. We recommend only initializing one Portal instance per user.

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
    rpcConfig: {
      'eip155:1': 'YOUR-INFURA-OR-ALCHEMY-URL',
      'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': 'https://api.mainnet-beta.solana.com',
    },
    host: 'YOUR-CUSTOM-SUBDOMAN' // Set this once you've defined your custom subdomain
})

We recommend only initializing one Portal instance per user. Do not modify portal.apiKey directly.

If you are using Client Session Tokens (CSTs), this hint is for you.

When your user's CST expires, all Portal SDKs will throw an error on the next MPC Operation the user makes (e.g. creating a wallet, backing up a wallet, recovering a wallet, or signing). That error will include a code SESSION_EXPIRED in the SDK methods, which you can use as an indicator to refresh your CST.

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 Configure a custom subdomain guide to complete setup for the Web SDK!