Connect with Passkey

\n Authenticate using biometrics (Face ID, Touch ID, fingerprint) secured by WebAuthn.\n Your passkey creates a Tempo smart account with P256 signature verification.\n

\n\n

\n \n Sign Up (Create Passkey)\n \n \n Sign In (Use Passkey)\n \n

\n )}\n\n {account.status === \"connecting\" && (\n

\n {account.action === \"sign-up\"\n ? \"Creating your passkey account...\"\n : \"Authenticating with your passkey...\"}\n

Follow your device's biometric prompt

\n )}\n\n {account.status === \"connected\" && (\n

\n {account.address.slice(2, 4).toUpperCase()}\n

Connected

\n {account.address.slice(0, 8)}...{account.address.slice(-6)}\n

\n \n Sign Out\n \n

\n\n

\n Network\n {network.name}\n

\n Chain ID\n {network.id}\n

\n Address\n {account.address}\n

\n Auth Method\n WebAuthn Passkey (P256)\n

\n )}\n\n {error && (\n

\n {error}\n

\n )}\n

\n\n {/* How It Works */}\n

How Tempo Wallet Auth Works

\n\n

Passkey Creation (Sign Up)

\n The browser's WebAuthn API creates a P256 keypair stored in the device's secure enclave.\n The public key is registered on-chain via Tempo's Account Keychain precompile, creating a\n smart account bound to your domain.\n

\n\n

Passkey Authentication (Sign In)

\n The user authenticates with biometrics (Face ID, Touch ID). The device signs a challenge with the\n P256 private key. Tempo natively verifies P256/WebAuthn signatures in its transaction type.\n

\n\n

Transaction Signing

\n Once connected, every transaction is signed with the passkey. Tempo Transactions\n (a custom EIP-2718 type) support WebAuthn signatures natively — no wallet extension needed.\n

\n\n

\n\n {/* Code Example */}\n

Production Integration with Wagmi

\n In production, use Wagmi with Tempo's webAuthn connector.\n This demo uses the raw WebAuthn API to show what happens under the hood.\n

\n\n

{`// config.ts\nimport { createConfig, http } from 'wagmi'\nimport { tempo } from 'viem/chains'\nimport { KeyManager, webAuthn } from 'wagmi/tempo'\n\nexport const config = createConfig({\n  chains: [tempo],\n  connectors: [webAuthn({\n    keyManager: KeyManager.localStorage(),\n    // For production, use a remote key manager:\n    // keyManager: KeyManager.http({ url: '/api/keys' }),\n  })],\n  multiInjectedProviderDiscovery: false,\n  transports: { [tempo.id]: http() },\n})`}

\n\n

{`// LoginComponent.tsx\nimport { useConnect, useConnectors,\n         useConnection, useDisconnect } from 'wagmi'\n\nexport function Login() {\n  const connect = useConnect()\n  const [connector] = useConnectors()\n  const account = useConnection()\n  const disconnect = useDisconnect()\n\n  if (account.address)\n    return (\n      \n        {account.address.slice(0, 6)}...{account.address.slice(-4)}
\n        \n      
\n    )\n\n  return (\n    \n      \n      \n    
\n  )\n}`}

\n\n {/* Key Concepts */}\n

Key Concepts

Domain-Bound Accounts

\n Passkey credentials are tied to your domain. Users get a separate account per app.\n For a universal account, connect to MetaMask or other EVM wallets instead.\n

No Wallet Extension

\n Passkeys use the device's built-in secure enclave. No browser extension, seed phrase,\n or separate app needed.\n

Key Management

\n Use KeyManager.localStorage() for dev.\n In production, use KeyManager.http() with\n the Handler.keyManager() server handler.\n

Access Keys

\n Tempo accounts support multiple access keys with spending limits. Apps can request\n scoped keys for subscriptions or agent spending controls.\n

\n\n {/* Links */}\n

Resources

\n \n Embed Passkeys Guide\n \n \n Connect to Wallets Guide\n \n \n TypeScript SDK\n \n \n Tempo Transaction Spec\n \n \n Wagmi for Tempo\n \n

\n\n

\n This demo uses the raw WebAuthn browser API. In production, use Wagmi with the Tempo webAuthn connector.\n

\n );\n}\n","deleted","label",[178,160],"routes","permalink","https://www.val.town/x/stevekrouse/tempo-login-vtrr/code/routes/Home.tsx","extension","tsx","actionData","errors"]