Skip to content
Vendidit Auth

Component catalog

The full catalog lives on the live demo site. Browse it at auth-demo.vendidit.com.

What’s in the catalog

Atoms — @vendidit/auth-client/preact/ui/atoms

Headless / minimally-styled primitives — drop into any layout.

  • AuthStatusBadge — coloured pill showing the current session state
  • UserAvatar — initials + colour from user.email
  • UserMenu — dropdown with profile / settings / sign-out
  • LogoutButton — single-action button that calls auth.logout()
  • SsoButton — provider-specific (Google / Apple / GitHub / Microsoft)
  • ProtectedRoute — gate that renders children only when authenticated
  • GuestOnly — opposite of ProtectedRoute
  • RoleGate — gate by role code(s)
  • PermissionGate — gate by permission code(s)
  • TokenExpiryCountdown — live countdown to access-token exp
  • AuthLoading — spinner aligned with the SDK’s bootstrap state

Forms — @vendidit/auth-client/preact/ui/forms

Composed forms — assemble flows from these.

  • LoginForm / RegisterForm
  • PasswordResetRequestForm / PasswordResetForm / ChangePasswordForm
  • EmailVerificationNotice
  • TwoFactorEnrollment / TwoFactorDisableForm
  • SessionsList
  • MagicLinkRequestForm
  • DeleteAccountForm
  • AuditLogTable
  • UsersTable / AdminUserEditPanel
  • OrgRoleEditor / MembersList / InviteMemberForm / OrgSwitcher
  • UserLookupTable

Flows — @vendidit/auth-client/preact/ui/flows

End-to-end multi-step flows. Drop one into a route and it handles the full UI.

  • CompleteLoginFlow
  • CompleteSignupFlow
  • CompletePasswordResetFlow
  • CompleteSsoCallbackFlow
  • CompleteAccountSecurityFlow
  • CompleteImpersonationFlow
  • CompleteOrgAdminFlow

Why a catalog?

Every component on the catalog page is rendered with realistic props + the source displayed inline. When adding auth to a new app, the shortest path is to find the equivalent demo page and copy the pattern — see How to use the playground for the recommended workflow.

The catalog also serves as a regression visual — any visual change to the SDK’s UI surface shows up on the catalog page first.