Deploy a certctl Agent
Agents run on your infrastructure to manage certificates, generate keys, and deploy to targets.
Install one now or skip to do it later.
{/* OS Tabs */}
{tabs.map(t => (
))}
{/* Agent detection */}
{hasAgents ? (
<>
{agentList.length} agent{agentList.length !== 1 ? 's' : ''} detected
{agentList.slice(0, 3).map(a => a.name || a.id).join(', ')}
{agentList.length > 3 && ` and ${agentList.length - 3} more`}
) : (
<>
Waiting for an agent to connect... (polling every 5s)
)}
);
}
// ─── Step 3: Add a Certificate ───────────────────────
function CertificateStep({ onNext, onSkip, createdIssuerId }: {
onNext: (certName?: string) => void;
onSkip: () => void;
createdIssuerId: string | null;
}) {
const queryClient = useQueryClient();
const [commonName, setCommonName] = useState('');
const [sans, setSans] = useState('');
const [issuerId, setIssuerId] = useState(createdIssuerId || '');
const [profileId, setProfileId] = useState('');
const [ownerId, setOwnerId] = useState('');
const [error, setError] = useState('');
const [created, setCreated] = useState(false);
const { data: issuers } = useQuery({ queryKey: ['issuers'], queryFn: () => getIssuers() });
const { data: profiles } = useQuery({ queryKey: ['profiles'], queryFn: () => getProfiles() });
const { data: agents } = useQuery({ queryKey: ['agents'], queryFn: () => getAgents() });
const { data: owners } = useQuery({ queryKey: ['owners'], queryFn: () => getOwners() });
const hasAgents = (agents?.data?.length ?? 0) > 0;
const createMutation = useMutation({
mutationFn: async () => {
const sanList = sans.split(',').map(s => s.trim()).filter(Boolean);
const cert = await createCertificate({
common_name: commonName,
sans: sanList,
issuer_id: issuerId,
certificate_profile_id: profileId || undefined,
owner_id: ownerId,
environment: 'production',
});
// Trigger issuance
await triggerRenewal(cert.id);
return cert;
},
onSuccess: (cert) => {
setCreated(true);
queryClient.invalidateQueries({ queryKey: ['certificates'] });
queryClient.invalidateQueries({ queryKey: ['dashboard-summary'] });
setTimeout(() => onNext(cert.common_name), 1500);
},
onError: (err: Error) => setError(err.message),
});
if (created) {
return (
Add a Certificate
Issue your first certificate, or skip this step and explore the dashboard.
setCommonName(e.target.value)}
placeholder="example.com"
className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
/>
setSans(e.target.value)}
placeholder="www.example.com, api.example.com"
className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
/>
{(owners?.data?.length ?? 0) === 0 && (
No owners yet — create one from the Owners page first, then return here.
)}
{/* Discovery hint */}
{hasAgents && (
Already have certificates on disk?{' '}
Visit the Discovery page to
import and manage existing certificates found by your agents.
)}
{!hasAgents && (
Tip: Deploy an agent with{' '}
CERTCTL_DISCOVERY_DIRS=/etc/ssl/certs{' '}
to automatically discover existing certificates on your infrastructure.
)}
{error && (
{error}
)}
createMutation.mutate()}
nextLabel={createMutation.isPending ? 'Creating...' : 'Issue Certificate'}
nextDisabled={!commonName || !issuerId || !ownerId || createMutation.isPending}
/>
);
}
// ─── Step 4: Complete ────────────────────────────────
function CompleteStep({ onFinish, issuerName, certName }: {
onFinish: () => void;
issuerName: string | null;
certName: string | null;
}) {
const { data: issuers } = useQuery({ queryKey: ['issuers'], queryFn: () => getIssuers() });
const { data: agents } = useQuery({ queryKey: ['agents'], queryFn: () => getAgents() });
const issuerCount = issuers?.data?.length ?? 0;
const agentCount = agents?.data?.length ?? 0;
return (