# yuefeiduzi/openotp architecture

> Architecture diagram of the GitHub repository yuefeiduzi/openotp, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/yuefeiduzi/openotp
- Repository: https://github.com/yuefeiduzi/openotp

## Overview

openOTP is a local-first desktop TOTP authenticator. The user sets or enters a PIN, manages accounts, and views time-based codes in the main window or tray popover; Settings covers preferences, locking, and backup/import. The graph separates account/code handling, access and preferences, backup formats, and the Tauri desktop/storage layer. README capabilities are included where source excerpts are incomplete; uncertain implementation-level wiring is omitted. Account data and settings are local JSON files, not a database.

Main entry points: [`src-tauri/src/lib.rs`](https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/lib.rs) (Tauri commands), [`src/views/Settings.vue`](https://github.com/yuefeiduzi/openotp/blob/main/src/views/Settings.vue) (Settings screen), [`src/stores/accounts.ts`](https://github.com/yuefeiduzi/openotp/blob/main/src/stores/accounts.ts) (Account state), [`src/router/index.ts`](https://github.com/yuefeiduzi/openotp/blob/main/src/router/index.ts) (Route and lock gate)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_bootstrap["App bootstrap<br/>[main.ts]"]
  node_router["Route and lock gate<br/>[index.ts]"]
  node_home["Home screen<br/>[Home.vue]"]
  node_popover["Tray popover<br/>[PopoverView.vue]"]
  node_tray["Tray menu<br/>[TrayMenu.vue]"]
end

subgraph group_accounts["Accounts and codes"]
  node_accountlist["Account list"]
  node_editor["Account editor"]
  node_addaccount["Add account<br/>[AddAccount.vue]"]
  node_otp["TOTP generation<br/>[otp.ts]"]
  node_accountstore["Account state<br/>[accounts.ts]"]
  node_clipboard["Clipboard helper<br/>[clipboard.ts]"]
end

subgraph group_access["Access and preferences"]
  node_setup["PIN setup<br/>[Setup.vue]"]
  node_unlock["PIN unlock<br/>[Unlock.vue]"]
  node_settingsview["Settings screen<br/>[Settings.vue]"]
  node_settingsstore["Settings state<br/>[settings.ts]"]
end

subgraph group_data["Backup and storage"]
  node_andotp["andOTP import<br/>[andotp.ts]"]
  node_backupui["Backup handling<br/>[backup.ts]"]
end

subgraph group_desktop["Desktop services"]
  node_backend["Tauri commands<br/>[lib.rs]"]
  node_storage[("Local JSON files<br/>[storage.rs]")]
  node_crypt["PIN hashing<br/>[crypto.rs]"]
  node_biometric["Biometric access<br/>[biometric.rs]"]
  node_rustbackup["Zip backup engine<br/>[backup.rs]"]
end

node_user(("User"))

node_user -->|"sets PIN"| node_setup
node_user -->|"enters PIN"| node_unlock
node_user -->|"manages accounts"| node_home
node_user -->|"changes preferences"| node_settingsview
node_bootstrap -->|"mounts routes"| node_router
node_bootstrap -->|"loads setup and settings"| node_settingsstore
node_bootstrap -->|"loads accounts"| node_accountstore
node_router -->|"checks access"| node_settingsstore
node_router -->|"routes setup"| node_setup
node_router -->|"routes locked users"| node_unlock
node_home -->|"renders"| node_accountlist
node_popover -->|"renders"| node_accountlist
node_accountlist -->|"emits account actions"| node_editor
node_editor -->|"opens add flow"| node_addaccount
node_editor -->|"mutates accounts"| node_accountstore
node_accountstore -->|"generates codes"| node_otp
node_accountstore -->|"loads and saves accounts"| node_backend
node_settingsview -->|"updates preferences"| node_settingsstore
node_settingsview -->|"exports and imports"| node_backupui
node_settingsview -->|"parses backup"| node_andotp
node_settingsview -->|"imports accounts"| node_accountstore
node_settingsview -->|"invokes PIN commands"| node_backend
node_unlock -->|"checks lock state"| node_settingsstore
node_setup -->|"sets PIN hash"| node_backend
node_backend -->|"reads and writes JSON"| node_storage
node_backend -->|"hashes PIN"| node_crypt
node_backend -.->|"checks biometrics"| node_biometric
node_backend -.->|"handles backup commands"| node_rustbackup
node_accountlist -->|"copies codes"| node_clipboard
node_tray -->|"opens panel"| node_popover

click node_bootstrap "https://github.com/yuefeiduzi/openotp/blob/main/src/main.ts"
click node_router "https://github.com/yuefeiduzi/openotp/blob/main/src/router/index.ts"
click node_home "https://github.com/yuefeiduzi/openotp/blob/main/src/views/Home.vue"
click node_popover "https://github.com/yuefeiduzi/openotp/blob/main/src/views/PopoverView.vue"
click node_tray "https://github.com/yuefeiduzi/openotp/blob/main/src/views/TrayMenu.vue"
click node_setup "https://github.com/yuefeiduzi/openotp/blob/main/src/views/Setup.vue"
click node_unlock "https://github.com/yuefeiduzi/openotp/blob/main/src/views/Unlock.vue"
click node_settingsview "https://github.com/yuefeiduzi/openotp/blob/main/src/views/Settings.vue"
click node_accountlist "https://github.com/yuefeiduzi/openotp/blob/main/src/components/AccountCodeList.vue"
click node_editor "https://github.com/yuefeiduzi/openotp/blob/main/src/composables/useAccountEditor.ts"
click node_addaccount "https://github.com/yuefeiduzi/openotp/blob/main/src/components/AddAccount.vue"
click node_otp "https://github.com/yuefeiduzi/openotp/blob/main/src/utils/otp.ts"
click node_accountstore "https://github.com/yuefeiduzi/openotp/blob/main/src/stores/accounts.ts"
click node_settingsstore "https://github.com/yuefeiduzi/openotp/blob/main/src/stores/settings.ts"
click node_andotp "https://github.com/yuefeiduzi/openotp/blob/main/src/utils/andotp.ts"
click node_backupui "https://github.com/yuefeiduzi/openotp/blob/main/src/utils/backup.ts"
click node_backend "https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/lib.rs"
click node_storage "https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/storage.rs"
click node_crypt "https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/crypto.rs"
click node_biometric "https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/biometric.rs"
click node_rustbackup "https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/backup.rs"
click node_clipboard "https://github.com/yuefeiduzi/openotp/blob/main/src/utils/clipboard.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_bootstrap,node_router,node_home,node_popover,node_tray,node_user toneBlue
class node_accountlist,node_editor,node_addaccount,node_otp,node_accountstore,node_clipboard toneAmber
class node_setup,node_unlock,node_settingsview,node_settingsstore toneMint
class node_andotp,node_backupui toneRose
class node_backend,node_storage,node_crypt,node_biometric,node_rustbackup toneIndigo
```

## Components

### App experience

- [App bootstrap](https://github.com/yuefeiduzi/openotp/blob/main/src/main.ts): `src/main.ts`
- [Route and lock gate](https://github.com/yuefeiduzi/openotp/blob/main/src/router/index.ts): `src/router/index.ts`
- [Home screen](https://github.com/yuefeiduzi/openotp/blob/main/src/views/Home.vue): `src/views/Home.vue`
- [Tray popover](https://github.com/yuefeiduzi/openotp/blob/main/src/views/PopoverView.vue): `src/views/PopoverView.vue`
- [Tray menu](https://github.com/yuefeiduzi/openotp/blob/main/src/views/TrayMenu.vue): `src/views/TrayMenu.vue`

### Accounts and codes

- [Account list](https://github.com/yuefeiduzi/openotp/blob/main/src/components/AccountCodeList.vue): `src/components/AccountCodeList.vue`
- [Account editor](https://github.com/yuefeiduzi/openotp/blob/main/src/composables/useAccountEditor.ts): `src/composables/useAccountEditor.ts`
- [Add account](https://github.com/yuefeiduzi/openotp/blob/main/src/components/AddAccount.vue): `src/components/AddAccount.vue`
- [TOTP generation](https://github.com/yuefeiduzi/openotp/blob/main/src/utils/otp.ts): `src/utils/otp.ts`
- [Account state](https://github.com/yuefeiduzi/openotp/blob/main/src/stores/accounts.ts): `src/stores/accounts.ts`
- [Clipboard helper](https://github.com/yuefeiduzi/openotp/blob/main/src/utils/clipboard.ts): `src/utils/clipboard.ts`

### Access and preferences

- [PIN setup](https://github.com/yuefeiduzi/openotp/blob/main/src/views/Setup.vue): `src/views/Setup.vue`
- [PIN unlock](https://github.com/yuefeiduzi/openotp/blob/main/src/views/Unlock.vue): `src/views/Unlock.vue`
- [Settings screen](https://github.com/yuefeiduzi/openotp/blob/main/src/views/Settings.vue): `src/views/Settings.vue`
- [Settings state](https://github.com/yuefeiduzi/openotp/blob/main/src/stores/settings.ts): `src/stores/settings.ts`

### Backup and storage

- [andOTP import](https://github.com/yuefeiduzi/openotp/blob/main/src/utils/andotp.ts): `src/utils/andotp.ts`
- [Backup handling](https://github.com/yuefeiduzi/openotp/blob/main/src/utils/backup.ts): `src/utils/backup.ts`

### Desktop services

- [Tauri commands](https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/lib.rs): `src-tauri/src/lib.rs`
- [Local JSON files](https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/storage.rs): `src-tauri/src/storage.rs`
- [PIN hashing](https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/crypto.rs): `src-tauri/src/crypto.rs`
- [Biometric access](https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/biometric.rs): `src-tauri/src/biometric.rs`
- [Zip backup engine](https://github.com/yuefeiduzi/openotp/blob/main/src-tauri/src/backup.rs): `src-tauri/src/backup.rs`

### Other components

- **User**

## Connections

- User → PIN setup: sets PIN
- User → PIN unlock: enters PIN
- User → Home screen: manages accounts
- User → Settings screen: changes preferences
- App bootstrap → Route and lock gate: mounts routes
- App bootstrap → Settings state: loads setup and settings
- App bootstrap → Account state: loads accounts
- Route and lock gate → Settings state: checks access
- Route and lock gate → PIN setup: routes setup
- Route and lock gate → PIN unlock: routes locked users
- Home screen → Account list: renders
- Tray popover → Account list: renders
- Account list → Account editor: emits account actions
- Account editor → Add account: opens add flow
- Account editor → Account state: mutates accounts
- Account state → TOTP generation: generates codes
- Account state → Tauri commands: loads and saves accounts
- Settings screen → Settings state: updates preferences
- Settings screen → Backup handling: exports and imports
- Settings screen → andOTP import: parses backup
- Settings screen → Account state: imports accounts
- Settings screen → Tauri commands: invokes PIN commands
- PIN unlock → Settings state: checks lock state
- PIN setup → Tauri commands: sets PIN hash
- Tauri commands → Local JSON files: reads and writes JSON
- Tauri commands → PIN hashing: hashes PIN
- Tauri commands → Biometric access: checks biometrics
- Tauri commands → Zip backup engine: handles backup commands
- Account list → Clipboard helper: copies codes
- Tray menu → Tray popover: opens panel