Documentation

Project setup

How to install, configure, and run Opaque locally.

Prerequisites

  • Node.js 20 or newer — required by Next 16 and the React 19 toolchain.
  • A package manager — npm (used in the examples below), pnpm, or yarn.
  • A Clerk application — for authentication. You'll need the publishable key, secret key, and a webhook signing secret.
  • A Neon (Postgres) database — for storing users and the encrypted vault blobs.

Getting started

# 1. Install dependencies
npm install

# 2. Create your env file (see the table below)
cp .env.example .env.local

touch .env.sample

# 3. Run the dev server
npm run dev

For Different Packages :

Different packages are :

  • npm (Node Package Manager)
  • bun
  • yarn
# 1 For Node Package Manager
npm run dev

# 2 For Bun Package Manager
bun dev

# 3 For PNPM Package Manager 
pnpm dev

The app will be available at http://localhost:3000.

Available scripts

ScriptWhat it does
npm run devStarts the Next.js development server
npm run buildBuilds the production bundle
npm run startServes the production build
npm run lintRuns ESLint

Environment variables

Create a .env.local file in the project root. None of these are encryption keys for your vault — those are derived in the browser and never stored here.

VariableRequiredDescription
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYYesClerk publishable key, exposed to the browser
CLERK_SECRET_KEYYesClerk secret key, used by server-side auth()/currentUser()
CLERK_WEBHOOK_SECRETYesSigning secret used by svix to verify Clerk webhooks
DATABASE_URLYesNeon Postgres connection string used by the sql client

Database

The schema centers on a few tables that the route handlers expect to exist:

  • users — one row per Clerk user, holding profile fields plus the wrapped vault keys, KDF salt/params, vault_initialized flag, and item_count.
  • plans — defines each plan's item_limit. Every user row references a plan.
  • vault_items — the encrypted items (ciphertext, iv, type, favorite, folder_id).
  • vault_folders and vault_audit_log — folders and an audit trail, both removed via ON DELETE CASCADE when a user is deleted.

Tip: Seed the plans table before creating items. The item-insert query joins plans to read item_limit; if there is no matching plan row, the insert finds nothing and item creation fails. This is a common first-run gotcha.

In development, the Clerk webhook can't reach localhost, so a user row may not exist yet. The /api/vault/init route creates it on first vault setup using ON CONFLICT DO NOTHING, keeping the webhook as the source of truth in production.

What to put — and what not to

Put in version control: the source, the .env.example template (with empty or placeholder values), and the database migration/seed files.

Keep out of version control and out of this doc:

  • Real values for any variable in the table above — commit only .env.example, never .env.local.
  • Master passwords, recovery phrases, or any derived key material. These exist only in the browser at runtime and must never touch the server, logs, or the repo.
  • The deep crypto walkthrough and full endpoint reference — those belong on the Encryption and API pages, not in setup, so this guide stays short.

Dependencies

A complete list of what's installed and why. Scope distinguishes runtime packages from development-only tooling.

PackageVersionScopePurpose
next16.2.6runtimeThe framework (App Router, API route handlers)
react19.2.4runtimeUI library
react-dom19.2.4runtimeReact DOM renderer
@clerk/nextjs^7.4.0runtimeAuthentication, sessions, and user management
@neondatabase/serverless^1.1.0runtimePostgres driver behind the sql tagged template
@scure/bip39^2.2.0runtimeRecovery-phrase (BIP39 mnemonic) generation
svix^1.94.0runtimeVerifies signatures on incoming Clerk webhooks
fuse.js^7.3.0runtimeClient-side fuzzy search over decrypted items
framer-motion^12.39.0runtimeUI animations (modals, transitions)
lucide-react^1.16.0runtimePrimary icon set
react-icons^5.6.0runtimeAdditional icons (e.g. the loading spinner)
react-markdown^10.1.0runtimeRenders the Markdown documentation pages
remark-gfm^4.0.1runtimeGitHub-flavored Markdown (tables, task lists)
rehype-highlight^7.0.2runtimeSyntax highlighting for code blocks
gray-matter^4.0.3runtimeParses frontmatter from .md files
axios^1.16.1runtimeHTTP client
tailwindcss^4devUtility-first CSS framework
@tailwindcss/postcss^4devTailwind v4 PostCSS plugin
@tailwindcss/typography^0.5.19devProse styling for rendered docs
typescript^5devTypeScript compiler
@types/node^20devNode type definitions
@types/react^19devReact type definitions
@types/react-dom^19devReact DOM type definitions
babel-plugin-react-compiler1.0.0devReact Compiler plugin
eslint^9devLinter
eslint-config-next16.2.6devNext.js ESLint configuration

Where to go next

  • Architecture — how the routes, database, and webhook sync fit together.
  • Encryption — the key-wrapping and recovery-phrase flow.
  • Introduction — the high-level overview of the project.