ZuploZuplo
LoginStart for Free
  • Documentation
  • API Reference
Getting Started
    Develop in the portal
      1 - Setup Your Gateway2 - Rate Limiting3 - API Key Auth4 - Deploy5 - Dynamic Rate LimitingDynamic MCP Server - Quickstart
    Develop locally with the CLI
      1 - Setup Your Gateway2 - Rate Limiting3 - API Key Auth4 - Deploy5 - Dynamic Rate LimitingDynamic MCP Server - Quickstart
Concepts
API Management
AI Gateway
MCP Gateway
MCP Server
Developer Portal
    OverviewLocal DevelopmentUpdating VersionsNode Modules & CustomizationZuplo Branding
    Configuration
    Writing
    OpenAPI
    Authentication
    Integrations
    Guides
    Extending
    Components
      General
      Documentation
        CodeTabsMermaidAPI PlaygroundSecretSidecar BoxStepperSyntax Highlight
      Form
      Utility
Development
Deploying & Source Control
Analytics
Observability
Networking & Infrastructure
Account Management
Programming API
Build with AI
Zuplo CLI
Migration Guides
Platform LimitsVersion Support PolicySecuritySupportTrust & ComplianceChangelog
powered by Zudoku
Documentation

Secret

The Secret component can be used to display secrets, typically API keys, in your Dev Portal application.

Import

Code
import { Secret } from "zudoku/ui/Secret";

Usage

Code
<Secret secret="pkcd_this-is-a-never-01K1DASDXXQDA9S6GKASKYAFSDH" status="active" preview={5} onCopy={(secret) => { console.log("Copied secret:", secret); }} onReveal={(revealed) => { console.log("Revealed:", revealed); }} />
•••• •••• •••• •••• •••• •••• •••• •••• •••AFSDH
•••• •••• •••• •••• •••• •••• •••• •••• •••YSDXX
•••• •••• •••• •••• •••• •••• •••• •••• •••E5KAS
•••• •••• •••• •••• •••• •••• •••• •••• •••1SFSR
•••• •••• •••• •••• •••• •••• •••• •••• •••1SFSR
•••• •••• •••• •••• •••• •••• •••• •••• •••KASKY
Client ID
client-id-01985b58-d7af-71eb-a27e-b2062935ece4
Client Secret
•••• •••• •••• •••• •••• •••• •••• •••• •••KASKY
Edit this page
Last modified on September 12, 2026
API PlaygroundSidecar Box
On this page
  • Import
  • Usage
React
React