LogoLogo
SupportGithubSign InGet Access
  • Introduction
  • GETTING STARTED
    • SDK Quick Start
    • API Quick Start
  • Guides
    • Web
      • Create a wallet
      • Send tokens
      • Sign a transaction
      • Simulate a transaction
      • Back up a wallet
      • Recover a wallet
      • Cross-device sessions
      • Manage wallet lifecycle states
      • Web authentication methods
      • Perform swaps
      • Add custom signature hooks
      • MPC progress callbacks
      • Portal API methods
      • Configure a custom subdomain
      • Eject a wallet
      • Using the EIP-1193 Provider
      • Legacy documentation
        • Back up a wallet
          • Backup Options
        • Recover a wallet
    • iOS
      • Create a wallet
      • Send tokens
      • Sign a transaction
      • Simulate a transaction
      • Back up a wallet
      • Recover a wallet
      • Cross-device sessions
      • Manage wallet lifecycle states
      • Connect with WalletConnect
      • Build a WebView
      • Perform swaps
      • Add custom signature hooks
      • MPC progress callbacks
      • Portal API methods
      • Manage ERC20 tokens
      • Eject a wallet
      • Legacy documentation
        • Back up a wallet
          • Backup Options
          • Passkey + Enclave Storage
        • Recover a wallet
      • Troubleshooting Tips
      • Feature Flags
    • Android
      • Create a wallet
      • Send tokens
      • Sign a transaction
      • Simulate a transaction
      • Back up a wallet
      • Recover a wallet
      • Cross-device sessions
      • Manage wallet lifecycle states
      • Connect with WalletConnect
      • Build a WebView
      • Perform swaps
      • Add custom signature hooks
      • MPC progress callbacks
      • Portal API methods
      • Eject a wallet
      • Legacy documentation
        • Back up a wallet
          • Backup Options
        • Recover a wallet
    • React Native
      • Create a wallet
      • Send tokens
      • Sign a transaction
      • Simulate a transaction
      • Back up a wallet
      • Recover a wallet
      • Cross-device sessions
      • Manage wallet lifecycle states
      • Connect with WalletConnect
      • Build a WebView
      • Perform swaps
      • Add custom signature hooks
      • MPC progress callbacks
      • Portal API methods
      • Eject a wallet
      • Legacy documentation
        • Back up a wallet
          • Backup Options
        • Recover a wallet
    • Enclave MPC API
      • Create a client
      • Create a wallet
      • Send tokens
      • Sign Ethereum transactions
      • Sign Solana transactions
      • Sign Tron transactions
      • Sign Stellar Transaction
      • Concurrent Transactions
      • Back up a wallet
      • Eject a wallet
  • Reference
    • iOS
      • createWallet
      • backupWallet
      • recoverWallet
      • ejectPrivateKeys
      • registerBackupMethod
      • setGDriveConfiguration
      • setPasskeyConfiguration
      • setPasskeyAuthenticationAnchor
      • setPassword
      • availableRecoveryMethods
      • doesWalletExist
      • isWalletBackedUp
      • isWalletOnDevice
      • isWalletRecoverable
      • getBalances
      • getAssets
      • getNftAssets
      • getTransactions
      • sendSol
      • evaluateTransaction
      • buildEip155Transaction
      • buildSolanaTransaction
      • getWalletCapabilities
    • Android
      • Reference Documentation
    • React Native
      • @portal-hq/core
      • Storage adapters
        • Cloud storage
          • @portal-hq/gdrive-storage
          • @portal-hq/icloud-storage
        • Mobile storage
          • @portal-hq/keychain
          • @portal-hq/mobile-key-values
    • Enclave MPC API
      • V1 endpoints
    • Client API
      • V3 endpoints
      • V1 endpoints
    • Custodian API
      • V3 endpoints
      • V1 endpoints
    • Swaps API
      • V3 endpoints
      • V1 endpoints
  • Resources
    • Flutter
      • iOS
      • Android
    • Error codes
      • Overview
      • MPC errors
      • Network errors
      • General errors
      • Encryption errors
      • Portal Connect errors
    • Portal's MPC architecture
    • Authentication and API Keys
    • Self-Managed Backups
    • Alert Webhooks
    • Wallet lifecycle
    • Backup options
      • Password/PIN
      • GDrive
      • iCloud
      • Passkey + Enclave
    • WalletConnect metadata
    • Advanced security scanning
    • Account abstraction
    • Security firewall
    • Eject
    • Security
    • Blockchain support
    • Chain ID formatting
    • Testnet faucets
    • Going to Production
    • Rate Limits
    • Multi-backup migration guide
    • Multi-wallet migration guides
      • Migrating from Android SDK v3.x.x to v4.x.x
      • Migrating from iOS SDK v3.0.x to v3.2.x
  • Support
    • Changelog
      • Android
      • iOS
      • React Native
      • Web
      • Past Releases
        • 2024 Releases
        • 2023 Releases
    • Celo Hackathon Hub
    • Glossary
Powered by GitBook
On this page
  • Authenticating with a Client API Key
  • Authenticating with a Web OTP
  • Fetching a Web OTP
  • Initializing Portal
  • Authenticating with an authUrl
  • Creating an authentication route
  • Initializing Portal with an authUrl

Was this helpful?

  1. Guides
  2. Web

Web authentication methods

The Portal Web SDK offers various approaches to authenticating. The main reason for this is to allow you to strike the right balance between integration time and security.

Authenticating with a Client API Key

This approach requires the least setup, but is also the least secure as it exposes your Client API Key to your DOM. For this reason, we recommend that this method only be used during local development.

The only thing required for this is to create a client like normal via the Portal REST API and use the clientApiKey for the apiKey option when initializing Portal.

import Portal from '@portal-hq/web'

const portal = new Portal({
    apiKey: 'YOUR_CLIENT_API_KEY',
    rpcConfig: {
      'eip155:1': 'YOUR-INFURA-OR-ALCHEMY-URL',
      'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': 'https://api.mainnet-beta.solana.com',
    },
})

Authenticating with a Web OTP

This approach is a bit more secure as it instead exposes a OTP to your DOM and once this is used, it's invalidated on Portal's end, which makes it unusable for authentication in the future.

The steps required to accomplish this are:

  1. Make a GET request to https://api.portalhq.io/api/v1/custodians/clients/${clientId}/web-otp using your CUSTODIAN_API_KEY as a Bearer token.

  2. Initialize Portal with the delivered OTP as the authToken initialization option.

Fetching a Web OTP

// On your server
yourApp.get('/otp', (req: Request, res: Response) => {
  const url = `https://api.portalhq.io/api/v1/custodians/clients/${clientId}/web-otp`
  const { data } = await axios.get(url, {
    headers: {
      Authorization: `Bearer YOUR-CUSTODIAN-API-KEY`,
    },
  })

  res.sent(data.otp)
})

Initializing Portal

import Portal from '@portal-hq/web'

const initializePortal = () => {
  const response = await fetch('https://yourserver.com/otp', {
    credentials: 'include'
  })
  
  const authToken = response.text()
  
  const portal = new Portal({
    authToken,
    rpcConfig: {
      'eip155:1': 'YOUR-INFURA-OR-ALCHEMY-URL',
      'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': 'https://api.mainnet-beta.solana.com',
    },
  })
}

Authenticating with an authUrl

This approach is by far the most secure as it never exposes any Portal credentials to your DOM. This works by adding a route to your application that fetches an OTP and redirects to Portal's server for validation. The URL to your authentication route is then provided as the authUrl option when initializing Portal.

The steps required to accomplish this are:

  1. Create a route on your server that gets a new Web OTP and redirects to https://web.portalhq.io/clients/token/validate?otp=YOUR-WEB-OTP

  2. Enable CORS access to https://web.portalhq.io on your new route

  3. Initialize Portal with your authUrl

Creating an authentication route

// On your server
yourApp.get(
  '/portal/authenticate', // This can be any route you like
  cors({
    credentials: true,
    origin: 'https://web.portalhq.io',
  }),
  async (req: Request, res: Response) => {
    const url = `https://api.portalhq.io/api/v1/custodians/clients/${clientId}/web-otp`
    const { data } = await axios.get(url, {
      headers: {
        Authorization: 'Bearer YOUR-CUSTODIAN-API-KEY'
      }
    })

    // This redirect is where the magic happens
    res.redirect(`https://web.portalhq.io/clients/token/validate?otp=${data.otp}`)
  }
)

Initializing Portal with an authUrl

import Portal from '@portal-hq/web'

const portal = new Portal({
  // This URL corresponds to the route you created in the previous step
  authUrl: 'https://yourserver.com/portal/authenticate',
  rpcConfig: {
    'eip155:1': 'YOUR-INFURA-OR-ALCHEMY-URL',
    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': 'https://api.mainnet-beta.solana.com',
  },
})
PreviousManage wallet lifecycle statesNextPerform swaps

Last updated 12 months ago

Was this helpful?