Skip to main content
Portal provides MPC wallets and dApp connections for organizations and their users.

To integrate Portal, an organization adds a client library to their mobile app and a few server API endpoints.

​
Basic setup

The basic Portal setup consists of three packages:
  • @portal-hq/core - The core Portal library
  • @portal-hq/keychain - An adapter for storing MPC signing shares on-device
  • @portal-hq/gdrive-storage - An adapter for storing MPC backup shares off-device
These pieces allow 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
  • npm
yarn add @portal-hq/core @portal-hq/keychain @portal-hq/gdrive-storage

​
Dependency linking

Because these packages have native module dependencies there is some additional linking required to make it work with your React Native project. Explicitly install the native module packages in your project.
  • yarn
  • npm
yarn add react-native-keychain

​
MPC

The core Portal library relies on a native module to support MPC behaviors. In order to enable this functionality, you must properly link Portal’s MPC client to your React Native project.
  • Android
  • iOS
dependencies {
  ...

  runtimeOnly files("../../node_modules/@portal-hq/core/android/libs/mpc.aar")

  ...
}
To learn more about how to use Portal MPC, see: @portal-hq/core

​
Initializing Portal

import { useEffect, useState } from 'react'

// Portal imports
import { BackupMethods, Portal, PortalContextProvider } from '@portal-hq/core'
import Keychain from '@portal-hq/keychain'
import GoogleDriveStorage from '@portal-hq/gdrive-storage'
import { PasswordStorage } from '@portal-hq/utils/src/definitions'

const MyAppComponent = () => {
  // Store the Portal instance in the state
  const [portal, setPortal] = useState<Portal>(null)

  useEffect(() => {
    if (!portal) {
      // Initialize backup storage providers.
      const gDriveStorage = new GoogleDriveStorage({
        androidClientId: 'YOUR_ANDROID_CLIENT_ID',
        iosClientId: 'YOUR_IOS_CLIENT_ID',
      })
      const passwordStorage = new PasswordStorage()

      // Create a Portal instance
      setPortal(
        new Portal({
          autoApprove: true, // If you want to auto-approve transactions
          apiKey: 'YOUR_PORTAL_CLIENT_API_KEY',
          backup: {
            [BackupMethods.GoogleDrive]: gDriveStorage,
            [BackupMethods.Password] : passwordStorage
          },
          chainId: 1,
          gatewayConfig: {
            'eip155:1': 'https://mainnet.infura.io/v3/YOUR_INFURA_API_KEY',
          },
        }),
      )
    }
  }, [portal])

  return (
    {/* Expose your Portal instance to your app */}
    <PortalContextProvider value={portal as Portal}>
      {/**
        * Now all children rendered in this scope
        * will have access to the `Portal` instance
        * via the `usePortal` hook
        */}
    </PortalContextProvider>
  )
}

export default MyAppComponent
For more information on how to use the Portal class, see: @portal-hq/core

​
Next Steps

Now that you’ve initialized your Portal instance, you can generate a wallet!
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.
⌘I