Skip to main content
Version: 1.0.3

API Keys Page

A comprehensive API keys management system with enterprise-grade security features. Includes key generation, encryption, permissions management, usage analytics, and audit logging. Perfect for developer portals, admin panels, and any application requiring secure API access management.

API Keys Management

Manage your API access keys and permissions

Security First

API keys are masked by default. Revealing or deleting keys requires authentication. All actions are logged for security auditing.

Overview
+2

5

Total Keys

60%

3

Active Keys

+12%

69,760

Total Calls

Live

511

Calls Today

Audit

1

Revoked Keys

Name

Key

Status

Permissions

Created

Actions

Production API

Used for production environment API calls

sk_live_••••••••x7KpActive
Read Users
+3

1/15/2024

Analytics Dashboard

Dashboard analytics integration

sk_live_••••••••m2QrActive
Read Analytics
+1

3/22/2024

Mobile App

Mobile application API access

sk_live_••••••••n9TsActive
Read Users
+1

6/10/2024

Webhook Service

Webhook service integration

sk_test_••••••••p5LmExpired
Write Data

11/5/2023

Legacy System

Revoked due to security concerns

sk_live_••••••••r1WvRevoked
Admin Access
+2

8/20/2023

Installation​

ignix add component apikeys

Examples​

API Keys Operations​

Generate New Key​

Handle key generation by implementing the onGenerateKey callback:

import { ApiKeysPage } from '@ignix-ui/apikeys';

function ApiKeysDashboard() {
  const [keys, setKeys] = useState([]);
  
  const handleGenerateKey = async (name, scopes, expiresAt, description) => {
    // Call YOUR backend API
    const response = await fetch('/api/keys', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, scopes, expiresAt, description })
    });
    
    const newKey = await response.json();
    
    // Transform the response to component format
    const transformedKey = {
      id: newKey.id,
      name: newKey.name,
      keyPrefix: newKey.prefix || 'sk_',
      keySuffix: newKey.secret.slice(-4),
      scopes: newKey.scopes,
      createdAt: new Date(newKey.created_at),
      lastUsed: null,
      usageCount: 0,
      usageHistory: Array.from({ length: 7 }, () => ({ date: '', count: 0 })),
      status: 'active',
      expiresAt: newKey.expires_at ? new Date(newKey.expires_at) : undefined,
      description: newKey.description
    };
    
    // Update your state
    setKeys(prev => [transformedKey, ...prev]);
    
    // Return the key for the component to use
    return transformedKey;
  };
  
  return (
    <ApiKeysPage
      initialApiKeys={keys}
      onGenerateKey={handleGenerateKey}
      generateButtonLabel="Create API Key"
      // ... other props
    />
  );
}

Delete Key​

Handle key deletion with the onDeleteKey callback:

import { ApiKeysPage } from '@ignix-ui/apikeys';

function ApiKeysDashboard() {
  const [keys, setKeys] = useState([]);
  
  const handleDeleteKey = async (keyId) => {
    // Confirm deletion (component handles this)
    if (!window.confirm('Are you sure you want to delete this key?')) {
      return;
    }
    
    try {
      // Call YOUR delete API
      await fetch(`/api/keys/${keyId}`, {
        method: 'DELETE'
      });
      
      // Update your local state
      setKeys(prev => prev.filter(key => key.id !== keyId));
      
      // Show success message
      alert('API key deleted successfully');
    } catch (error) {
      alert('Failed to delete API key: ' + error.message);
    }
  };
  
  return (
    <ApiKeysPage
      initialApiKeys={keys}
      onDeleteKey={handleDeleteKey}
      requireConfirmation={true} // Shows modal confirmation
      // ... other props
    />
  );
}

Reveal Key​

Handle key revealing with the onRevealKey callback:

import { ApiKeysPage } from '@ignix-ui/apikeys';

function ApiKeysDashboard() {
  const [keys, setKeys] = useState([]);
  
  const handleRevealKey = async (keyId) => {
    try {
      // Call YOUR backend to get the full key (requires authentication)
      const response = await fetch(`/api/keys/${keyId}/reveal`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${userToken}`,
          'Content-Type': 'application/json'
        }
      });
      
      if (!response.ok) {
        throw new Error('Failed to reveal key');
      }
      
      const data = await response.json();
      
      // Return the full key to the component
      return data.fullKey;
    } catch (error) {
      alert('Failed to reveal API key ', error.message);
      throw error; // Component will show error notification
    }
  };
  
  return (
    <ApiKeysPage
      initialApiKeys={keys}
      onRevealKey={handleRevealKey}
      requirePasswordToReveal={true} // Enable security
      autoHideRevealedKey={true}    // Auto-hide after 30 seconds
      autoHideDelay={30}            // Hide delay in seconds
      // ... other props
    />
  );
}

Revoke Key​

Handle key revocation with the onRevokeKey callback:

import { ApiKeysPage } from '@ignix-ui/apikeys';

function ApiKeysDashboard() {
  const [keys, setKeys] = useState([]);
  
  const handleRevokeKey = async (keyId) => {
    try {
      // Call YOUR revocation API
      const response = await fetch(`/api/keys/${keyId}/revoke`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
      });
      
      if (!response.ok) {
        throw new Error('Failed to revoke key');
      }
      
      // Update local state - mark as revoked
      setKeys(prev => prev.map(key => 
        key.id === keyId 
          ? { ...key, status: 'revoked' }
          : key
      ));
      
      return true; // Success
    } catch (error) {
      alert('Failed to revoke API key', error.message);
      throw error; // Component will show error notification
    }
  };
  
  return (
    <ApiKeysPage
      initialApiKeys={keys}
      onRevokeKey={handleRevokeKey}
      // ... other props
    />
  );
}

Export Keys​

Handle key exporting with the onExportKeys callback:

import { ApiKeysPage } from '@ignix-ui/apikeys';

function ApiKeysDashboard() {
  const [keys, setKeys] = useState([]);
  
  const handleExportKeys = async (format) => {
    try {
      // Call YOUR export API or handle locally
      if (format === 'json') {
        // Export as JSON
        const dataStr = JSON.stringify(keys, null, 2);
        const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
        
        const exportFileDefaultName = `api-keys-${new Date().toISOString().split('T')[0]}.json`;
        
        const linkElement = document.createElement('a');
        linkElement.setAttribute('href', dataUri);
        linkElement.setAttribute('download', exportFileDefaultName);
        linkElement.click();
      } else if (format === 'csv') {
        // Export as CSV
        const headers = ['Name', 'ID', 'Status', 'Scopes', 'Created', 'Last Used', 'Usage Count'];
        const csvData = keys.map(key => [
          key.name,
          key.id,
          key.status,
          key.scopes.join(', '),
          key.createdAt.toISOString(),
          key.lastUsed?.toISOString() || '',
          key.usageCount.toString()
        ]);
        
        const csvContent = [
          headers.join(','),
          ...csvData.map(row => row.join(','))
        ].join('\n');
        
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.setAttribute('href', url);
        link.setAttribute('download', `api-keys-${new Date().toISOString().split('T')[0]}.csv`);
        link.click();
      }
    } catch (error) {
      alert('Failed to export keys', error.message);
    }
  };
  
  return (
    <ApiKeysPage
      initialApiKeys={keys}
      onExportKeys={handleExportKeys}
      showExport={true}
      // ... other props
    />
  );
}

Stats​

Default Stats Calculation​

import { ApiKeysPage } from '@ignix-ui/apikeys';

function YourComponent() {
  const [apiKeys, setApiKeys] = useState([]);
  
  return (
    <ApiKeysPage
      initialApiKeys={apiKeys}
      showStats={true}
    />
  );
}

Custom Stats Data​

import { ApiKeysPage } from '@ignix-ui/apikeys';

function YourComponent() {
  const [apiKeys, setApiKeys] = useState([]);
  const [stats, setStats] = useState(null);
  
  useEffect(() => {
    fetch('/api/analytics/stats')
      .then(res => res.json())
      .then(data => {
        setStats({
          totalKeys: data.total_keys,
          activeKeys: data.active_keys,
          totalCalls: data.total_api_calls,
          callsToday: data.calls_today,
          revokedKeys: data.revoked_keys,
        });
      });
  }, []);
  
  return (
    <ApiKeysPage
      initialApiKeys={apiKeys}
      statsData={stats}
      showStats={true}
    />
  );
}

Features​

1. Comprehensive Key Management

  • Generate new API keys with customizable permissions
  • View, edit, and delete existing keys
  • Copy key references to clipboard
  • Regenerate keys with invalidation of old keys

2. Security Features

  • Password-protected key revelation
  • Auto-hide revealed keys after configurable delay
  • Confirmation dialogs for destructive actions
  • Security notifications and warnings

3. Filtering & Search

  • Search by key name, description, or suffix
  • Filter by status (active, inactive, expired, revoked)
  • Filter by permissions (scopes)
  • Date range filtering
  • Combined grid and list view modes

4. Statistics & Monitoring

  • Total keys count
  • Active keys percentage
  • API call counts (total and today)
  • Revoked keys count
  • Usage history tracking

5. Export & Integration

  • Export keys as JSON or CSV
  • Custom callback hooks for integration
  • Responsive design for all screen sizes

Props​

PropTypeDefaultDescription
headerTitlestring"API Keys Management"Header title.
headerIconReact.ReactNode<Key />Header icon.
headerDescriptionstring"Manage keys"Header description.
initialApiKeysApiKey[][]Initial keys data.
onGenerateKey(data) => Promise-Callback to generate key.
onDeleteKey(id) => Promise-Callback to delete key.
onRevealKey(id) => Promise-Callback to reveal key.
onRevokeKey(id) => Promise-Callback to revoke key.
variant"default" | "gradient" | "card" | "glass" | "dark""default"Background variant.
animationVariantstring"fadeUp"Page animation.
showStatsbooleantrueShow stats section.
requireConfirmationbooleantrueConfirm destructive actions.
requirePasswordToRevealbooleanfalsePassword for reveal.
autoHideRevealedKeybooleantrueAuto-hide key.
autoHideDelaynumber30Hide delay in seconds.