ArcaneJaspr Codex
Documentation
🔍
ArcaneLoginCard
Complete login UI with email/password and social sign-in
Live Demo
Welcome back
Sign in to your account
or continue with email
Forgot password?
Don't have an account? Sign up

ArcaneLoginCard#

A complete login UI component with email/password form and social sign-in buttons. Integrates with Firebase Authentication via the auth context.

Basic Usage#

ArcaneLoginCard(
  methods: [AuthMethod.email, AuthMethod.github, AuthMethod.google],
  signupRoute: '/signup',
  forgotPasswordRoute: '/forgot-password',
)

Properties#

PropertyTypeDefaultDescription
methods List<AuthMethod> [email, github, google] Authentication methods to display
header Component? null Header component (logo, title)
signupRoute String? null Route for signup link
forgotPasswordRoute String? null Route for forgot password link
passwordPolicy PasswordPolicy? null Password validation policy
onSuccess VoidCallback? null Callback when login succeeds
maxWidth String '400px' Max width of the card

AuthMethod Options#

// Email/password authentication
AuthMethod.email

// OAuth providers
AuthMethod.github
AuthMethod.google
AuthMethod.apple

Examples#

Email Only#

ArcaneLoginCard(
  methods: [AuthMethod.email],
  signupRoute: '/signup',
  forgotPasswordRoute: '/forgot-password',
)

Social Only#

ArcaneLoginCard(
  methods: [AuthMethod.github, AuthMethod.google, AuthMethod.apple],
  signupRoute: '/signup',
)

With Custom Header#

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

With Success Callback#

ArcaneLoginCard(
  methods: [AuthMethod.email],
  onSuccess: () {
    // Navigate to dashboard
    context.go('/dashboard');
  },
)

Features#

  • Social sign-in buttons - GitHub, Google, Apple with branded styling
  • Email/password form - Built-in validation and error handling
  • Loading states - Shows loading spinner during authentication
  • Error display - Shows error messages from auth failures
  • Navigation links - Links to signup and forgot password pages
  • Firebase integration - Uses context.signInWithEmail() and OAuth methods

Context Extensions#

The login card uses these auth context extensions:

// Email sign-in
context.signInWithEmail(email, password)

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