API Keys Service

import { SnackBaseClient } from "@snackbase/sdk";

const client = new SnackBaseClient({
  baseUrl: "https://api.example.com",
});

// Access the API keys service
const apiKeys = client.apiKeys;

const keys = await client.apiKeys.list();

[
  {
    "id": "key-id-1",
    "name": "Production App",
    "key": "sb_sk_...x9k2",  // Masked
    "is_active": true,
    "last_used": "2024-01-15T10:30:00Z",
    "created_at": "2024-01-01T00:00:00Z"
  }
]

const key = await client.apiKeys.get("key-id");

const key = await client.apiKeys.create({
  name: "My Integration"
});

{
  "id": "key-id-2",
  "name": "My Integration",
  "key": "sb_sk_a1b2c3d4e5f6g7h8i9j0",  // Full key - save this!
  "is_active": true,
  "created_at": "2024-01-15T10:30:00Z"
}

await client.apiKeys.revoke("key-id");

const client = new SnackBaseClient({
  baseUrl: "https://api.example.com",
  apiKey: "sb_sk_a1b2c3d4e5f6g7h8i9j0"
});

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@snackbase/sdk/react";

function ApiKeyManager() {
  const queryClient = useQueryClient();
  const { data: keys, isLoading } = useQuery({
    queryKey: ["api-keys"],
    queryFn: () => client.apiKeys.list()
  });

  const createMutation = useMutation({
    mutationFn: (data) => client.apiKeys.create(data),
    onSuccess: (key) => {
      // Show the key to the user to save
      alert(`Save this key - it won't be shown again:\n\n${key.key}`);
      queryClient.invalidateQueries(["api-keys"]);
    }
  });

  const revokeMutation = useMutation({
    mutationFn: (keyId) => client.apiKeys.revoke(keyId),
    onSuccess: () => {
      queryClient.invalidateQueries(["api-keys"]);
    }
  });

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h2>API Keys</h2>

      <button
        onClick={() => createMutation.mutate({ name: "New Key" })}
        disabled={createMutation.isPending}
      >
        Create New Key
      </button>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Last Used</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {keys?.map(key => (
            <tr key={key.id}>
              <td>{key.name}</td>
              <td>{key.is_active ? "Active" : "Inactive"}</td>
              <td>{key.last_used ? new Date(key.last_used).toLocaleString() : "Never"}</td>
              <td>
                <button
                  onClick={() => revokeMutation.mutate(key.id)}
                  disabled={revokeMutation.isPending}
                >
                  Revoke
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}