Getting Started

Overview

The Porto SDK is a TypeScript library designed for Applications and Wallets to create, manage, and interact with universal next-gen accounts on Ethereum.

Try signing into your account:

Install

Porto is available as an NPM package under porto

npm i porto

Wagmi Usage

Porto is best used in conjunction with Wagmi to provide a seamless experience for developers and end-users.

import { porto } from 'porto/wagmi'
import { http, createConfig, createStorage } from 'wagmi'
import { baseSepolia } from 'wagmi/chains'
 
export const wagmiConfig = createConfig({
  chains: [baseSepolia],
  connectors: [porto()], 
  storage: createStorage({ storage: localStorage }),
  transports: {
    [baseSepolia.id]: http(),
  },
})

import { useConnect, useConnectors } from 'wagmi'
 
function Connect() {
  const connect = useConnect()
  const connectors = useConnectors()
 
  return connectors?.map((connector) => (
    <button
      key={connector.uid}
      onClick={() => connect.connect({ connector })}
    >
      Connect
    </button>
  ))
}

Vanilla / Viem Usage

You can get started with Porto by creating a new instance with Porto.create().

Once set up, you can use the provider instance to interact with Porto.

import { Porto } from 'porto'
 
// 1. Initialize Porto.
const porto = Porto.create()
 
// 2. Use JSON-RPC methods.
const { accounts } = await porto.provider.request({ 
  method: 'wallet_connect'
})

• See RPC Reference for a list of all available JSON-RPC methods.
• See Viem's Wallet Actions

Secure Origins (HTTPS)

Porto is designed to be used on secure origins (HTTPS). If you are using HTTP, Porto will fallback to using a popup instead of an iframe. This is because WebAuthn is not supported on iframes embedded on insecure origins (HTTP).

Web frameworks typically default to HTTP in development environments. You will need to ensure to turn on HTTPS in development to leverage the Porto iframe.

Vite

HTTPS can be enabled on Vite's dev server by installing and configuring the vite-plugin-mkcert plugin.

npm i vite-plugin-mkcert

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mkcert from 'vite-plugin-mkcert'
 
export default defineConfig({
  plugins: [
    mkcert(), 
    react(),
  ],
})

Next.js

HTTPS can be enabled on Next.js' dev server by setting the --experimental-https flag on the next dev command.

next dev --experimental-https

Caddy

HTTPS can be enabled by running Caddy as a reverse proxy in front of your dev server. Install Caddy and create a Caddyfile pointing to your dev server.

example.localhost {
  reverse_proxy localhost:5713
}

Then run caddy run or caddy start and visit http://example.localhost.