openfort-embedded-wallet

Openfort 組み込みウォレットのセットアップ

⚠️ テストキーとライブキー — リリース前にお読みください。 Openfort には完全に分離された 2 つの環境があります。テストモード（pk_test_…、テストネット専用）とライブモード（pk_live_…、メインネット、実際の資金）です。一方の環境で作成したウォレットとリカバリー（Shield）の設定に、もう一方からアクセスすることはできません。

• テスト（開発用）公開鍵で作成したウォレットはテストネット上でのみ有効であり、実際のユーザー資金には決して使用しないでください。
• 本番環境に移行するには、ライブ公開鍵（およびライブ Shield キー）に切り替えてください。ユーザーには新しいウォレットが作成されます。テスト用ウォレットとそのリカバリーシェアは引き継がれません。
• 公開鍵はクライアントで安全に使用できます。シークレット（sk_…）キーをブラウザーやアプリに含めないでください。 https://openfort.io/docs/configuration/api-keys を参照してください。

組み込みウォレットは、ウォレット管理を抽象化することで、シームレスなエクスペリエンスを提供します。ユーザーは、秘密鍵、シードフレーズ、ブロックチェーンの概念を理解する必要なく、アプリを利用できます。

SDK を選択する

Openfort は、複数のプラットフォーム向けに組み込みウォレット SDK を提供しています。

プラットフォーム	パッケージ	最適な用途
React / Next.js	@openfort/react	事前構築済み UI モーダルを備えた Web アプリ
React Native / Expo	@openfort/react-native	モバイルアプリ（iOS + Android）
iOS / Swift	OpenfortSwift	ネイティブ iOS アプリ
Unity / C#	openfort-csharp-unity	ゲーム（Windows、macOS、Android、iOS、WebGL）
Vanilla JS / TS	@openfort/openfort-js	カスタム UI、あらゆる JS フレームワーク、直接アクセス

どの SDK を使えばよいですか？

• React または Next.js の Web アプリを構築する場合 → @openfort/react を使用します（事前構築済みの認証モーダルとウォレット UI が含まれています）。
• React Native / Expo のモバイルアプリを構築する場合 → @openfort/react-native を使用します。
• ネイティブ iOS アプリを構築する場合 → OpenfortSwift を使用します。
• Unity ゲームを構築する場合 → openfort-csharp-unity を使用します。
• Svelte、Vue、Angular、Vanilla JS で構築する場合、またはカスタムのログインフローが必要な場合 → @openfort/openfort-js を使用します。

各 SDK の詳細な API リファレンスについては、次のリファレンスファイルを参照してください。

• references/openfort-react.md — React / Next.js
• references/openfort-react-native.md — React Native / Expo
• references/openfort-swift.md — iOS / Swift
• references/openfort-unity.md — Unity / C#
• references/openfort-js.md — Vanilla JS / TS

---

クイックスタート：新しいプロジェクトを作成する

Web アプリをすばやく始めるには、Openfort CLI を使用します。

npm create openfort@latest
# or
pnpm create openfort@latest
# or
yarn create openfort

これにより、すべての依存関係と設定、および動作する組み込みウォレット連携を備えた新しいプロジェクトが作成されます。次の項目を選択できます。

• フレームワーク：Vite または Next.js
• 認証プロバイダー：Google、メール、パスキーなど
• 組み込みウォレット：リカバリー設定済み
• UI テーマ：組み込みテーマから選択

CLI が現在作成できるのは React の Web アプリです。他のプラットフォームについては、以下の手動セットアップに従ってください。

---

前提条件（全プラットフォーム）

SDK を連携する前に、Openfort Dashboard からキーを取得してください。

1. 公開鍵（pk_test_...）— プロジェクトを識別します
2. Shield 公開鍵（your-shield-publishable-key）— 組み込みウォレットの暗号化に使用します
3. リカバリーエンドポイント（推奨）— ウォレットの自動リカバリーに使用するバックエンド URL
4. Fee Sponsorship ID（pol_...、任意）— ガス代不要のトランザクションに使用します

---

React / Next.js — @openfort/react

事前構築済みの認証モーダルとウォレット UI を利用できます。Ethereum（EVM）および Solana チェーンに対応しています。

インストール

# Ethereum (EVM) — with wagmi
npm install @openfort/react @tanstack/react-query wagmi viem

# Solana — no wagmi needed
npm install @openfort/react @tanstack/react-query @solana/kit

環境変数

VITE_OPENFORT_PUBLISHABLE_KEY=pk_test_...
VITE_SHIELD_PUBLISHABLE_KEY=your-shield-publishable-key
VITE_WALLET_CONNECT_PROJECT_ID=...               # Optional — enables external wallets (EVM only)
VITE_FEE_SPONSORSHIP_ID=pol_...                   # Optional — gasless transactions
VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT=https://... # Backend endpoint for automatic recovery

Next.js では、VITE_ の代わりに NEXT_PUBLIC_ プレフィックスを使用してください。

Ethereum プロバイダーのセットアップ

プロバイダースタックは、QueryClientProvider → WagmiProvider → OpenfortWagmiBridge → OpenfortProvider の順です。

"use client" // Required in Next.js App Router

import { OpenfortProvider, AuthProvider } from '@openfort/react'
import { getDefaultConfig, OpenfortWagmiBridge } from '@openfort/react/wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { base, baseSepolia } from 'viem/chains'
import { createConfig, http, WagmiProvider } from 'wagmi'

const config = createConfig(
  getDefaultConfig({
    appName: 'My App',
    chains: [base, baseSepolia],
    walletConnectProjectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID,
    transports: {
      [base.id]: http('https://your-base-rpc.com'),
      [baseSepolia.id]: http(),
    },
  }),
)

const queryClient = new QueryClient()

const walletConfig = {
  shieldPublishableKey: import.meta.env.VITE_SHIELD_PUBLISHABLE_KEY!,
  ethereum: {
    ethereumFeeSponsorshipId: import.meta.env.VITE_FEE_SPONSORSHIP_ID,
  },
  createEncryptedSessionEndpoint: import.meta.env.VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT,
  connectOnLogin: true,
}

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={config}>
        <OpenfortWagmiBridge>
          <OpenfortProvider
            publishableKey={import.meta.env.VITE_OPENFORT_PUBLISHABLE_KEY!}
            walletConfig={walletConfig}
            uiConfig={{
              theme: 'midnight',
              mode: 'dark',
              authProviders: [AuthProvider.GOOGLE, AuthProvider.EMAIL_OTP, AuthProvider.WALLET],
            }}
          >
            {children}
          </OpenfortProvider>
        </OpenfortWagmiBridge>
      </WagmiProvider>
    </QueryClientProvider>
  )
}

Solana プロバイダーのセットアップ

wagmi とブリッジは不要です。QueryClientProvider → OpenfortProvider のみを使用します。

"use client"

import { OpenfortProvider, AuthProvider, ChainTypeEnum } from '@openfort/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

const walletConfig = {
  shieldPublishableKey: import.meta.env.VITE_SHIELD_PUBLISHABLE_KEY!,
  chainType: ChainTypeEnum.SVM,
  solana: { cluster: 'mainnet-beta' },
  createEncryptedSessionEndpoint: import.meta.env.VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT,
  connectOnLogin: true,
}

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <OpenfortProvider
        publishableKey={import.meta.env.VITE_OPENFORT_PUBLISHABLE_KEY!}
        walletConfig={walletConfig}
        uiConfig={{
          theme: 'midnight',
          mode: 'dark',
          authProviders: [AuthProvider.GOOGLE, AuthProvider.EMAIL_OTP],
        }}
      >
        {children}
      </OpenfortProvider>
    </QueryClientProvider>
  )
}

使用方法 — OpenfortButton

OpenfortButton はユーザーの状態に自動的に適応します。

• 未ログイン → 「Connect」ボタン → 認証モーダルを開きます
• ログイン済み＋ウォレットあり → ウォレットアドレスを表示 → プロフィール／ウォレットモーダルを開きます
• ログイン済み、ウォレットなし → ウォレットの作成中に読み込み状態を表示します

import { OpenfortButton } from '@openfort/react'

function App() {
  return <OpenfortButton />
}

主なフック（React）

// Auth
import { useUser, useEmailAuth, useEmailOtpAuth, usePhoneOtpAuth, useOAuth, useGuestAuth, useSignOut } from '@openfort/react'

// Wallet
import { useEthereumEmbeddedWallet } from '@openfort/react/ethereum'
import { useSolanaEmbeddedWallet } from '@openfort/react/solana'

// UI control
import { useUI } from '@openfort/react' // open/close modal programmatically

// wagmi integration
import { useWalletAuth, useChainIsSupported } from '@openfort/react/wagmi'

uiConfig のオプション

uiConfig={{
  theme: 'midnight',              // 'auto' | 'web95' | 'retro' | 'soft' | 'midnight' | 'minimal' | 'rounded' | 'nouns'
  mode: 'dark',                   // 'light' | 'dark' | 'auto'
  authProviders: [AuthProvider.GOOGLE, AuthProvider.EMAIL_OTP, AuthProvider.WALLET],
  authProvidersLength: 4,         // How many to show before "More options"
  walletRecovery: {
    allowedMethods: [RecoveryMethod.AUTOMATIC, RecoveryMethod.PASSKEY],
    defaultMethod: RecoveryMethod.AUTOMATIC,
  },
  // termsOfServiceUrl, privacyPolicyUrl, disclaimer, customTheme, logo, etc.
}}

---

React Native / Expo — @openfort/react-native

ネイティブモバイル SDK です。Ethereum と Solana の組み込みウォレットに対応しています。

インストール

npx --yes expo install expo-apple-authentication expo-application expo-crypto expo-secure-store expo-constants
npm install react-native-get-random-values @openfort/react-native

# Optional:
npm install react-native-passkeys          # For passkey recovery
npx expo install expo-web-browser expo-linking  # For OAuth

エントリーポイント

react-native-get-random-values は必ず最初にインポートしてください。

// entrypoint.ts
import "react-native-get-random-values";
import "expo-router/entry";

package.json を更新します：{ "main": "entrypoint.ts" }

プロバイダーの設定

import { OpenfortProvider, RecoveryMethod } from "@openfort/react-native";
import Constants from "expo-constants";

export default function RootLayout() {
  return (
    <OpenfortProvider
      publishableKey={Constants.expoConfig?.extra?.openfortPublishableKey}
      walletConfig={{
        shieldPublishableKey: Constants.expoConfig?.extra?.openfortShieldPublishableKey,
        recoveryMethod: RecoveryMethod.AUTOMATIC,
        feeSponsorshipId: Constants.expoConfig?.extra?.openfortPolicyId,
        createEncryptedSessionEndpoint: Constants.expoConfig?.extra?.openfortShieldRecoveryEndpoint,
      }}
      supportedChains={[{
        id: 84532,
        name: 'Base Sepolia',
        nativeCurrency: { name: 'Base Sepolia Ether', symbol: 'ETH', decimals: 18 },
        rpcUrls: { default: { http: ['https://sepolia.base.org'] } },
      }]}
      verbose={__DEV__}
    >
      {/* Your app */}
    </OpenfortProvider>
  );
}

wagmi も、ブリッジも、QueryClientProvider も、手動での WebView の設定も不要です。必要なのは OpenfortProvider だけです。

主なフック（React Native）

import { useEmbeddedEthereumWallet } from '@openfort/react-native'  // EVM
import { useEmbeddedSolanaWallet } from '@openfort/react-native'    // Solana
import { AuthBoundary } from '@openfort/react-native'                // Auth state boundary
import { useUser, useEmailAuth, useEmailAuthOtp, useOAuth, useGuestAuth, useSignOut } from '@openfort/react-native'

AuthBoundary

<AuthBoundary
  loading={<LoadingScreen />}
  unauthenticated={<LoginScreen />}
  error={(error) => <ErrorScreen error={error} />}
>
  <MainApp />
</AuthBoundary>

---

iOS / Swift — OpenfortSwift

iOS アプリ向けのネイティブ Swift SDK です。Ethereum のみ（EVM）に対応しています。

インストール

Swift Package Manager を使用して追加します：https://github.com/openfort-xyz/swift-sdk.git

設定

Xcode プロジェクトに OFConfig.plist を追加します。

• openfortPublishableKey（必須）
• shieldPublishableKey（必須）
• shieldEncryptionKey または shieldEncryptionEndpoint（リカバリー用）

初期化

import OpenfortSwift

// In AppDelegate or App init:
try OFSDK.initialize()

// With third-party auth:
try OFSDK.initialize(thirdPartyAuth: .init(
    provider: .firebase,
    getAccessToken: { try await Auth.auth().currentUser?.getIDToken() ?? "" }
))

ウォレットと認証

let sdk = OFSDK.shared

// Authenticate
try await sdk.logInWithEmailPassword(email: "[email protected]", password: "pass")
try await sdk.initOAuth(provider: .google, redirectTo: "myapp://callback")

// Configure embedded wallet (auto create or recover)
let account = try await sdk.configureEmbeddedWallet(
    chainId: 80002,
    recoveryMethod: .automatic(encryptionSession: session)
)

// Get EIP-1193 provider
let provider = try sdk.getEthereumProvider(policy: "pol_...")

// Send transaction
let txHash = try await provider.request(method: "eth_sendTransaction", params: [...])

---

Unity / C# — openfort-csharp-unity

Windows、macOS、Android、iOS、WebGL に対応したゲーム SDK です。

インストール

UPM の Git URL を使用します：https://github.com/openfort-xyz/openfort-csharp-unity.git?path=/src/Packages/OpenfortSDK

UniTask v2.3.3 が必要です。

初期化と認証

using Openfort;

var sdk = await OpenfortSDK.Init("pk_test_...", "your-shield-publishable-key");

// Authenticate
await sdk.LogInWithEmailPassword("[email protected]", "pass");

// Configure embedded wallet
var account = await sdk.ConfigureEmbeddedWallet(
    chainId: 80002,
    recoveryMethod: RecoveryMethod.Automatic,
    encryptionSession: session
);

// Get provider and send transaction
var provider = sdk.GetEthereumProvider(policy: "pol_...");
var txHash = await provider.Request("eth_sendTransaction", new object[] { txParams });

---

Vanilla JavaScript / TypeScript — @openfort/openfort-js

カスタムのログインフローや、低レベルでの API アクセス向けの SDK です。任意のフレームワーク（Svelte、Vue、Angular など）でも、フレームワークを使わない場合でも動作します。

インストール

npm install @openfort/openfort-js@latest

初期化

import { Openfort } from '@openfort/openfort-js'

const openfort = new Openfort({
  baseConfiguration: { publishableKey: 'pk_test_...' },
  shieldConfiguration: { shieldPublishableKey: 'your-shield-publishable-key' },
})

await openfort.waitForInitialization()

認証とウォレット

// Authenticate
await openfort.auth.logInWithEmailPassword({ email: '[email protected]', password: 'pass' })

// Or OAuth
const url = await openfort.auth.initOAuth({ provider: OAuthProvider.GOOGLE, redirectTo: '...' })

// Configure embedded wallet (auto create or recover)
const account = await openfort.embeddedWallet.configure({
  chainId: 80002,
  recoveryParams: {
    recoveryMethod: RecoveryMethod.AUTOMATIC,
    encryptionSession: await fetchEncryptionSession(),
  },
})

// Get EIP-1193 provider
const provider = await openfort.embeddedWallet.getEthereumProvider({ policy: 'pol_...' })

// Send transaction
const txHash = await provider.request({
  method: 'eth_sendTransaction',
  params: [{ from: account.address, to: '0x...', value: '0x...', data: '0x' }],
})

Web3 ライブラリとの統合

// Viem
import { createWalletClient, custom } from 'viem'
const walletClient = createWalletClient({ chain: sepolia, transport: custom(provider) })

// Ethers.js v6
import { ethers } from 'ethers'
const ethersProvider = new ethers.BrowserProvider(provider)
const signer = await ethersProvider.getSigner()

---

共通の概念（すべてのプラットフォーム）

認証プロバイダー

すべての SDK が同じ認証方法に対応しています。

• メールアドレス＋パスワード — 従来のサインアップ／ログイン
• メール OTP — パスワード不要のマジックリンク
• 電話番号 OTP — SMS 認証
• OAuth — Google、Apple、Twitter、Discord、Facebook、LINE、Epic Games
• ゲスト — 匿名で利用でき、後からアップグレードできます
• SIWE — Sign-In With Ethereum（外部ウォレット）
• サードパーティ認証 — Firebase、Supabase、Auth0 など

リカバリー方法

組み込みウォレットでは、クライアント側の暗号化を使用します。ユーザーがデバイスを切り替える際にはリカバリーが必要です。

• 自動（推奨）— バックエンドの暗号化セッションを使用し、シームレスに復元します
• パスワード — ユーザーが指定するパスワード
• パスキー — 生体認証（Face ID、指紋認証）— iOS 18+ / Android 14+

ガスレス取引（手数料のスポンサー提供）

ダッシュボードのPoliciesとFee Sponsorshipでガススポンサーシップを設定し、pol_... ID を SDK の設定に渡します。

対応チェーン

Openfort の組み込みウォレットは、あらゆる EVM チェーンとSolanaに対応しています。SDK の設定で、チェーン ID と RPC URL を指定してください。

---

ドキュメントとリソース

• 完全なドキュメント： https://www.openfort.io/docs/products/embedded-wallet
• React クイックスタート： https://www.openfort.io/docs/products/embedded-wallet/react
• React Native クイックスタート： https://www.openfort.io/docs/products/embedded-wallet/react-native
• Swift クイックスタート： https://www.openfort.io/docs/products/embedded-wallet/swift
• Unity クイックスタート： https://www.openfort.io/docs/products/embedded-wallet/unity/quickstart
• JS クイックスタート： https://www.openfort.io/docs/products/embedded-wallet/javascript/quickstart
• ダッシュボード： https://dashboard.openfort.io
• GitHub のサンプル： https://github.com/openfort-xyz