ArcaneSignupCard#

A complete registration UI component with email/password form, password validation, terms acceptance, and social sign-up buttons.

Basic Usage#

ArcaneSignupCard(
  methods: [AuthMethod.email, AuthMethod.github, AuthMethod.google],
  loginRoute: '/login',
  termsUrl: '/terms',
  privacyUrl: '/privacy',
)

Properties#

Password Policies#

// Custom policy
ArcaneSignupCard(
  passwordPolicy: PasswordPolicy(
    minLength: 8,
    requireUppercase: true,
    requireNumber: true,
    requireSpecialChar: true,
  ),
)

// Preset policies
ArcaneSignupCard(
  passwordPolicy: PasswordPolicy.weak,   // 6+ chars
)

ArcaneSignupCard(
  passwordPolicy: PasswordPolicy.medium, // 8+ chars, uppercase, number
)

ArcaneSignupCard(
  passwordPolicy: PasswordPolicy.strong, // 8+ chars, upper, lower, number, special
)

Examples#

With Terms Acceptance#

ArcaneSignupCard(
  methods: [AuthMethod.email],
  loginRoute: '/login',
  termsUrl: '/terms',
  privacyUrl: '/privacy',
  passwordPolicy: PasswordPolicy.medium,
)

Social Only#

ArcaneSignupCard(
  methods: [AuthMethod.github, AuthMethod.google],
  loginRoute: '/login',
)

With Custom Header#

ArcaneSignupCard(
  header: ArcaneColumn(
    gapSize: Gap.sm,
    children: [
      ArcaneIcon.home(size: IconSize.xl2),
      ArcaneText('Join MyApp', weight: FontWeight.bold),
    ],
  ),
  methods: [AuthMethod.email, AuthMethod.github],
  loginRoute: '/login',
)

Form Fields#

The signup card includes:

• Name - Display name field
• Email - Email address with validation
• Password - With policy hint displayed
• Confirm Password - Must match password
• Terms Checkbox - Only shown if termsUrl or privacyUrl is set

Features#

• Password validation - Real-time policy checking
• Confirm password - Ensures passwords match
• Terms acceptance - Optional checkbox for legal compliance
• Social sign-up - GitHub, Google, Apple buttons
• Loading states - Shows progress during registration
• Error display - Shows validation and server errors

Context Extensions#

// Email registration
context.registerWithEmail(email, password, displayName)

// OAuth (triggered by social buttons)
context.signInWithGitHub()
context.signInWithGoogle()
context.signInWithApple()

Related Components#

• ArcaneLoginCard - Login form
• PasswordPolicy - Password validation
• AuthSplitLayout - Split-screen auth layout