API Auth Integration Models
Understand what API Auth apps are for and implement them end-to-end in vanity or custom UX models.
API Auth Integration Models
API Auth apps are the control plane for customer API keys in your product.
They are designed for use cases such as:
- Public developer APIs where customers self-manage keys.
- Partner or integration APIs with explicit key ownership.
- Internal B2B automation APIs with auditable key operations.
- Customer-facing “API keys” settings experiences.
This page gives the full end-to-end model and then helps you choose vanity vs custom UX.
What API Auth apps include
- Key lifecycle: create, rotate, revoke.
- Key metadata and status management.
- Audit logs for key usage decisions.
- Analytics and timeseries for traffic and blocked requests.
- Ticket-based session access model for frontend management surfaces.
Two valid models
Vanity model
You expose a dedicated API Auth management surface (like your vanity-pages implementation) and hand users into it with a short-lived access ticket.
This works best when:
- You need to ship quickly.
- You want battle-tested key lifecycle UX first.
- Your product team is still validating API customer behavior.
Custom model
You build key management directly into your own product flows using hooks (useApiAuthAppSession, useApiAuthKeys, audit hooks).
This works best when:
- Key management must be embedded in existing settings pages.
- You need complex internal policy/approval gates.
- You have mature product requirements and stable IA.
Shared security flow (both models)
Regardless of UI model, keep this exact trust boundary:
- User authenticates in your app.
- Your backend authorizes that user for API key management.
- Backend issues short-lived
api_auth_accessticket. - Frontend exchanges ticket with
/session/ticket/exchange. - Frontend calls
/api-auth/*endpoints with that session.
Your backend remains the policy authority. The frontend handles management UX.
End-to-end implementation blueprint
- Provision API Auth app.
- Define RBAC policy for who can manage keys.
- Implement ticket issuance endpoint in your backend.
- Choose vanity embed or custom hook UX.
- Add audit/analytics dashboards.
- Publish customer docs for secure key handling.
Step 1: create the API Auth app
You must create the API Auth app before issuing tickets or rendering vanity/custom UI.
import { WachtClient } from "@wacht/backend";
const client = new WachtClient({
apiKey: process.env.WACHT_BACKEND_API_KEY!,
});
await client.apiKeys.createApiAuthApp({
app_slug: "aa_42",
name: "Acme Public API",
key_prefix: "acme_live",
description: "API keys for Acme customers",
});Use direct HTTP only in non-SDK runtimes.
Required fields:
app_slugnamekey_prefix
Practical convention: app_slug = aa_<deploymentId>.
Step 2: issue management tickets
Frontend management access should use short-lived tickets with ticket_type=api_auth_access.
Backend responsibilities:
- Validate signed-in user and tenant ownership.
- Enforce RBAC for API key management.
- Issue short-lived ticket scoped to
api_auth_app_slug.
Step 3: pick UX surface
Vanity surface
- Fastest path to production.
- Lower frontend maintenance.
- Good default for early-stage teams.
Custom surface
- Fully integrated product UX.
- More engineering effort and testing surface.
- Better fit when key management is a core workflow.
Decision matrix
| Constraint | Prefer Vanity | Prefer Custom |
|---|---|---|
| Time-to-market | Strong fit | Slower |
| UX control | Medium | Full |
| Product complexity | Low/medium | Medium/high |
| Initial maintenance | Lower | Higher |
| Differentiated experience | Moderate | High |
What to lock before implementation
- Key scope model: user, org, or workspace.
- Expiry policy: optional vs mandatory.
- Rotation policy: manual only vs required cadence.
- Revocation authority: owner-only vs admin override.
- Audit requirements: what your support/security teams must see.
Practical recommendation
For most SaaS teams:
- Launch with vanity pages.
- Learn customer behavior for 1-2 release cycles.
- Move high-value flows to custom UX where needed.
That sequence reduces risk while preserving long-term flexibility.
Related docs
- API Auth vanity implementation
- API Auth custom hook implementation
- React Router
useApiAuthAppSession - React Router
useApiAuthKeys - Node SDK API Keys API
- API Keys Backend API Reference
Go-live checklist
- RBAC gate for ticket issuance is enforced server-side.
- Ticket expiry is short and validated.
- Key create/rotate/revoke flows verified in staging.
- Audit logs visible to support/security owners.
- Customer-facing key handling docs are published.