Wallet OTP (One Time Password)

Screenshots

Problem Statement

Two-factor authentication (2FA) adds an additional layer of protection beyond passwords to your web2 and web3 accounts. Wallet OTP is a free and completely open sourced public good that protects all your accounts by encrypting your 2FA secrets with your Wallet's public key before storing on decentralized storage. When you need 2FA, Wallet OTP generates new dynamic 6 digit OTPs (one time passwords) every 30 seconds for each of your accounts. That way, you and only you can use Wallet OTP to authenticate and log in to accounts across the web.This hack is awesome because it has all the power of Authy, Google Authenticator, or the auth app you already use with extra perks:Privacy and security: Wallet OTP encrypts your 2FA secret keys with your wallet's public key for maximum security. This means your 2FA keys are as safe as your crypto.Here's a Wallet OTP encrypted 2FA recordstored by "address":"0x61c4eF50cC from Wallet OTP. Notice how all fields (service, account, secret, plus corresponding symmetric keys for each field) are encrypted by Lit Protocol before being stored on Polybase decentralized storage. Even though the records are stored in public, no one can decrypt and view them except the person with signing capabilities for the 0x61c4eF50cC... address.Free access from any device: Wallet OTP is intentionally device agnostic and designed for multi-device use - you can access the Wallet OTP app on any device simply by connecting your walletData availability: Wallet OTP stores encrypted data on distributed, decentralized storage. With distributed, decentralized storage there's no way a Google or Twilio intern can accidentally drop the only table your encrypted keys live in, and no chance your encrypted keys are lost.

Solution

🚀 Web3 DetailsLogin mechanism: WalletConnect's Web3Modal combined with viem and wagmi React hooksENS names: check if a user has an ENS and if so,display their ENS avatar and namewith the viem libraryWallet OTP has a special APE theme for anyApecoin DAOMembers (checks if they are stakers or holders of $APE) when they sign inEncryption/decryption:Lit Protocol- I didn't use Ceramic or Arweave (default integrations) for storage, so I needed to create acustom Lit integration for Lit <> Polybasethat encrypts data using Lit Protocol, uploads it to Polybase, fetches the Lit encrypted data from Polybase, and decrypts using Lit ProtocolDecentralized Storage:public-key-write-gated Polybase collectionsof Lit encrypted records.Known issue that will be fixed by WalletConnect by June 23: Your browser needs to have a wallet (window.ethereum) or wallet extension and you have to sign more than once. When working withWalletConnect, Polybase, and Lit signing, I tried to optimize the UX to prevent duplicate signing in and signing by injecting WalletConnect into Polybase and Lit for auth, but WalletConnect is between V1 and V2. WC V2 has signing/auth capabilities, but doesn't hasn't completed integration with any major mainstream wallets. V1 doesn't have a working auth/sign api, but supports major mainstream wallets (coinbase, metamask, trust, etc.) Because of this, the WalletConnect logged in user still has to sign to prove wallet ownership for Lit and to post new records for Polybase.Notifications:Push protocolthis was the one thing I didn't get to, but I plan to finish the integration so you can get OTPs via Push chatCompute: I'm computing OTP generation client side to maximize security and prevent 2FA secret keys from leaking. I considered delegating this toBacalhau, but thought it was overkill to reencrypt and decrypt in a second service, risk leaking the keys, and slow down OTP generation. The OTP is TOTP, a time based one-time-password, which is an event-based OTP algorithm where the moving factor is an event counter.CDN:Filecoin Saturn. I registered a custom service worker to provide fast content delivery of images pinned on IPFSDecentralized static image storage: Pinned onIPFS, stored onNFT.storageWebsite hosting: decentralized onIPFS with Fleek🖥️ Web2 build detailsFrontend: React with Chakra UI componentsBackend: Node + Socket.ioDesign and slides: Canva ProQR Libraries: react-qr-code & qr-scanner📑 Papers read/referencedTOTP: Time-Based One-Time Password Algorithm https://www.ietf.org/rfc/rfc6238.txtWhat’s the Difference Between OTP, TOTP and HOTP? https://www.onelogin.com/learn/otp-totp-hotpSymmetric key encryption: https://www.cryptomathic.com/news-events/blog/symmetric-key-encryption-why-where-and-how-its-used-in-banking