Copy page

API Key Manager React Component

Zuplo provides an open source react component that can be used on your own UI to provider users with self-serve access to API Keys for your Zuplo powered API.

To see a demo of the component visit https://api-key-manager.com.

Getting Started

This component can be used with any React framework. It's compatible with Tailwind CSS, but Tailwind isn't required.

Install

Install the component in your React project

Code
npm install @zuplo/react-api-key-manager

With Tailwind

Import the component's stylesheet into your global.css or equivalent file. The styles will use your project's tailwind configuration to provide a consistent theme.

Code
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@zuplo/react-api-key-manager/tailwind.css";

Without Tailwind

Import the component's stylesheet into your root component (for example, App.jsx), typically below your other stylesheets.

Code
import "./styles/globals.css";
import "@zuplo/react-api-key-manager/index.css";

Custom Styles

The component's CSS can be completely customized by copying either the tailwind.css or index.css files from node_modules/@zuplo/react-api-key-manager/dist/ and modifying the styles to suite your needs.

Usage

You can import the ReactAPIKeyManager into your React project directly.

Code
import {
  ApiKeyManager,
  DefaultApiKeyManagerProvider,
} from "@zuplo/react-api-key-manager";

const MyComponent = () => {
  const defaultProvider = new DefaultApiKeyManagerProvider(
    "<BASE_URL>",
    "<ACCESS_TOKEN>"
  );

  return <ApiKeyManager provider={provider} />;
};

Backend API

The React component does not call the Zuplo Developer API directly. Instead, it talks to a backend API that you control - this backend authenticates the user with your own auth system, then proxies requests to the Zuplo Developer API using your Zuplo API key. This keeps your Zuplo credentials server-side and lets you enforce access control (for example, ensuring users can only manage keys for their own organization).

The <BASE_URL> in the usage example above should point to this backend API. The <ACCESS_TOKEN> is your own auth token (session cookie, JWT, etc.) that your backend uses to identify the user.

The easiest way to get started is to use the Auth Translation API sample and deploy it to Zuplo. This sample provides the backend endpoints the component expects and connects to the Zuplo API Key Management Service out of the box.

For a full walkthrough of building this backend yourself (including the architecture, all API operations, and security considerations), see Build Self-Serve API Key Management in Your Product.