Component Library

Pre-built React components for authentication, organizations, security, and more. All components are fully customizable and TypeScript-ready.

AuthCore ships 14 React components and helpers; the sections below spotlight the primary UI surfaces with dedicated walkthroughs.

14
Components
100%
TypeScript
Customizable
Full Control

AuthForm

Authentication

Unified login/register form with password strength, optional tenant field, and social placeholders.

Login/register toggleMulti-step progressTenant domain input+1 more

TwoFactorSetup

Security

Guided TOTP enrollment wizard with QR code, backup codes, and verification step.

QR enrollmentBackup codesVerification input+1 more

AccountRestore

Authentication

Self-service restore flow for soft-deleted accounts and password resets.

Restore modalToken hand-offOptional password reset+1 more

CreateOrganization

Organizations

Onboarding wizard with slug validation, logo uploader, and invite preview.

Slug validationLogo uploaderInvite step+1 more

OrganizationSwitcher

Organizations

Tenant picker with search, badges, and quick links into organization dashboards.

Search & filterActive tenant badgeCreate organization CTA+1 more

UserProfile

Account

Account overview with profile details, billing, devices, and activity tabs.

Tabbed layoutDevice managementAudit history+1 more

ProfileDropdown

Account

Header-ready user button with avatar fallback, quick actions, and sign out.

Avatar initialsEmail displaySettings shortcut+1 more

SecuritySettings

Security

Administrative controls for lockout, bot protection, enumeration, and policies.

Lockout policyBot protection toggleEnumeration guard+1 more

EmailListManager

Security

Allow and block list manager with domain wildcards and inline moderation.

Allowlist/blocklist modesDomain wildcard tipsInline add/remove+1 more

PricingTable

Billing

Plan comparison grid with feature highlights and plan selection handlers.

Plan tiersBilling period toggleHighlight states+1 more

CheckoutPage

Billing

Responsive checkout with promo codes, localized copy, and branded payment toggles.

Custom payment slotsOrder summaryPromo entry+1 more

WaitlistForm

Marketing

Email capture form with custom fields, validation, and success callbacks.

Custom fieldsClient-side validationSuccess messaging+1 more

Waitlist Guide

Marketing

Reference endpoints and workflows for managing a product waitlist.

REST endpointsAdmin actionsInvite workflow+1 more

BillingPlaybooks

Billing

Reference implementations for checkout API endpoints, webhooks, and Stripe hand-off.

API handlersWebhook samplesPortal routes+1 more

Getting Started with Components

Installation

npm install codalware-auth

Basic Usage

import { AuthForm } from 'codalware-auth'

export default function LoginPage() {
  return <AuthForm mode="login" tenantId="your-tenant-id" />
}

Styling

All components accept className props and can be styled with Tailwind CSS or custom CSS. See individual component pages for specific styling options.

Customization

Styling

Use className props, Tailwind CSS, or custom CSS to match your brand

Logic

Override default behavior with callbacks and event handlers

Composition

Combine components to build complex flows

TypeScript

Full type definitions included for IDE autocomplete

Browse by Category

🔐
Authentication
2 components
🛡️
Security
1 component
👥
Organizations
2 components
⚙️
Admin
2 components
💳
Billing
2 components

Next Steps

Start with AuthForm →

The most commonly used component

See Examples →

Complete implementation examples

Styling Guide →

Learn how to customize components