Portoが拓く“パスワードレス認証とPredictable Payments”の世界
はじめに
私たちの日常は依然としてパスワードやシードフレーズ、ブラウザ拡張機能などの煩雑な認証手段に縛られています。特にWeb3アプリケーションの開発者は、ユーザーが初めてサービスを使う際のオンボーディングや、マルチチェーン対応、ガス代の予測不可能性など、様々な技術的課題に頭を悩ませてきました。このような背景から生まれたのが、オープンソースのTypeScriptライブラリ「Porto」です。本稿では、2025年5月28日にリリースされた開発プレビュー版を基に、Portoがどのように「パスワードレス認証」と「ネイティブ支払い環境」を実現するのか、その全貌を詳細に解説します。
Portoの概要
Portoは、既存のアカウントに高度な機能を追加したり、新しいアカウントを最初から構築したりできる、非常に柔軟なライブラリです。現在はBase Sepolia上で稼働しており、近日中に主要なEVMチェーンすべてに対応する予定です。開発元のIthacaチームは、これまでにRethやFoundry、Wagmi、ViemといったOSSツールを広く世に送り出してきた実績があり、そのノウハウを余すところなくPortoに注ぎ込んでいます。
パスワードレス認証の実現
多くのユーザーはパスワード管理に不安を抱え、結果としてサービス離れを引き起こすことがあります。PortoではWebAuthnを活用したPasskeys認証を標準サポートし、OAuthを利用したPrivy連携にも対応することで、パスワードやシードフレーズ、秘密鍵を一切持ち歩く必要がなくなります。そのため、ユーザーはブラウザ拡張機能をインストールしたり、難解なシークレット管理手順を覚えたりしなくても、数クリックで安全にアカウントを作成し、サービスを利用できます。
ネイティブ支払い機能とガス代問題の解決
Web3アプリケーションでは、ユーザーが各チェーンのネイティブトークンを用意しなければならない点が大きな障壁です。PortoではUSDCやUSDTなどの安定コインを用いた固定手数料支払いを可能にし、ユーザーは自分が使い慣れた通貨でガス代を支払うだけで取引を完了できます。この仕組みにより、取引ごとに変動するガス代をユーザーが予測する必要がなくなり、オンチェーン体験が飛躍的に快適になります。
コア原則とアーキテクチャ
Portoは「Developer-first」「Performance & Cost-effectiveness」「Modularity」という三つの基本原則を掲げて設計されています。まず開発者視点では、WagmiやViemといった主要フロントエンドライブラリとの統合において、一切のコード変更を不要としました。既存プロジェクトに数行の設定を追加するだけで、そのままPortoの恩恵を享受できるため、導入コストや学習コストを最小限に抑えます。
性能面では、従来型のERC-4337ベースのアカウント抽象化スタックを再構築し、支払い時のガス消費量を50％以上削減することに成功しました。さらに、自社開発のインフラストラクチャでは「次ブロック確実インクルージョン」を実現するため、ガス価格の自動調整とリトライ機構を組み合わせ、高速かつ確実なトランザクション処理を可能にしています。
モジュール性にもこだわり、Portoは単体で動作するスタンドアロンモードと、既存のアプリケーションフローに組み込むヘッドレスモードの両方をサポートしています。この柔軟性により、アプリ開発チームは自社の要件やユーザー体験を損なうことなくPortoを活用できます。
フィアットオンランプとマーケティング機能
Portoは暗号資産だけでなく、従来型のフィアット通貨を用いたオンランプにも対応しています。現状、Base Sepoliaではファセットを使ったデモ的なオンランプが提供されていますが、Base Mainnetへの展開に伴い、Apple Payを活用した1ユーザー当たり最大500ドルの初回入金サポートを米国、カナダ、欧州で提供予定です。この仕組みにより、新規ユーザーのハードルが劇的に下がるとともに、特定の条件を満たしたユーザーに対してトークンやオンボーディング資金を自動付与するプロモーション機能も備えています。
アカウント委任とサブスクリプション
Portoの最も革新的な機能の一つが「アカウント委任 & サブスクリプション」です。開発プレビュー段階で実験的にリリースしたEXP-0002、EXP-0003では、アカウント所有者が第三者に自動的にトランザクション権限を委ねたり、定期的な支払いをサブスクリプション形式で自動化したりするデモを公開しました。この機能により、SaaS型のサービス定額課金やゲーム内のアイテム購入クリエイターペイメントなど、エージェントワークフローの幅が大きく広がります。
実装例
まずはユーザーが Porto アカウントをアプリに接続する「オンボーディング」について。Wagmi を使った最小限の設定で、数行のコードを追加するだけで認証フローが完成します。
Wagmi 連携のための設定
import { createConfig, http } from 'wagmi'
import { baseSepolia } from 'wagmi/chains'
import { porto } from 'porto/wagmi'
export const config = createConfig({
chains: [baseSepolia],
connectors: [porto()],
transports: {
[baseSepolia.id]: http(),
},
})
この設定を行うと、Wagmi の useConnect で Porto コネクタが使えるようになります。
サインイン／サインアウト UI
次に、アプリケーションにサインインボタンとサインアウト機能を実装します。接続済みのときは短縮アドレスとサインアウトボタンを表示し、未接続時はサインインを促すシンプルな UI です。
import React from 'react'
import { useAccount, useConnect, useDisconnect } from 'wagmi'
export function AccountControls() {
const { address } = useAccount()
const { connect, connectors } = useConnect()
const { disconnect } = useDisconnect()
const portoConnector = connectors.find(c => c.id === 'xyz.ithaca.porto')!
if (address) {
return (
<div>
<span>{address.slice(0, 6)}…{address.slice(-4)}</span>
<button onClick={() => disconnect()}>Sign out</button>
</div>
)
}
return (
<button onClick={() => connect({ connector: portoConnector })}>
Sign in with Porto
</button>
)
}
このように、ユーザーはパスワードも拡張機能も不要で、数クリックだけで安全にアカウントを接続できます。
支払いフロー（Payments）実装例
Porto の中心機能のひとつがバッチコールによる「支払いフロー」です。ERC-20 トークンの approve と NFT の mint を一度に送信し、ユーザー体験をシームレスにします。
import React from 'react'
import { useSendCalls, useWaitForCallsStatus } from 'wagmi'
import { parseEther } from 'viem'
import { expConfig, nftConfig } from './abi'
export function BuyNowWithStatus() {
const { sendCalls, data, isPending } = useSendCalls()
const { isLoading: isConfirming, isSuccess } = useWaitForCallsStatus({
id: data?.id,
})
if (isSuccess) {
return <div>🎉 Purchase complete!</div>
}
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
sendCalls({
calls: [
{ abi: expConfig.abi, functionName: 'approve', to: expConfig.address, args: [nftConfig.address, parseEther('10')] },
{ abi: nftConfig.abi, functionName: 'mint', to: nftConfig.address },
],
})
}
return (
<form onSubmit={handleSubmit}>
<button disabled={isPending || isConfirming}>
{isPending
? 'チェックしてください'
: isConfirming
? '処理中…'
: 'Buy Now'}
</button>
</form>
)
}
送信後は useWaitForCallsStatus がトランザクション完了を監視し、完了次第メッセージを表示します。ガス代の予測不要、ブラウザ拡張なしでの完結した決済体験を提供できます。
パーミッション（Permissions）実装例
Porto は「特定コントラクト呼び出しのみ許可」「1時間あたり10EXPまで消費可能」といった細かな権限制御をサポートします。以下は、接続時に権限を付与する例です。
import { Value } from 'ox'
import { expConfig } from './abi'
export const permissions = () => ({
expiry: Math.floor(Date.now() / 1_000) + 60 * 60,
permissions: {
calls: [{ to: expConfig.address }],
spend: [
{
limit: Value.fromEther('10'),
period: 'hour',
token: expConfig.address,
},
],
},
} as const)
import React from 'react'
import { useConnect } from 'wagmi'
import { permissions } from '../permissions'
export function ConnectWithPermissions() {
const { connect, connectors } = useConnect()
const portoConnector = connectors.find(c => c.id === 'xyz.ithaca.porto')!
return (
<button
onClick={() =>
connect({
connector: portoConnector,
capabilities: { grantPermissions: permissions() },
})
}
>
Sign in & Grant Permissions
</button>
)
}
これにより、ユーザーは必要最低限の権限だけを付与し、安全性を確保しながら操作を許可できます。
自分も試しに実装してみました。
こちらから機能を体験できます。
今後のロードマップ
今後のPortoでは、まずBase Mainnet上でのセキュリティ強化を最優先課題とし、スマートコントラクトのバグバウンティプログラムを実施中です。さらには機関向けのマルチシグモジュールを開発し、数十億ドル規模の資産を安全に保有できる環境を整備します。同時に、アプリケーションレイヤーでの支払い受領インタープラビリティを追求し、開発者がどのネットワーク上にデプロイしていても、世界中どこからでも柔軟に収益化できる仕組みを構築していきます。
まとめ
Porto は「パスワードレス認証」「安定コインによる固定手数料」「自動ガス調整」「アカウント委任・サブスクリプション」といった機能を TypeScript 一本で提供する次世代ライブラリです。本記事で紹介したコード例を手元のプロジェクトに組み込むだけで、安全かつスムーズなオンボーディングから決済フロー、権限制御、サブスクリプションまで、一気通貫の UX を実現できます。ぜひ Porto を試し、その可能性を体感しましょう。
参考
Discussion