Proton Pass - Proton WebClients

Overview

Proton Pass is a password manager and credential vault providing secure storage for passwords, login credentials, credit cards, and notes. It’s available as a web application, browser extension, and desktop application.

Package name: proton-pass | License: GPL-3.0

Features

Password Vault

Secure storage for passwords and credentials

Autofill

Browser autofill for login forms

Password Generator

Generate strong, random passwords

Secure Notes

Encrypted note storage

2FA Support

Two-factor authentication code storage

Credit Cards

Secure credit card information storage

Item Sharing

Share credentials securely with others

Breach Monitoring

Monitor for compromised credentials

Architecture

Directory Structure

pass/src/app/
├── App.tsx              # Main application component
├── AppGuard.tsx         # Authentication guard
├── Auth/                # Authentication logic
├── Views/               # Main application views
│   ├── Vault/
│   ├── Items/
│   ├── Settings/
│   └── Sharing/
├── Store/               # State management
├── ServiceWorker/       # Service worker integration
├── DeepLinks/           # Deep link handling
└── config.ts            # App configuration

State Management

Proton Pass uses the shared @proton/pass workspace package which includes:

Redux-based state management
Encrypted local storage
Sync with backend
Multi-device coordination

Key Dependencies

{
  "dependencies": {
    "@proton/atoms": "workspace:^",
    "@proton/components": "workspace:^",
    "@proton/icons": "workspace:^",
    "@proton/pass": "workspace:^",
    "@proton/polyfill": "workspace:^",
    "@proton/shared": "workspace:^",
    "@proton/styles": "workspace:^",
    "@proton/utils": "workspace:^"
  }
}

Pass is a thin client - most logic lives in the @proton/pass workspace package.

NPM Scripts

Development

# Start development server
yarn start

# Full command
proton-pack dev-server --appMode=standalone \
  --no-error-logs \
  --noLogicalScss

Uses --no-error-logs flag to reduce console noise during development.

Build

# Production build
yarn build:web

# Full command
proton-pack build --appMode=sso --noLogicalScss

Testing

# Run tests
yarn test

# Run tests with coverage
yarn test:ci

# Watch mode
yarn test:watch

Code Quality

# Type checking
yarn check-types

# Linting
yarn lint

# Format code
yarn pretty

Internationalization

# Extract translation strings
yarn i18n:extract:web

# Get latest translations
yarn i18n:getlatest

# Upload to Crowdin
yarn i18n:upgrade

# Validate translations
yarn i18n:validate

Application Structure

App Guard

Authentication and authorization:

// AppGuard.tsx
// Protects routes requiring authentication
// Handles session management
// Redirects to login when needed

Views

Main application views:

View	Purpose
`Vault/`	Password vault browsing
`Items/`	Individual item management
`Settings/`	Application settings
`Sharing/`	Credential sharing

Deep Links

Handle deep link navigation:

DeepLinks/
├── DeepLinkHandler.tsx
└── routes.ts

Open specific items
Navigate from notifications
Handle external links

Service Worker

Background sync and offline support:

ServiceWorker/
├── register.ts
├── events.ts
└── sync.ts

Browser Extension

proton-pass-extension - Browser extension version:

Chrome, Firefox, Edge, Safari support
Autofill functionality
Context menu integration
Shared codebase with web app

Desktop Application

proton-pass-desktop - Electron desktop app:

Native desktop integration
System tray icon
Keyboard shortcuts
Biometric authentication

Core Functionality

Password Management

Provided by @proton/pass workspace package:

Storage - Encrypted credential storage
Sync - Multi-device synchronization
Autofill - Form detection and filling
Generator - Password generation with customizable rules

Item Types

Supported item types:

Login - Username/password credentials
Credit Card - Payment information
Note - Secure text notes
Identity - Personal information (future)

Vaults

Organizational structure:

Multiple vaults per user
Vault sharing with teams
Granular permissions
Separate encryption keys

Security Features

Zero-knowledge architecture - Proton cannot access data
End-to-end encryption - All items encrypted client-side
Secure sharing - Asymmetric encryption for sharing
Session management - Automatic lock on inactivity
Breach monitoring - Check for compromised passwords

Build Configuration

Special build flags:

--appMode=sso          # SSO integration for production
--appMode=standalone   # Standalone auth for development
--noLogicalScss        # Disable logical CSS
--no-error-logs        # Reduce console noise (dev only)

Testing

Test setup:

Jest for unit tests
@proton/testing for test utilities
@proton/jest-env for custom test environment

yarn test              # Run all tests
yarn test:ci           # CI mode with coverage
yarn test:watch        # Watch mode for development

Integration Points

Proton Account

Integrates with Proton account system:

Single sign-on
Subscription management
Account recovery

Proton Mail

Email integration:

Save passwords from emails
Share credentials via email

Other Proton Apps

Shared authentication across:

Proton Mail
Proton Drive
Proton Calendar
Proton VPN

Development Notes

The web app is a thin wrapper around @proton/pass. Most development happens in the workspace package.

For extension or desktop development, see:

/applications/pass-extension/
/applications/pass-desktop/

Local Development

Start dev server: yarn start
Access at http://localhost:8080
Uses standalone authentication
Local vault storage

Package Architecture

Most logic is in packages/pass/:

packages/pass/
├── store/           # Redux store
├── lib/             # Core libraries
├── hooks/           # React hooks
├── components/      # UI components
└── crypto/          # Cryptographic operations

Performance

Lazy Loading - Views loaded on demand
Service Worker - Offline support and caching
Minimal Dependencies - Lean dependency tree
Code Splitting - Separate bundles per view

Security Considerations

Never log sensitive data. All credential operations should be audited.

All crypto operations client-side
Master password never sent to server
Encrypted search for vault items
Secure memory handling
Auto-lock on inactivity

Getting Started

Applications

Development

Contributing

​Overview

​Features

Password Vault

Autofill

Password Generator

Secure Notes

2FA Support

Credit Cards

Item Sharing

Breach Monitoring

​Architecture

​Directory Structure

​State Management

​Key Dependencies

​NPM Scripts

​Development

​Build

​Testing

​Code Quality

​Internationalization

​Application Structure

​App Guard

​Views

​Deep Links

​Service Worker

​Related Applications

​Browser Extension

​Desktop Application

​Core Functionality

​Password Management

​Item Types

​Vaults

​Security Features

​Build Configuration

​Testing

​Integration Points

​Proton Account

​Proton Mail

​Other Proton Apps

​Development Notes

​Local Development

​Package Architecture

​Performance

​Security Considerations

Build docs developers (and LLMs) love

Overview

Features

Architecture

Directory Structure

State Management

Key Dependencies

NPM Scripts

Development

Build

Testing

Code Quality

Internationalization

Application Structure

App Guard

Views

Deep Links

Service Worker

Related Applications

Browser Extension

Desktop Application

Core Functionality

Password Management

Item Types

Vaults

Security Features

Build Configuration

Testing

Integration Points

Proton Account

Proton Mail

Other Proton Apps

Development Notes

Local Development

Package Architecture

Performance

Security Considerations