DevSwitch 🔑

A powerful desktop application for managing multiple Git profiles and SSH keys

📋 Table of Contents

Overview
Features
Screenshots
Installation
Usage
Architecture
Tech Stack
Development
Building
Contributing
License

🎯 Overview

DevSwitch is a cross-platform desktop application built with Electron and React that simplifies the management of multiple Git profiles and SSH keys. Whether you're a developer juggling personal and work accounts, or managing multiple client projects, DevSwitch streamlines SSH key generation, configuration, and profile switching.

Why DevSwitch?

🔐 Secure SSH Key Management - Generate, import, and manage SSH keys with passphrase encryption
🎭 Multiple Profiles - Switch between different Git accounts effortlessly
⚙️ Auto-Configuration - Automatically updates SSH config files with proper host aliases
🔄 Smart Sync - Scan and sync existing SSH keys into profiles automatically
🎨 Beautiful UI - Modern, responsive interface with dark/light theme support
🖥️ Cross-Platform - Works on Windows, macOS, and Linux

✨ Features

🔑 SSH Key Management

Generate New SSH Keys

Multiple Algorithms: Support for ED25519 and RSA key generation
Passphrase Protection: Optional passphrase encryption for enhanced security
Custom Naming: Name your keys for easy identification
Automatic Registration: Keys are automatically added to ssh-agent
Public Key Export: Easy access to public keys for platform registration

Import Existing Keys

File Browser: User-friendly file picker to select existing SSH keys
Default Key Detection: Automatically detects common SSH key locations (~/.ssh/id_ed25519, id_rsa)
Validation: Ensures selected keys are valid SSH private keys
Preserve Configuration: Maintains existing SSH config entries

Auto-Sync Feature

Scan SSH Directory: Automatically scans ~/.ssh for all SSH keys
Parse SSH Config: Reads existing SSH config file to find configured keys
Email Extraction: Extracts email addresses from public key comments
One-Click Sync: Creates profiles for all unmanaged SSH keys automatically
Conflict Prevention: Skips keys that are already managed to avoid duplicates

👤 Profile Management

Create Profiles

Profile Information: Name, username, and email for each Git account
SSH Key Options:
- Use default SSH key (id_ed25519 or id_rsa)
- Generate a new SSH key
- Import an existing SSH key
Visual Feedback: Real-time validation and error handling
Quick Actions: Create from default Git configuration

Edit & Update Profiles

Modify Details: Update profile name, username, and email
Change SSH Keys: Switch between different SSH keys
Regenerate Keys: Generate new keys for existing profiles
View SSH Config: See the generated SSH host configuration
Copy Public Keys: One-click copy to clipboard for platform registration

Delete Profiles

Safe Deletion: Confirmation dialog prevents accidental deletions
SSH Config Cleanup: Automatically removes SSH config entries
Key Preservation: Option to keep or delete generated SSH key files
Profile Isolation: Deletion doesn't affect other profiles

⚙️ SSH Configuration

Automatic SSH Config Management

Host Alias Generation: Creates unique host aliases (e.g., github.com-username)
IdentityFile Mapping: Links SSH keys to specific Git platform hosts
Config File Updates: Safely modifies ~/.ssh/config without breaking existing entries
Backup & Recovery: Preserves existing configuration
Format Preservation: Maintains proper SSH config formatting

🔄 Git Integration

Global Git Config Detection

Auto-Detection: Reads global Git username and email configuration
Quick Profile Creation: Pre-fills profile forms with Git config data
Default Profile Card: Suggests creating a profile from current Git setup
Sync Validation: Shows Git config before syncing for verification

🔗 GitHub OAuth Integration

Connect GitHub Accounts

OAuth Flow: Secure GitHub OAuth 2.0 authentication
Account Linking: Connect GitHub accounts to profiles
Auto SSH Upload: Automatically upload SSH public keys to GitHub
Key Verification: Check if SSH key is already registered on GitHub
One-Click Setup: No manual key copying required
Multiple Accounts: Each profile can be linked to a different GitHub account

SSH Key Auto-Upload

Automatic Registration: Upload SSH keys directly to GitHub account
Duplicate Detection: Checks if key already exists before uploading
Custom Titles: Keys uploaded with descriptive titles (e.g., "DevSwitch - Profile Name")
Status Tracking: Visual indicators show connection and upload status
Error Handling: Clear error messages for troubleshooting
Secure Tokens: Access tokens encrypted and stored securely

🎨 User Interface

Modern Design

Custom Title Bar: Frameless window with custom minimize, maximize, and close controls
Dark/Light Theme: System-aware theme with manual toggle
Responsive Layout: Adapts to different window sizes and screen resolutions
Card-Based UI: Clean, organized profile cards with quick actions
Animations: Smooth transitions and hover effects using Motion One
Component Library: Built with Radix UI primitives for accessibility

Quick Actions

Sync All Keys: One-click button to scan and sync all SSH keys
Create from Default: Quick profile creation from Git config
Theme Toggle: Easy switching between light and dark modes
Window Controls: Custom minimize, maximize, and close buttons

🔒 Security Features

Passphrase Encryption

Secure Storage: Passphrases are encrypted using Node.js crypto module
Electron-Store: Encrypted data stored securely using electron-store
No Plain Text: Passphrases never stored in plain text
Memory Safety: Sensitive data cleared from memory after use

SSH Agent Integration

Automatic Registration: Generated keys automatically added to ssh-agent
Passphrase Handling: Supports passphrase-protected keys
Platform Support: Works with ssh-agent on macOS/Linux and Pageant on Windows
Session Persistence: Keys remain loaded for the session duration

📊 Profile Overview

Profile Cards

Visual Indicators: Color-coded borders for different key types
Quick Info: Username, email, and key type at a glance
Action Buttons: Edit, view, and delete directly from cards
SSH Config Status: Shows whether SSH config is properly configured
Key Algorithm Badge: Displays the SSH key algorithm (ED25519/RSA)

📸 Screenshots

Home Page

Create Profile Page

Edit Profile Page

View Profile Page

🚀 Installation

Prerequisites

Node.js v18 or higher
npm or yarn package manager
Git installed and configured
OpenSSH client (usually pre-installed on macOS/Linux)

Quick Start

Clone the repository

git clone https://github.com/umesh-saini/devswitch.git
cd devswitch

Install dependencies
```
npm install
```

Run in development mode

# Terminal 1: Start Vite dev server
npm run dev

# Terminal 2: Start Electron
npm run electron:dev

Build for production
```
npm run build
npm run electron:build
```

📖 Usage

Creating Your First Profile

Launch DevSwitch
Click the "Create Profile" button
Fill in your profile details:
- Profile Name (e.g., "Work Account")
- GitHub Username
- Email address
Choose an SSH key option:
- Default: Use existing id_ed25519 or id_rsa
- Generate: Create a new SSH key (recommended)
- Existing: Select a key from your system
If generating a new key:
- Select algorithm (ED25519 recommended)
- Provide a unique key name
- Optionally add a passphrase
Click "Create Profile"

Setting Up GitHub OAuth (Optional but Recommended)

GitHub OAuth allows automatic SSH key upload to your GitHub account.

Create a GitHub OAuth App
- Go to GitHub Settings → Developer settings → OAuth Apps
- Click "New OAuth App"
- Fill in the application details:
  - Application name: DevSwitch (or your preferred name)
  - Homepage URL: http://localhost:5173
  - Authorization callback URL: http://localhost:<PORT>/oauth/callback
- Click "Register application"

Configure Environment Variables

Copy .env.example to .env:
```
cp .env.example .env
```

Open .env and add your OAuth credentials:

GITHUB_CLIENT_ID=your_client_id_here
GITHUB_CLIENT_SECRET=your_client_secret_here

Restart the Application
```
npm run dev
npm run electron:dev
```
Connect Your Profile
- Open a profile view page
- Click "Connect GitHub" in the GitHub Integration section
- Your default browser will open with GitHub's authorization page
- Sign in to GitHub (if not already) and authorize DevSwitch
- You'll see a success message - you can close the browser tab
- Return to DevSwitch and click "Upload Key" to automatically add your SSH key to GitHub
Note: The OAuth flow uses your system's default browser (Chrome, Firefox, Safari, etc.) for better security and familiarity.

Adding Your SSH Key to GitHub (Manual Method)

Open your profile or view the profile details
Click "Copy Public Key"
Go to GitHub → Settings → SSH and GPG keys
Click "New SSH key"
Paste the public key and save

Using the SSH Configuration

The generated SSH host alias will be in the format:

github.com-username

To clone a repository using your specific profile:

git clone git@github.com-username:repository/name.git

To set the remote URL for an existing repository:

git remote set-url origin git@github.com-username:repository/name.git

Syncing Existing SSH Keys

Click the "Sync All Keys" button on the home page
Review your Git configuration in the warning dialog
Click "Continue Sync"
DevSwitch will:
- Scan your ~/.ssh directory
- Read your SSH config file
- Create profiles for unmanaged keys
- Extract emails from public keys
- Update SSH config if needed

Switching Between Profiles

Each profile has its own SSH host alias. Simply use the appropriate host when cloning or setting remotes:

Work account: git@github.com-work:repo.git
Personal account: git@github.com-personal:repo.git
Client account: git@github.com-client:repo.git

🏗️ Architecture

Project Structure

devswitch/
├── electron/                    # Electron main process
│   ├── main.ts                 # Application entry point
│   ├── preload.ts              # Preload script for IPC
│   ├── services/               # Backend services
│   │   ├── sshAgentService.ts  # SSH agent integration
│   │   ├── sshConfigService.ts # SSH config file management
│   │   ├── sshKeyService.ts    # SSH key operations
│   │   └── storageService.ts   # Data persistence
│   ├── type/                   # TypeScript types
│   │   └── profile.ts          # Profile & API types
│   └── utils/
│       └── encryption.ts       # Passphrase encryption
├── src/                        # React frontend
│   ├── components/             # React components
│   │   ├── animate-ui/         # Animated UI components
│   │   ├── layout/             # Layout components
│   │   │   ├── AppShell.tsx    # Main layout wrapper
│   │   │   └── TitleBar.tsx    # Custom title bar
│   │   ├── profiles/           # Profile-related components
│   │   └── ui/                 # Base UI components
│   ├── hooks/                  # Custom React hooks
│   ├── lib/                    # Utility functions
│   ├── pages/                  # Page components
│   │   ├── HomePage.tsx        # Main dashboard
│   │   ├── CreateProfilePage.tsx
│   │   ├── EditProfilePage.tsx
│   │   └── ProfileViewPage.tsx
│   ├── services/               # Frontend services
│   │   └── electronService.ts  # IPC communication wrapper
│   ├── stores/                 # State management
│   │   └── profileStore.ts     # Zustand store for profiles
│   ├── types/                  # Frontend types
│   └── App.tsx                 # Root component
├── public/                     # Static assets
├── package.json                # Dependencies and scripts
├── vite.config.ts              # Vite configuration
├── tsconfig.json               # TypeScript configuration
└── README.md                   # This file

Technology Stack

Frontend:

⚛️ React 19.2.0 - UI framework
📘 TypeScript 5.9.3 - Type safety
🎨 Tailwind CSS 4.1.18 - Utility-first CSS
🧩 Radix UI - Accessible component primitives
🎭 next-themes - Theme management
🚀 Motion One - Animation library
🗺️ React Router - Client-side routing
🐻 Zustand - State management

Backend:

🖥️ Electron 40.2.1 - Desktop app framework
📦 electron-store - Encrypted data persistence
🔐 Node.js crypto - Passphrase encryption
🔑 OpenSSH - SSH key generation and management

Development:

⚡ Vite 7.2.4 - Build tool and dev server
🔧 ESLint - Code linting
📝 Prettier - Code formatting (via ESLint)

💻 Development

Available Scripts

# Start Vite development server
npm run dev

# Start Electron in development mode
npm run electron:dev

# Build for production
npm run build

# Build Electron app
npm run electron:build

# Run linter
npm run lint

# Preview production build
npm run preview

Development Workflow

Start the dev server in one terminal:
```
npm run dev
```
Start Electron in another terminal:
```
npm run electron:dev
```
The app will hot-reload on changes to React components
Electron process requires restart for backend changes

Project Configuration

Vite Configuration (vite.config.ts):

React plugin for JSX support
SVGR plugin for SVG-as-component imports
Tailwind CSS v4 via @tailwindcss/vite
Path aliases for cleaner imports

TypeScript Configuration:

Strict mode enabled
ES2022 target
Module resolution: bundler
Path mappings for @/ imports

Tailwind Configuration:

v4 using CSS imports
Custom theme via @layer directives
Dark mode using class strategy
Extended with tailwind-animate plugin

🔧 Building

Build for Your Platform

# Build the React app
npm run build

# Build Electron executable
npm run electron:build

The built application will be in the dist/ directory.

Platform-Specific Builds

Edit package.json to configure electron-builder:

{
  "build": {
    "appId": "com.devswitch.app",
    "productName": "DevSwitch",
    "mac": {
      "category": "public.app-category.developer-tools"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on how to get started.

📝 Feature Roadmap

🐛 Known Issues

Windows: SSH agent integration may require additional setup
macOS: First launch may require security approval
Linux: Some distributions require manual ssh-agent configuration

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Radix UI - For accessible component primitives
Tailwind CSS - For the utility-first CSS framework
Electron - For making cross-platform desktop apps possible
Lucide Icons - For the beautiful icon set
shadcn/ui - For UI component inspiration

📧 Support

For bugs, feature requests, or questions:

Open an Issue
Start a Discussion

Made with ❤️ by developers, for developers

⭐ Star this repo if you find it useful!

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
.github		.github
build		build
electron		electron
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
TODO.md		TODO.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.app.tsbuildinfo		tsconfig.app.tsbuildinfo
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsconfig.node.tsbuildinfo		tsconfig.node.tsbuildinfo
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation