UI components

@rw3iss/auth-client/preact ships a three-layer UI toolkit. Drop a flow into a route to get a full screen, drop a form to wire just the submit step, or drop an atom for an inline affordance.

Each layer mirrors the playground catalog — the live demo site renders every component with realistic props plus inline source. Use the catalog to scout the shape; click through here to see props, types, and copy-paste usage.

Atoms

Single-purpose primitives — buttons, badges, gates, indicators. Drop-in pieces with minimal styling.

• AuthLoading — Renders fallback while the AuthClient is still bootstrapping
• AuthStatusBadge — Tiny pill rendering the current auth status.
• GuestOnly — Inverse of ProtectedRoute — render children only when NOT
• LogoutAllButton — Sign out of every session on every device for the current user.
• LogoutButton — Single-shot logout button.
• PasswordStrengthMeter — Inline password-strength bar.
• PermissionGate — Render children only if the current user has the requested
• ProtectedRoute — Render children only if the caller is authenticated.
• RoleGate — Render children only if the current user has one of the listed
• SsoButton — Base “Sign in with X” button.
• SsoButtonGroup
• TokenExpiryCountdown — Live countdown to the cached access token’s expiry.
• UserAvatar — Square user avatar.
• UserMenu — Header-level user menu — avatar trigger + dropdown with profile

Forms & views

Composed forms and admin views — credential entry, account security, org membership tables. Assemble flows from these or render them directly.

• AdminUserEditPanel — Admin user-edit panel.
• AuditLogTable — Paginated audit-log table.
• ChangePasswordForm — Change-password form for the currently-signed-in user.
• DeleteAccountForm — Self-service account-deletion form.
• EmailVerificationNotice — “Check your email to verify” notice.
• InvitationAcceptCard — Single-invitation accept/decline card — useful for an `/accept-
• InvitationsAdminList — Org-side pending-invitations table.
• InvitationsList — The authenticated invitee’s pending invitations.
• InviteMemberForm — Invite-by-email form for the current (or specified) org.
• LoginForm — Password login form.
• MagicLinkRequestForm — “Email me a sign-in link” form.
• MembersList — Org members table — list everyone in the current (or specified) org
• OrgCreateForm — Admin-only org creation.
• OrgRoleEditor — Custom org-role editor.
• OrgSettingsForm — Org settings editor — read + edit name and slug.
• OrgSwitcher — Dropdown of the user’s organization memberships with a click-to-switch
• PasswordResetForm — Reset-password form, completing the flow started by the
• PasswordResetRequestForm — “Forgot your password?” form.
• RegisterForm — Account-creation form.
• SessionsList — Active sessions for either the caller or a target user.
• TwoFactorDisableForm — Disable 2FA.
• TwoFactorEnrollment — TOTP enrollment wizard.
• UserLookupTable — Admin tool — paste a list of emails (or ids), hit Look up, render
• UserProfileCard — Identity card showing the current user — avatar, name, email, org
• UsersTable — Paginated users table — GET /admin/users with search + pagination.

Flows

End-to-end multi-step page-level compositions. Drop into a route and the SDK handles the entire UI.

• CompleteAccountSecurityFlow — Single-page “Account security” surface — drops change-password, 2FA
• CompleteEmailVerificationFlow — Email-verification landing — mount on the route your verification
• CompleteImpersonationFlow — Admin impersonation start-form: pick a user id, supply a reason,
• CompleteLoginFlow — “Sign in” page — opinionated composition of:
• CompleteOrgAdminFlow — One-page org administration surface.
• CompletePasswordResetFlow — Combined password-reset surface — branches on whether a token was
• CompleteSignupFlow — Full registration flow: collect details → register → display
• CompleteSsoCallbackFlow — SSO callback handler — mount on your redirectUrl route (the same