Component catalog

The full catalog lives on the live demo site. Browse it at demo.auth.ryanweiss.net.

Every entry below links to its props-and-usage reference page in UI components.

What’s in the catalog

Atoms — @rw3iss/auth-client/preact/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()
• LogoutAllButton — sign out everywhere (revokes the refresh family)
• SsoButton · SsoButtonGroup — 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
• PasswordStrengthMeter — inline strength indicator for password fields

Forms & views — @rw3iss/auth-client/preact/forms

Composed forms and admin views — assemble flows from these.

• LoginForm · RegisterForm
• PasswordResetRequestForm · PasswordResetForm · ChangePasswordForm
• EmailVerificationNotice
• TwoFactorEnrollment · TwoFactorDisableForm
• SessionsList
• MagicLinkRequestForm
• DeleteAccountForm
• AuditLogTable
• UsersTable · AdminUserEditPanel
• OrgCreateForm · OrgSettingsForm · OrgRoleEditor · OrgSwitcher
• MembersList · InviteMemberForm · InvitationsList · InvitationsAdminList · InvitationAcceptCard
• UserLookupTable · UserProfileCard

Flows — @rw3iss/auth-client/preact/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.