Drop-in widget · React · Next.js · Vanilla HTML

An API Key Vault
for your web app

One snippet, one floating button. Let users sign up, store, search, edit, copy and delete their API keys — all from a secure, isolated widget that lives in the corner of any page.

Get started →
$ npm install mm-key-vault
Features

Everything your users need to manage their keys

Built around real workflows — not just a CRUD form. Auth, verification, recovery, search, copy, edit, delete, all wired and styled.

Secure auth flow

Sign up & login with strong password validation, email verification, resend with countdown timer, and full forgot/reset-password flow.

Search · sort · paginate

Debounced search, sort by platform/created/updated, asc or desc, with a clean "Load more" paginated list.

Add, edit, delete

Inline forms with field-level validation. Delete is guarded by a confirm dialog so nobody nukes a key by accident.

One-click copy

The full key is never shown in the list. Click Copy and it's on the clipboard, with a fallback for older browsers and a friendly "Copied" flash.

Show / hide secrets

Eye toggle on the API key input so users can verify what they pasted without exposing it on screen by default.

Shadow DOM isolation

All widget styles live inside a Shadow Root — your app's CSS can never bleed in or get overwritten. Drop it in with zero conflicts.

Security

Built for security, from day one

API keys are the keys to your kingdom. Here's exactly how the widget protects them — in transit, at rest, and in the UI.

TLS 1.3 · Verified emails only · Bearer-token auth · CORS allow-list

HTTPS everywhere

All requests run over TLS, served from a Let's Encrypt cert with HTTP → HTTPS auto-redirect. API keys never travel in plaintext.

Strong password rules

Enforced 8–16 chars with uppercase, lowercase, number and special character. Weak passwords are rejected before they reach the API.

Verified emails only

New accounts must confirm their email via a signed link before any keys can be added. Resend is rate-limited with a 60-second cooldown.

Smart session storage

Tokens default to sessionStorage and die with the tab. Persistent localStorage only kicks in when the user explicitly ticks "Keep me logged in".

Keys hidden by default

The dashboard never lists raw keys — only platform names. Each secret is fetched on-demand for a single Copy or Edit, and inputs stay masked until you click the eye.

One-time reset tokens

Forgot-password issues a single-use token bound to the email request. Reused or expired links are rejected — no stale recovery surface.

Install

Three lines, three frameworks

Pick your stack. The API is identical everywhere.

import { useEffect } from "react";
import { initKeyVault } from "mm-key-vault";

export function KeyVaultBoot() {
    useEffect(() => { initKeyVault(); }, []);
    return null;
}
"use client";
import { useEffect } from "react";
import { initKeyVault } from "mm-key-vault";

export function KeyVaultProvider() {
    useEffect(() => { initKeyVault(); }, []);
    return null;
}

// then drop <KeyVaultProvider /> inside app/layout.tsx
<script type="module">
    import { initKeyVault } from
        "https://kv.masterymade.com/dist/mm-key-vault.esm.js";
    initKeyVault();
</script>
Configuration

Place it anywhere

All options are optional — sensible defaults are applied automatically.

initKeyVault({
    position: "bottom-right",
    offsetX:  "24px",
    offsetY:  "24px",
    zIndex:   9999,
});
Option
Values
Default
position
bottom-right · bottom-left · top-right · top-left · center
bottom-right
offsetX
any CSS length
20px
offsetY
any CSS length
20px
zIndex
number
9999
Under the hood

The endpoints it talks to

The widget ships with a hardcoded backend. Same routes power auth and key management.

POST/auth/signup — email · password · callback
POST/auth/login — returns access_token
POST/auth/resend-verification — resend verify link
POST/auth/forgot-password — send reset email
POST/auth/reset-password — consume reset token
GET/auth/list_platforms — search · page · sort · order
POST/auth/add_key — platform · api_key
GET/auth/get_key/:id — fetch full key (for copy/edit)
PUT/auth/update_key/:id — platform · api_key
DELETE/auth/delete_key/:id
Try the widget
↓