# raed-j3mli/razelock---rock architecture

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

- Interactive diagram: https://gitdiagram.com/raed-j3mli/razelock---rock
- Repository: https://github.com/raed-j3mli/razelock---rock

## Overview

Rock 2FA is a browser-based authenticator: a signed-in user adds a service’s TOTP secret by scanning a setup QR code or entering it manually, then views generated codes in the vault. Account and security settings are stored locally; signed-in accounts can synchronize through Firebase. Settings also cover passcode and biometric locking. The excerpts show route-to-storage and route-to-auth ownership; implementation details for TOTP, biometrics, and QR display are inferred only from module names and documented policy text.

Main entry points: [`app/page.tsx`](https://github.com/raed-j3mli/razelock---rock/blob/main/app/page.tsx) (Vault page), [`lib/AuthContext.tsx`](https://github.com/raed-j3mli/razelock---rock/blob/main/lib/AuthContext.tsx) (Auth provider), [`app/add/page.tsx`](https://github.com/raed-j3mli/razelock---rock/blob/main/app/add/page.tsx) (Add account page), [`lib/storage.ts`](https://github.com/raed-j3mli/razelock---rock/blob/main/lib/storage.ts) (Browser storage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_vault["Vault page<br/>[page.tsx]"]
  node_addpage["Add account page<br/>[page.tsx]"]
  node_addcontent["QR and manual entry"]
  node_accountcard["Account cards<br/>[AccountCard.tsx]"]
  node_qrmodal["QR viewer"]
  node_settingspage["Settings page<br/>[page.tsx]"]
  node_settingscontent["Security settings UI"]
end

subgraph group_identity["Identity and sync"]
  node_auth["Auth provider<br/>[AuthContext.tsx]"]
  node_firebase["Firebase Auth and Firestore<br/>[firebase.ts]"]
end

subgraph group_security["Local security"]
  node_storage[("Browser storage<br/>[storage.ts]")]
  node_crypto["Passcode cryptography<br/>[crypto.ts]"]
  node_biometrics["Biometric and lock logic<br/>[biometrics.ts]"]
end

subgraph group_totp["Authenticator core"]
  node_totp["TOTP operations<br/>[totp.ts]"]
end

node_user(("User"))
node_firebase_service[("Firebase services")]
node_camera["Device camera"]

node_user -->|"opens vault"| node_vault
node_vault -->|"reads session"| node_auth
node_vault -->|"reads accounts"| node_storage
node_vault -->|"renders accounts"| node_accountcard
node_accountcard -->|"opens QR"| node_qrmodal
node_user -->|"adds account"| node_addpage
node_addpage -->|"reads session"| node_auth
node_addpage -->|"renders entry"| node_addcontent
node_addcontent -->|"requests video"| node_camera
node_addcontent -->|"parses or generates secret"| node_totp
node_addpage -->|"saves account"| node_storage
node_vault -->|"uses account codes"| node_totp
node_user -->|"opens settings"| node_settingspage
node_settingspage -->|"renders settings"| node_settingscontent
node_settingspage -->|"reads and saves settings"| node_storage
node_vault -->|"checks lock policy"| node_biometrics
node_storage -->|"uses security defaults"| node_biometrics
node_auth -->|"hashes and verifies passcodes"| node_crypto
node_auth -->|"reads and saves settings"| node_storage
node_auth -->|"authenticates and syncs"| node_firebase
node_firebase -->|"uses Auth and Firestore"| node_firebase_service
node_vault -->|"syncs account changes"| node_auth
node_addpage -->|"syncs added accounts"| node_auth

click node_vault "https://github.com/raed-j3mli/razelock---rock/blob/main/app/page.tsx"
click node_addpage "https://github.com/raed-j3mli/razelock---rock/blob/main/app/add/page.tsx"
click node_addcontent "https://github.com/raed-j3mli/razelock---rock/blob/main/components/AddAccountContent.tsx"
click node_accountcard "https://github.com/raed-j3mli/razelock---rock/blob/main/components/AccountCard.tsx"
click node_qrmodal "https://github.com/raed-j3mli/razelock---rock/blob/main/components/QRCodeViewerModal.tsx"
click node_settingspage "https://github.com/raed-j3mli/razelock---rock/blob/main/app/settings/page.tsx"
click node_settingscontent "https://github.com/raed-j3mli/razelock---rock/blob/main/components/SettingsContent.tsx"
click node_auth "https://github.com/raed-j3mli/razelock---rock/blob/main/lib/AuthContext.tsx"
click node_firebase "https://github.com/raed-j3mli/razelock---rock/blob/main/lib/firebase.ts"
click node_storage "https://github.com/raed-j3mli/razelock---rock/blob/main/lib/storage.ts"
click node_crypto "https://github.com/raed-j3mli/razelock---rock/blob/main/lib/crypto.ts"
click node_biometrics "https://github.com/raed-j3mli/razelock---rock/blob/main/lib/biometrics.ts"
click node_totp "https://github.com/raed-j3mli/razelock---rock/blob/main/lib/totp.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_vault,node_addpage,node_addcontent,node_accountcard,node_qrmodal,node_settingspage,node_settingscontent,node_user toneBlue
class node_auth,node_firebase,node_firebase_service toneAmber
class node_storage,node_crypto,node_biometrics toneMint
class node_totp toneRose
class node_camera toneIndigo
```

## Components

### App experience

- [Vault page](https://github.com/raed-j3mli/razelock---rock/blob/main/app/page.tsx): `app/page.tsx`
- [Add account page](https://github.com/raed-j3mli/razelock---rock/blob/main/app/add/page.tsx): `app/add/page.tsx`
- [QR and manual entry](https://github.com/raed-j3mli/razelock---rock/blob/main/components/AddAccountContent.tsx): `components/AddAccountContent.tsx`
- [Account cards](https://github.com/raed-j3mli/razelock---rock/blob/main/components/AccountCard.tsx): `components/AccountCard.tsx`
- [QR viewer](https://github.com/raed-j3mli/razelock---rock/blob/main/components/QRCodeViewerModal.tsx): `components/QRCodeViewerModal.tsx`
- [Settings page](https://github.com/raed-j3mli/razelock---rock/blob/main/app/settings/page.tsx): `app/settings/page.tsx`
- [Security settings UI](https://github.com/raed-j3mli/razelock---rock/blob/main/components/SettingsContent.tsx): `components/SettingsContent.tsx`

### Identity and sync

- [Auth provider](https://github.com/raed-j3mli/razelock---rock/blob/main/lib/AuthContext.tsx): `lib/AuthContext.tsx`
- [Firebase Auth and Firestore](https://github.com/raed-j3mli/razelock---rock/blob/main/lib/firebase.ts): `lib/firebase.ts`

### Local security

- [Browser storage](https://github.com/raed-j3mli/razelock---rock/blob/main/lib/storage.ts): `lib/storage.ts`
- [Passcode cryptography](https://github.com/raed-j3mli/razelock---rock/blob/main/lib/crypto.ts): `lib/crypto.ts`
- [Biometric and lock logic](https://github.com/raed-j3mli/razelock---rock/blob/main/lib/biometrics.ts): `lib/biometrics.ts`

### Authenticator core

- [TOTP operations](https://github.com/raed-j3mli/razelock---rock/blob/main/lib/totp.ts): `lib/totp.ts`

### Other components

- **User**
- **Firebase services**
- **Device camera**

## Connections

- User → Vault page: opens vault
- Vault page → Auth provider: reads session
- Vault page → Browser storage: reads accounts
- Vault page → Account cards: renders accounts
- Account cards → QR viewer: opens QR
- User → Add account page: adds account
- Add account page → Auth provider: reads session
- Add account page → QR and manual entry: renders entry
- QR and manual entry → Device camera: requests video
- QR and manual entry → TOTP operations: parses or generates secret
- Add account page → Browser storage: saves account
- Vault page → TOTP operations: uses account codes
- User → Settings page: opens settings
- Settings page → Security settings UI: renders settings
- Settings page → Browser storage: reads and saves settings
- Vault page → Biometric and lock logic: checks lock policy
- Browser storage → Biometric and lock logic: uses security defaults
- Auth provider → Passcode cryptography: hashes and verifies passcodes
- Auth provider → Browser storage: reads and saves settings
- Auth provider → Firebase Auth and Firestore: authenticates and syncs
- Firebase Auth and Firestore → Firebase services: uses Auth and Firestore
- Vault page → Auth provider: syncs account changes
- Add account page → Auth provider: syncs added accounts