Implement Passkey Authentication & Smart Wallet Integration

[0xdevcollins]

Feature: Implement Passkey Authentication & Smart Wallet Integration

Overview

The bounty frontend currently uses Better Auth for basic authentication but lacks passkey-based wallet creation and smart-account-kit integration. The main web (boundless) has a complete implementation including WebAuthn passkey registration, Soroban smart wallet deployment, and on-chain reputation initialization. This needs to be replicated in the bounty frontend.

Reference implementation: boundless/lib/smart-wallet/, boundless/components/providers/smart-wallet-provider.tsx, boundless/components/onboarding/SecureAccountStep.tsx

---

Goals

• Enable passkey-based authentication (biometrics / PIN)
• Deploy smart wallet contracts on Stellar for new users
• Store contractId + credentialId locally and sync with backend
• Initialize on-chain reputation profile during onboarding
• Support transaction signing via passkey for all contract interactions

---

Architecture (from Main Web)

The main web uses a two-layer auth system:

1. Better Auth — Session management, email/password, Google OAuth
2. smart-account-kit — Passkey registration, smart wallet deployment, transaction signing

Key Dependencies:

• smart-account-kit v0.2.10
• @stellar/stellar-sdk
• WebAuthn browser API

---

Implementation Details

1. Smart Wallet Configuration

Create: lib/smart-wallet/config.ts

Environment variables needed:

NEXT_PUBLIC_STELLAR_RPC_URL
NEXT_PUBLIC_STELLAR_NETWORK_PASSPHRASE
NEXT_PUBLIC_SMART_ACCOUNT_WASM_HASH
NEXT_PUBLIC_WEBAUTHN_VERIFIER_ADDRESS
NEXT_PUBLIC_NATIVE_TOKEN_CONTRACT
NEXT_PUBLIC_SMART_WALLET_INDEXER_URL (optional)
NEXT_PUBLIC_SMART_WALLET_RELAYER_URL (optional)

2. Smart Wallet Client

Create: lib/smart-wallet/client.ts

Key functions:

• getSmartAccountKit() — singleton instance
• createSmartWallet(appName, userName) → { contractId, credentialId }
• connectSmartWallet() → reconnect existing wallet
• disconnectSmartWallet() → clear session
• transfer(tokenContract, recipient, amount) — token transfers
• fetchSacTokenBalance(tokenContract, walletContractId) — balance reads

3. Smart Wallet Provider

Create: components/providers/smart-wallet-provider.tsx

• Context with contractId, credentialId, isConnected
• Persists to localStorage: boundless:smart-wallet:{userId}
• register(userName) — create new passkey + deploy wallet
• connect() — reconnect existing passkey
• disconnect() — clear state
• Syncs with backend via wallet API

4. Secure Account Onboarding Step

Create: components/onboarding/secure-account-step.tsx

• Biometric prompt for passkey creation
• Smart wallet deployment progress
• Fallback for browsers without WebAuthn support
• Success state with wallet address display

5. On-Chain Reputation Initialization

Create: lib/contracts/reputation-registry.ts

• initReputationProfile(walletAddress) — calls Reputation Registry contract
• Signs with passkey via smart-account-kit
• Called at end of onboarding

6. Transaction Signing Integration

Create: lib/smart-wallet/sign.ts

• Generic signAndSubmit(transaction) helper
• Passkey signing prompt for all contract interactions
• Used by all bounty contract hooks (claim, apply, submit, approve)

---

Files Affected

Created

• lib/smart-wallet/config.ts
• lib/smart-wallet/client.ts
• lib/smart-wallet/sign.ts
• lib/contracts/reputation-registry.ts
• components/providers/smart-wallet-provider.tsx
• components/onboarding/secure-account-step.tsx

Modified

• package.json (add smart-account-kit, @stellar/stellar-sdk)
• .env.example (add Stellar env vars)
• providers/ (wrap app with SmartWalletProvider)
• components/global-navbar.tsx (show wallet status)

---

Acceptance Criteria

• Passkey registration creates Stellar smart wallet
• contractId and credentialId persisted and synced with backend
• On-chain reputation profile initialized during onboarding
• Transaction signing works via passkey biometric prompt
• Wallet balance displayed in navbar/wallet page
• Reconnect works across page refreshes
• Graceful fallback when WebAuthn unavailable

[linear]

BOU-158

[coderabbitai]

🔗 Related PRs

#16 - Add GitHub Authentication via Better Auth [merged]
#17 - feat: Built BountyCard component with shadcn composition [merged]
#71 - feat: Implement User Wallet Sheet with Balance, Assets, and Activity … [merged]
#110 - feat: Implement Earnings & Payout Tracking [merged]
#115 - feat: replace hand-written bountyKeys with codegen-generated query keys [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Abidoyesimze]

@Abidoyesimze has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi maintainer, i'd like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Abidoyesimze to this issue.

[Delightech28]

@Delightech28 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I'd like to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Delightech28 to this issue.

[Michaelkingsdev]

@Michaelkingsdev has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I can handle this task. Kindly assign.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Michaelkingsdev to this issue.

[kingjosmel]

@kingjosmel has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I am a Full-Stack Web3 Developer, and I will replicate the smart-account-kit architecture from the main platform to enable passkey-based authentication and Soroban smart wallet deployment for the bounty frontend

ℹ️ Repo Maintainers: To accept this application, review their application or assign @kingjosmel to this issue.

[ekumamatthew]

@ekumamatthew has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi please let me work on this task

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ekumamatthew to this issue.

[zhaog100]

/attempt