Create API Key

POST https://www.wiseyield.co/api/api-keys

wy_{environment}_{48_hexadecimal_characters}

wy_live_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2

wy_test_x9y8z7w6v5u4t3s2r1q0p9o8n7m6l5k4j3i2h1g0f9e8

async function createProductionKey() {
  const response = await fetch('/api/api-keys', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${clerkSessionToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'Production Server',
      environment: 'live',
      scopes: [
        'farms:read',
        'crops:read',
        'fields:read',
        'analytics:read'
      ], // Read-only access
      rateLimit: 10000,
      metadata: {
        server: 'prod-api-01',
        region: 'us-east-1'
      }
    })
  });

  const key = await response.json();

  // ⚠️ Save to secure storage
  await storeInVault('WISEYIELD_API_KEY', key.key);

  return key;
}

async function createTestKey() {
  const response = await fetch('/api/api-keys', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${clerkSessionToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'Local Development',
      environment: 'test',
      scopes: ['all'], // Full access for testing
      rateLimit: 1000
    })
  });

  const key = await response.json();

  // Can safely add to .env.local for development
  console.log('Add to .env.local:');
  console.log(`WISEYIELD_API_KEY=${key.key}`);

  return key;
}

async function createTemporaryKey(daysUntilExpiry = 30) {
  const expiresAt = new Date();
  expiresAt.setDate(expiresAt.getDate() + daysUntilExpiry);

  const response = await fetch('/api/api-keys', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${clerkSessionToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: `Temporary Access (${daysUntilExpiry}d)`,
      environment: 'live',
      scopes: ['farms:read', 'crops:read'],
      expiresAt: expiresAt.toISOString(),
      rateLimit: 500,
      metadata: {
        purpose: 'temporary-integration',
        requestedBy: 'partner-xyz'
      }
    })
  });

  const key = await response.json();

  // Share with partner
  console.log('Temporary key created');
  console.log(`Expires: ${new Date(key.expiresAt).toLocaleDateString()}`);

  return key;
}

async function createMobileAppKey() {
  const response = await fetch('/api/api-keys', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${clerkSessionToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'iOS App v2.1',
      environment: 'live',
      scopes: [
        'farms:read',
        'crops:read',
        'crops:write',
        'tasks:read',
        'tasks:write'
      ],
      rateLimit: 2000,
      metadata: {
        platform: 'ios',
        appVersion: '2.1.0',
        buildNumber: '142'
      }
    })
  });

  const key = await response.json();

  // Embed in app configuration
  return key;
}

# ✅ GOOD: Environment variables
WISEYIELD_API_KEY=wy_live_abc123...

# ✅ GOOD: Secret management services
aws secretsmanager create-secret --name wiseyield-api-key

# ❌ BAD: Hardcoded in code
const apiKey = "wy_live_abc123..."

# ❌ BAD: Committed to git
git add .env  # If .env contains keys!

async function rotateApiKey(oldKeyId) {
  // 1. Create new key
  const newKey = await createApiKey({
    name: 'Production Server (Rotated)',
    environment: 'live',
    scopes: [...],
    rateLimit: 10000
  });

  // 2. Update application config
  await updateEnvVar('WISEYIELD_API_KEY', newKey.key);

  // 3. Test new key
  await testApiKey(newKey.key);

  // 4. Revoke old key
  await revokeApiKey(oldKeyId);
}

// ✅ GOOD: Minimal scopes
const readOnlyKey = {
  scopes: ['farms:read', 'crops:read']
};

// ⚠️ CAUTION: Broad access
const writeKey = {
  scopes: ['farms:write', 'crops:write', 'fields:write']
};

// ⚠️ DANGER: Full access
const adminKey = {
  scopes: ['all'] // Only for trusted applications
};

function CreateApiKeyModal({ isOpen, onClose, onCreated }) {
  const [formData, setFormData] = useState({
    name: '',
    environment: 'live',
    scopes: [],
    rateLimit: 1000,
    expiresAt: '',
  });
  const [creating, setCreating] = useState(false);
  const [createdKey, setCreatedKey] = useState(null);

  async function handleCreate() {
    setCreating(true);

    try {
      const response = await fetch('/api/api-keys', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${clerkSessionToken}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          ...formData,
          expiresAt: formData.expiresAt || undefined
        })
      });

      if (!response.ok) {
        const error = await response.json();
        toast.error(error.message || 'Failed to create API key');
        return;
      }

      const newKey = await response.json();

      setCreatedKey(newKey);
      toast.success('API key created');
      onCreated?.(newKey);
    } finally {
      setCreating(false);
    }
  }

  if (createdKey) {
    return (
      <Modal open={isOpen} onClose={onClose}>
        <ModalTitle>API Key Created</ModalTitle>

        <ModalContent>
          <Alert severity="warning">
            <AlertTitle>Save This Key Now!</AlertTitle>
            <p>This is the only time you'll see the full key. Copy it to a secure location.</p>
          </Alert>

          <div className="my-4">
            <label className="block text-sm font-medium mb-2">API Key</label>
            <div className="flex gap-2">
              <code className="flex-1 p-3 bg-gray-100 rounded font-mono text-sm break-all">
                {createdKey.key}
              </code>
              <button
                onClick={() => {
                  navigator.clipboard.writeText(createdKey.key);
                  toast.success('Copied to clipboard');
                }}
                className="btn btn-secondary"
              >
                Copy
              </button>
            </div>
          </div>

          <div className="text-sm text-gray-600">
            <div><strong>Name:</strong> {createdKey.name}</div>
            <div><strong>Environment:</strong> {createdKey.environment}</div>
            <div><strong>Rate Limit:</strong> {createdKey.rateLimit}/hour</div>
          </div>
        </ModalContent>

        <ModalActions>
          <button onClick={onClose} className="btn btn-primary">
            I've Saved My Key
          </button>
        </ModalActions>
      </Modal>
    );
  }

  return (
    <Modal open={isOpen} onClose={onClose}>
      <ModalTitle>Create API Key</ModalTitle>

      <ModalContent>
        <form className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2">Name *</label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="e.g., Production Server"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Environment</label>
            <select
              value={formData.environment}
              onChange={(e) => setFormData({ ...formData, environment: e.target.value })}
            >
              <option value="live">Live (Production)</option>
              <option value="test">Test (Development)</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Scopes *</label>
            <ScopeSelector
              selected={formData.scopes}
              onChange={(scopes) => setFormData({ ...formData, scopes })}
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">
              Rate Limit (requests/hour)
            </label>
            <input
              type="number"
              value={formData.rateLimit}
              onChange={(e) => setFormData({ ...formData, rateLimit: parseInt(e.target.value) })}
              min="1"
              max="100000"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">
              Expiration Date (optional)
            </label>
            <input
              type="datetime-local"
              value={formData.expiresAt}
              onChange={(e) => setFormData({ ...formData, expiresAt: e.target.value })}
            />
          </div>
        </form>
      </ModalContent>

      <ModalActions>
        <button onClick={onClose} disabled={creating}>
          Cancel
        </button>
        <button
          onClick={handleCreate}
          disabled={!formData.name || formData.scopes.length === 0 || creating}
          className="btn btn-primary"
        >
          {creating ? 'Creating...' : 'Create API Key'}
        </button>
      </ModalActions>
    </Modal>
  );
}