bounded-frontend

Bounded frontend

The client side of a Bounded app: the SDK your web or mobile app calls, how end users authenticate, and how the hosted frontend is served. Policy still governs every write from the client, so pair this with the bounded-backend skill when a client action needs a rule or invariant, and bounded-deploy for hosting and domains. To route across the family, see the root bounded skill.

Reference Router

Read only the row matching the current task or term.

Task or term	Read
SDK reads, writes, subscriptions, paging, queryAggregate, count, filters, sort, cursor, setMany, set(path, null)	SDK reference
Build a web frontend	web app guide
Local dev server (npm run dev, Vite, localhost), login popup fails, redirect_uri origin is not a registered origin, CORS during local development	develop on localhost
Refresh timer, setInterval, polling, "keep it fresh", countdown, stale UI	SDK reference
Build for React Native / mobile	React Native guide
App-user email OTP, OAuth, openBoundedWidget, unified login widget, default Turnkey auth	app auth
Bring-your-own wallet login; walletLogin, authMethod:'phantom', supportsWalletSignIn, unsupported wallet / Wallet Standard	wallet login
Wallet login lost on refresh, getCurrentUser() null after reload, bounded_last_auth_method, session restore method	wallet login - "Wallet sessions survive reloads"
Guests, anonymous users, invite links, account upgrade	anonymous accounts
Link a user's X account, connect('x'), completeConnection, getConnections, verified X handle, __connections__	connected accounts
Hosted frontend and app URLs	frontend hosting
Hide or limit the hosted widget, /__bounded/widget.js, openApps.widget.visibility	hide the widget
A Next.js app that runs its server (vinext), its secrets and limits	server apps
CLI developer login or bounded login	developer accounts
Embedded wallet, auth.wallets, @user.address after email/social login	embedded wallets
onramp(), buy SOL/USDC by card, Coinbase Onramp, wallet top-up	onramp

Rules Of Thumb

• Every client write is governed by policy; a 403 on a write is a rule denial, not a client bug. See the bounded-backend skill for the rule.
• Denied reads return empty 200 responses, never 403.
• Live by default; never poll. Every collection is push-based, so a setInterval that re-reads a path is a bug, not a tuning choice - use useQuery (React) or subscribe. Countdowns tick on local clock state, not on a re-read. For the few surfaces that are not live (runQuery, functions.invoke, third-party), poll deliberately: pause on a hidden tab, scope the timer to the state that needs it, back off, and bound it. See sdk-reference.md.
• Batch reads for lists of computed values with runQueryMany; never map runQuery over a list. See sdk-reference.md.
• Put provider API keys in Bounded secrets (backend), never in frontend code.
• If npm audit reports uuid advisory GHSA-w5hq-g745-h8pq through @solana/web3.js -> jayson, use the scoped override recipe. It addresses that advisory; run npm audit --omit=dev on the installed lockfile and investigate any remaining findings separately.
• Keep the auth defaults for most apps. Do not add authMode or auth.wallets to "enable wallets": default Turnkey email/social login already carries @user.address. Deploy "auth": { "wallets": true } only for an EXTERNAL-keypair session (bring-your-own wallet login, a server-SDK keypair client, the CLI keypair data lane). Full rule and the opt-outs: embedded-wallets.md.
• @user.id (the account id) is identity/ownership; @user.address is the wallet. Key ownership, membership, and auth guards on @user.id (always present). Reach for @user.address only for wallet/onchain semantics - never as the identity key.
• Wallet login on a phone needs the Solana Mobile adapter. A phone browser never injects wallet apps; keep @solana-mobile/wallet-standard-mobile installed (legacy-peer-deps=true in .npmrc) and never pre-check window.solana before opening the widget. See Solana Mobile.