How to vibe codeBitwarden

Prerequisites

• Node.jsFree

  Runtime environment for building and running the Next.js web application and build tools.

• GitHubFree

  Version control and repository hosting for your codebase.

AI coding tools

• Claude Code

  Terminal-based AI coding agent ideal for scaffolding the full stack, setting up crypto routines, and iterating on UI components.

• Cursor

  AI code editor for refining React components, Tailwind styling, and debugging encryption hooks.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, and configure the Turso libSQL client for encrypted data storage.

   Initialize a new Next.js project using the App Router, TypeScript, and Tailwind CSS. Install shadcn/ui primitives (button, input, dialog, card, dropdown-menu, toast). Install `@libsql/client` for Turso database connectivity. Create a database schema file in TypeScript defining users (id, email, password_hash, salt, kdf_iterations) and cipher items (id, user_id, type, encrypted_data, notes, created_at, updated_at). Write migration scripts to set up these tables against a local SQLite instance or Turso connection.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Client-Side Zero-Knowledge Cryptography Engine

   Implement browser-based cryptographic utilities using the native Web Crypto API for master key derivation and AES-256-CBC/GCM encryption.

   Create a TypeScript cryptography module using the browser Web Crypto API (`window.crypto.subtle`). Implement functions for: 1) Deriving a master key from a master password and email salt using PBKDF2 with 600,000 iterations. 2) Generating a symmetric user data encryption key (protected by the master key). 3) Encrypting vault item payloads (username, password, notes) into ciphertext strings before transmission to the server. 4) Decrypting ciphertext strings locally in memory using the derived master key. Ensure no plaintext master passwords or unencrypted vault data ever leave the client boundary.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Authentication and Master Password Workflow

   Build user registration and login flows ensuring the server only verifies authentication hashes while the client retains the decryption keys.

   Implement authentication pages and API routes using better-auth integrated with Turso. During registration, the client generates a cryptographic salt, hashes the master password via PBKDF2 for server verification, and stores the user record. During login, the user enters their master password on the client, which derives the master key and holds it in volatile session memory. Create a secure session context provider that makes the decryption key available exclusively to authenticated vault views.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Vault Item Management and Dashboard

   Build the core vault dashboard allowing users to view, add, edit, and delete logins, secure notes, and credit cards with client-side encryption.

   Build a dashboard layout in Next.js featuring a sidebar for item categories (Logins, Secure Notes, Cards) and a main content list. Implement modals for creating and editing vault items. When a user submits a new item, serialize the payload, encrypt it using the client-side crypto module, and send the encrypted blob to a `/api/ciphers` endpoint. Populate the list by fetching encrypted items from the server and decrypting them locally on-the-fly using the active master key in memory.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Password and Passphrase Generator

   Build an integrated password and passphrase generator tool with customizable character sets and strength estimation.

   Create a Password Generator component within the dashboard and as a standalone utility modal. Include options for length (default 16), uppercase, lowercase, numbers, and special symbols. Implement a diceware-style passphrase generator using an embedded wordlist with configurable word count and separators. Add a visual password strength meter and a one-click copy-to-clipboard button with timeout clearing for clipboard security.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Integrated TOTP Authenticator and Vault Polish

   Add support for time-based one-time password (TOTP) seed storage and real-time code generation within vault items.

   Extend the vault item schema to support storing TOTP secret keys (base32 encoded strings). Implement an authenticator code calculation utility in TypeScript using HMAC-SHA1 to compute 6-digit TOTP codes refreshing every 30 seconds. Display live countdown rings and codes directly inside login vault item cards with a quick-copy action.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Bitwarden