Skip to main content

​
Overview

Proton VPN Settings is the web interface for managing ProtonVPN configuration, subscriptions, and preferences. It provides access to VPN settings, server management, and account configuration.
Package name: proton-vpn-settings | License: GPL-3.0
This is the settings/configuration interface only. The actual VPN client applications are separate native apps for desktop and mobile.

​
Features

Server Selection

Browse and select VPN servers by country

Protocol Settings

Configure VPN protocols and connection settings

Account Management

Manage VPN subscription and account details

Kill Switch

Configure kill switch and security settings

Split Tunneling

Manage split tunneling configuration

Connection Logs

View connection history and logs

​
Architecture

​
Directory Structure

vpn-settings/src/app/
├── App.tsx              # Main application component
├── containers/          # Container components
├── components/          # UI components
├── hooks/               # Custom React hooks
└── config.ts            # App configuration

​
State Management

Uses Redux with shared stores:
  • @proton/react-redux-store - Shared Redux store
  • @proton/redux-shared-store - Cross-app state
  • @proton/redux-shared-store-types - TypeScript types

​
Key Dependencies

{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^5.3.4",
    "@proton/account": "workspace:^",
    "@proton/components": "workspace:^",
    "@proton/hooks": "workspace:^",
    "@proton/vpn": "workspace:^",
    "@proton/react-redux-store": "workspace:^",
    "@proton/redux-shared-store": "workspace:^",
    "lodash": "^4.17.23",
    "ttag": "^1.8.12"
  }
}

​
Key Packages

  • @proton/vpn - VPN-specific logic and components
  • @proton/account - Account management integration
  • @proton/components - Shared UI components

​
NPM Scripts

​
Development

# Start development server
yarn start

# Full command
proton-pack dev-server
VPN settings app runs in default mode (no special flags).

​
Build

# Production build (standalone mode)
yarn build:web

# Full command
proton-pack build --appMode=standalone
Unlike other apps, VPN settings builds in standalone mode, not SSO mode.

​
Testing

# No tests implemented yet
yarn test        # Outputs: "No test yet"
yarn test:ci     # Outputs: "No test yet"

​
Code Quality

# Type checking
yarn check-types

# Linting
yarn lint

# Format code
yarn pretty

​
Internationalization

# Extract translation strings
yarn i18n:extract:web

# Upload to Crowdin
yarn i18n:upgrade

# Validate translations
yarn i18n:validate

​
VPN Workspace Package

Most VPN logic lives in @proton/vpn workspace package: 
packages/vpn/
├── components/      # VPN-specific components
├── hooks/           # VPN hooks
├── helpers/         # VPN utilities
└── constants/       # VPN constants

​
Application Features

​
Server Management

  • Browse servers by country
  • Server load indicators
  • Server capabilities (P2P, Tor, Streaming)
  • Favorite servers

​
Connection Settings

  • Protocol selection (OpenVPN, WireGuard, IKEv2)
  • Port configuration
  • DNS settings
  • IPv6 support

​
Security Settings

  • Kill switch configuration
  • DNS leak protection
  • Protocol fallback
  • Auto-connect settings

​
Account Integration

Integrates with Proton account:
  • Subscription management
  • Plan upgrades
  • Payment settings
  • Usage statistics

​
Integration Points

​
Proton Account

Uses @proton/account for:
  • User authentication
  • Subscription details
  • Payment processing
  • Account settings

​
Activation

Includes @proton/activation for:
  • Account activation flows
  • Onboarding
  • Migration tools

​
Calendar Integration

Surprisingly includes @proton/calendar:
  • Shared components
  • Date/time utilities
  • Event scheduling (for maintenance windows?)

​
Build Configuration

​
Standalone Mode

Unique among Proton apps, VPN settings builds in standalone mode: 
proton-pack build --appMode=standalone
This means:
  • Independent authentication
  • Self-contained application
  • No SSO integration required

​
Development Notes

VPN settings is a web-only application. Native VPN clients are separate codebases.

​
No Tests Yet

The application currently has no test suite: 
{
  "scripts": {
    "test": "echo No test yet",
    "test:ci": "echo No test yet"
  }
}

​
Local Development

  1. Start dev server: yarn start
  2. Access at http://localhost:8080
  3. Requires Proton account
  4. Settings sync with VPN clients
VPN ecosystem:
  • ProtonVPN Desktop - Native desktop client (separate repo)
  • ProtonVPN Mobile - iOS/Android apps (separate repos)
  • proton-account - Account management

​
VPN Clients

This web app manages settings for:
  • Windows Client - Native Windows VPN client
  • macOS Client - Native macOS VPN client
  • Linux Client - Native Linux VPN client
  • iOS App - iOS VPN app
  • Android App - Android VPN app
  • Browser Extension - Browser VPN extension

​
Server Infrastructure

Manages connection to:
  • 1700+ VPN servers
  • 60+ countries
  • Secure Core servers
  • Specialized servers (P2P, Streaming, Tor)

​
Protocols Supported

  • OpenVPN - Open-source VPN protocol
  • WireGuard - Modern, fast VPN protocol
  • IKEv2 - Internet Key Exchange version 2

​
Performance

  • Lightweight - Minimal dependencies
  • Fast Loading - Quick initial load
  • Responsive - React-based UI

​
Security

All VPN configuration is stored securely and synced encrypted.
  • Encrypted settings storage
  • Secure API communication
  • No logging of connection details
  • Zero-access architecture

​
Future Development

Test suite implementation needed. Consider adding:
  • Unit tests with Jest
  • Component tests with React Testing Library
  • E2E tests for critical flows

Build docs developers (and LLMs) love

Get started for freeTalk to us