mm-key-vault

v1.2.0

Published

4 days ago

A floating Key Vault widget for managing API keys in React and Next.js applications

0High
0Medium
0Low

masterymade23

keyvault api-keys widget react nextjs floating-widget

🔐 KeyVault Widget

A floating API Key Vault widget that you can drop into Next.js, React, or any website.

Login / Signup
Dashboard listing (search + sort + load more)
Add key (platform + api_key)
Edit key (fetch details, then update)
Copy key (fetch details, then copy to clipboard)

Backend is currently hardcoded to https://kvbackend.masterymade.com.

Installation

npm install mm-key-vault

This package uses React as a peer dependency:

npm install react react-dom

Quick start

Call initKeyVault() once. Config is optional; defaults are applied automatically.

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

initKeyVault(); // defaults to bottom-right

Usage by framework

⚛️ React (Vite / CRA)

Call once (best inside useEffect so it runs only in the browser):

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

export function KeyVaultBoot() {
  useEffect(() => {
    initKeyVault();
  }, []);

  return null;
}

Render <KeyVaultBoot /> anywhere (usually near your app root).

🔼 Next.js (App Router, v13+)

Create a client component:

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

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

Include it in app/layout.tsx:

import { KeyVaultProvider } from "@/components/KeyVaultProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <KeyVaultProvider />
      </body>
    </html>
  );
}

📄 Next.js (Pages Router)

import { useEffect } from "react";
import type { AppProps } from "next/app";
import { initKeyVault } from "mm-key-vault";

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    initKeyVault();
  }, []);

  return <Component {...pageProps} />;
}

🌐 Vanilla HTML (no framework)

For local testing (like test.html), you can load the ESM bundle and provide React via an import map:

<script type="importmap">
{
  "imports": {
    "react":            "https://esm.sh/react@18",
    "react-dom":        "https://esm.sh/react-dom@18",
    "react-dom/client": "https://esm.sh/react-dom@18/client",
    "react/jsx-runtime":"https://esm.sh/react@18/jsx-runtime"
  }
}
</script>

<script type="module">
  import { initKeyVault } from "./dist/mm-key-vault.esm.js";
  initKeyVault();
<\/script>

Configuration

All options are optional.

initKeyVault({
  position: "bottom-right",
  offsetX: "24px",
  offsetY: "24px",
  zIndex: 9999,
});

| Option | Type | Default | |---|---|---| | position | "bottom-right" \| "bottom-left" \| "top-right" \| "top-left" \| "center" | "bottom-right" | | offsetX | string | "20px" | | offsetY | string | "20px" | | zIndex | number | 9999 |

Auth + token storage

On successful login, the widget saves the returned token (data.access_token) in browser storage.
Remember me:
- unchecked → sessionStorage
- checked → localStorage
On widget open, it checks storage and shows Dashboard if token exists; otherwise it shows Login.

API endpoints used

Auth:

POST /auth/login → expects data.access_token
POST /auth/signup

Dashboard listing:

GET /auth/list_platforms?search=&page=&limit=&sort_by=&order=

Add / details / update:

POST /auth/add_key body: { platform, api_key }
GET /auth/get_key/:credential_id
PUT /auth/update_key/:credential_id body: { platform, api_key }

Errors:

Duplicate platform example: { "detail": "Platform already exists" }

UI behavior

Listing: debounced search, default sort by platform (desc), “Load more”
Copy: fetches details first, then copies api_key to clipboard
Validation (on Save):
- platform: required, min 2, max 60
- api_key: required, min 2, max 200

Cleanup (optional)

import { destroyKeyVault } from "mm-key-vault";
destroyKeyVault();

Troubleshooting

Widget not showing: call initKeyVault() only in the browser (React/Next.js: inside useEffect).
Next.js SSR crash: never call initKeyVault() at module top-level.
Nothing loads after login: verify your backend returns data.access_token.

License

MIT