DEV Community: Sampreeth

Building Aegis - A Zero Knowledge Password Manager with React and Supabase

Sampreeth — Fri, 01 May 2026 16:37:01 +0000

Overview

Most password managers feel like black boxes. You trust them with everything, but you rarely understand how your data is actually protected.

I wanted to build something different.

Aegis is a zero knowledge password manager designed with one core principle:

Sensitive data should never leave the user's device in a readable form.

Live: aegis.sampreeth.in

GitHub: sam-sampreeth/aegis-password-manager

Why I Built Aegis

I wasn’t just trying to build another CRUD app. I wanted to explore:

How real-world encryption works in web apps
How to design secure systems, not just functional ones
How to balance security and usability

Most tutorials stop at authentication.

Aegis goes further - it focuses on data protection after login.

Core Idea: Zero Knowledge Architecture

The most important design decision was this:

The server should never be able to read user data.

That led to a zero knowledge architecture.

What this means in practice:

No master passwords stored on the backend
No decrypted vault data ever leaves the browser
The server only stores encrypted blobs

This changes how the entire system is designed.

Detailed overview of the Aegis Zero Knowledge Architecture, highlighting the client-side encryption boundaries.

Encryption Strategy

Security isn’t a feature you “add later” - it defines the architecture from day one.

Technical breakdown of the end-to-end encryption and decryption pipelines within the application.

AES-256-GCM for Vault Encryption

All credentials are encrypted using AES-256-GCM before being sent to the backend.

Why this matters:

Provides both confidentiality and integrity
Prevents tampering with stored data

Key Derivation with PBKDF2

User passwords are not used directly.

Instead:

A master key is derived using PBKDF2
High iteration counts + unique salts
Resistant to brute-force attacks

This ensures even weak passwords get strengthened before use.

Client-Side Cryptography

All encryption and decryption happen using the Web Crypto API.

This ensures:

Secrets never leave the browser
Backend cannot decrypt user data
True end-to-end protection

Authentication vs Encryption (Important Distinction)

A common mistake is assuming login = security.

In Aegis:

Supabase Auth handles authentication
Custom encryption layer handles data security

Even if authentication is compromised:

The attacker still cannot read encrypted vault data without the master key.

Comparative analysis of the Authentication layer (Supabase) vs. the Data Encryption layer (Aegis Core).

Backend Design with Supabase

I used Supabase for:

Authentication
Database
Real-time sync

But with strict constraints.

What Supabase stores:

Encrypted vault entries
User metadata
Settings

What it does NOT store:

Master password
Decryption keys
Plain text credentials

Row Level Security (RLS)

Every table is protected using RLS policies.

This ensures:

Users can only access their own data
No cross-user data leaks

Combined with encryption, this gives defense in depth.

Feature Design (Beyond CRUD)

Instead of building basic storage, I focused on real usability.

Integrated TOTP Authenticator

Users can:

Store 2FA secrets
Generate time-based OTPs inside the app

This removes dependency on external authenticator apps.

Recovery System

Each account generates:

10 secure recovery codes

These allow:

Access recovery without exposing master credentials

Metadata Tracking

Each vault item tracks:

Creation timestamps
Password strength
Activity changes
Version history

This adds visibility into how credentials evolve.

UI Philosophy

Security tools are often ugly or confusing. I wanted the opposite.

Design goals:

Minimal and distraction-free
Fast interactions
Clear hierarchy

Stack used:

React + TypeScript + Vite
Tailwind CSS
ShadCN UI + Radix UI
Framer Motion for subtle interactions

The goal was:

Make security feel natural, not intimidating.

Real-Time Sync

Using Supabase subscriptions:

Vault updates sync instantly
Changes reflect across sessions
Still fully encrypted

This required careful handling to ensure:

No decrypted data is ever synced

Challenges I Faced

1. Designing Encryption Flow

The hardest part wasn’t writing code - it was designing the flow:

When to encrypt
When to decrypt
How to manage keys safely

A small mistake here breaks the entire system.

2. Balancing UX with Security

Strict security often leads to poor UX.

Examples:

Too many prompts → annoying
Too few → unsafe

Finding that balance took multiple iterations.

3. Understanding Web Crypto API

It’s powerful but not beginner-friendly.

Subtle APIs
Async-heavy
Easy to misuse

But once understood, it unlocks real-world security patterns.

What I Learned

Security is an architectural decision, not a feature
Frontend can be responsible for serious cryptography
Backend trust should always be minimized
Good UX is critical even in security-heavy apps

Final Thoughts

Aegis pushed me beyond typical full-stack development.

It made me think about:

Trust boundaries
Data ownership
Real-world attack scenarios

And most importantly:

Building secure systems requires intentional design, not just good code.

Internship Experience and Technical Contributions at Nife Labs

Sampreeth — Tue, 06 Jan 2026 13:48:54 +0000

Internship Experience: Engineering Developer-Focused Workflows in the Nife Sandbox

During my internship at Nife Labs, I worked on the Nife Sandbox, a web-based development environment that combines Monaco-based code editing, AI-assisted development workflows, GitHub repository integration, and a modular multi-panel workspace. My contributions focused on improving platform stability, standardizing interaction behavior across panels, and extending core workflows in the editor, AI Assistant, and Git integration layers.

Platform Architecture and Technology Stack

The sandbox frontend is built using React + Vite, with Monaco Editor as the editing engine and shadcn-based UI components for consistent visual and interaction patterns. State is handled through React context and modular component state isolation, while GitHub OAuth APIs power authentication and repository import workflows. API keys used by the AI Assistant are stored client-side and encrypted using crypto-js, enabling secure reuse across sessions without exposing raw credentials.

Landing interface of the Nife Sandbox platform that the workspace, editor, and AI-assisted development features operate within.

My work aligned closely with this architecture, with emphasis on reliability, subsystem interoperability, and predictable developer workflows rather than isolated UI feature additions.

Nife Sandbox workspace with Monaco editor, preview pane, terminal, and AI Assistant integrated within a stabilized multi-panel layout.

Modernizing the Workspace and Multi-Panel Layout

One of the earliest engineering priorities was addressing layout instability across the multi-panel workspace. Prior to refactoring, panel re-renders could cause drift, inconsistent panel focus behavior, and theme desynchronization across light and dark modes.

I refactored the panel rendering flow and layout state logic, standardized theme propagation across all panels, and replaced ad-hoc UI fragments with shadcn primitives to enforce consistency and recoverability during re-renders. This resulted in a more deterministic and stable editing surface suited for longer developer sessions.

Stabilized multi-panel workspace with independent editor, preview, terminal, and AI panels rendered within a unified layout.

Improving Navigation, File Operations, and Workspace Management

I also worked on improving workspace navigation and file-handling workflows to make repository-based development more predictable. Enhancements included:

collapsible sidebar to maximize editor focus
breadcrumb navigation for clearer project context
safe file-operation utilities (rename, delete, create)
workspace switching between local and imported projects
seamless GitHub repository import into the workspace

These changes improved continuity between remote repositories and active editing environments, reducing friction in multi-project workflows.

Repository-centric workspace view with file-tree navigation, breadcrumb context, and safe file-operation actions.

Extending the Monaco-Based IDE Experience

Within the editor, my work focused on developer-centric enhancements rather than cosmetic features. I added:

theme support aligned with VS Code conventions
contextual AI workflows such as Explain Code with AI
richer status-bar indicators for connectivity, branch state, compile feedback, and file metrics

The contextual AI feature routes selections directly into the AI panel, enabling explanation and comprehension workflows embedded inside the editor, instead of treating AI as a separate chat utility.

Selection-aware AI workflow integrated into the Monaco editor context menu.

AI Assistant Panel and Secure Automation Workflows

A significant part of my work involved strengthening the AI Assistant panel to make it an actionable development utility. I implemented:

encrypted reusable API key storage
response-driven actions such as:
- insert at cursor
- replace selection
- replace entire file
- generate new file

This transformed the panel from a passive response interface into a workflow-integrated automation surface. I also contributed to the foundational work for an agentic AI panel, enabling future autonomous task workflows inside the environment.

Secure API key configuration workflow supporting encrypted reuse within AI-driven development flows.

GitHub OAuth and Integrated Git Workflows

I implemented GitHub OAuth authentication and repository retrieval flows using a dedicated OAuth application, enabling users to authenticate securely and import repositories directly into the workspace. I also contributed to the Git panel, which surfaces commit history, branch lists, and commit actions inside the IDE, shifting the platform toward a repository-centric development model.

GitHub OAuth authorization flow used for secure repository import and workspace integration.

Deployment, Configuration, and Environment Reliability

Beyond feature development, I worked on environment consistency and deployment behavior, including:

OAuth redirect alignment across environments
backend–frontend route coordination
OS-aware workspace path handling
CORS configuration stability

These refinements reduced authentication and workspace mapping edge cases, especially during environment transitions.

Outcome and Engineering Takeaways

This internship strengthened my experience in:

platform-oriented frontend engineering
state-management and layout-stability design
Git-integrated development tooling
secure AI-assisted workflow implementation

More importantly, it reinforced an engineering approach focused on reliability, subsystem interoperability, and developer-first workflow design, rather than feature delivery in isolation.

Going forward, I aim to continue working on systems that combine developer experience, AI-assisted tooling, and scalable workspace infrastructure.