Backup methods

A guide that goes over all of the various backup methods your users can use.

Passkey + Enclave Backup

Allow customers to create a passkey authenticate and store the private encryption key within a secure enclave.

Implementation Requirements

1. Initialize the portal config object with a passkey object.

2. Call backup or recover with passkeys as the backup method argument.

Portal-managed backups

const BackupButton: React.FC = () => {
  const handleBackup = async () => {
    // Get an encryped user backup share from running backup.
    const cipherText = await portal.backupWallet(BackupMethods.Passkey)
  }
  
  return (
    <button onClick={handleBackup}>Back up your wallet</button>
  )
}

export default BackupButton

Backing up to your server

const BackupButton: React.FC = () => {
  const handleBackup = async () => {
    // Get an encryped user backup share from running backup.
    const cipherText = await portal.backupWallet(BackupMethods.Passkey)
    
    try {
      // Send the backup share to your API and store it.
      await axios.post('{your_server}/users/[userId]/user-backup-share', {
        data: { backupMethod: "PASSKEY", cipherText }
      })

      // ✅ Notify Portal that the user backup share was stored! 🙌
      await portal.storedClientBackupShare(true, "PASSKEY")
    } catch (error) {
      // ❌ Notify Portal that the user backup share was not stored.
      await portal.storedClientBackupShare(false, "PASSKEY")
    }
  }
  
  return (
    <button onClick={handleBackup}>Back up your wallet</button>
  )
}

export default BackupButton

Password/Pin

Allow users to create a password/pin. Users can either remember the password or store it in a password storage manager.

Implementation Requirements

1. Create a UI for password input.

2. Enforce password requirements. Customer can choose between password, PIN code, passcode, or any other text-based input.

3. If user forgets password there are no additional recovery options.

Portal-managed backups

import axios from 'axios'
import React, { FC } from 'react'
import { BackupMethods, usePortal } from '@portal-hq/core'

const BackupButton: FC = () => {
  const [password, setPassword] = useState<string>('')
  const portal = usePortal()
  
  const handleBackup = async () => {
    // Get an encryped client backup share from running backup.
    const cipherText = await portal.backupWallet(BackupMethods.Password, { 
      passwordStorageConfig: { 
        pasword 
      } 
    })
  }
  
  return (
    <div>
      <input
        onChange={setPassword}
        placeholder="Password/Pin"
        type="password"
        value={password}
      />
      <button onClick={handleBackup}>Back up your wallet</button>
    </div>
  )
}

export default BackupButton

Backing up to your server

import axios from 'axios'
import React, { FC } from 'react'
import { BackupMethods, usePortal } from '@portal-hq/core'

const BackupButton: FC = () => {
  const [password, setPassword] = useState<string>('')
  const portal = usePortal()
  
  const handleBackup = async () => {
    // Get an encryped client backup share from running backup.
    const cipherText = await portal.backupWallet(BackupMethods.Password, { passwordStorageConfig: { pasword } })
    
    try {
      // Send the backup share to your API and store it.
      await axios.post('{your_server}/users/[userId]/user-backup-shares', {
        data: { backupMethod: "PASSWORD", cipherText }
      })

      // ✅ Notify Portal that the user backup share was stored! 🙌
      await portal.api.storedClientBackupShare(true, "PASSWORD")
    } catch (error) {
      // ❌ Notify Portal that the user backup share was not stored.
      await portal.api.storedClientBackupShare(false, "PASSWORD")
    }
  }
  
  return (
    <div>
      <input
        onChange={setPassword}
        placeholder="Password/Pin"
        type="password"
        value={password}
      />
      <button onClick={handleBackup}>Back up your wallet</button>
    </div>
  )
}

export default BackupButton

Google Drive

See the docs on how to Configure GDrive storage.