Auth Flow

Complete authentication flow with 6 screens: login landing, email entry, password entry, forgot password, verification code, and reset password.

Installation

Screens

The auth flow includes 6 screens that handle the complete authentication lifecycle:

Screen	Description
Login Landing	Social auth buttons (Apple, Google, Microsoft) with animated typing taglines and email sign-in entry point.
Email Entry	Email input with validation. Routes to password entry for existing accounts or sign-up for new ones.
Password Entry	Handles both login and sign-up modes. Includes forgot password link and password strength indicator for sign-up.
Forgot Password	Email input to send a password reset code.
Verification Code	6-digit code entry with auto-advance between fields and resend functionality.
Reset Password	New password entry with confirmation field and strength validation.

Configuration

AuthFlowConfig controls which social providers appear, branding, and behavior:

Property	Type	Default	Description
showApple	bool	false	Show Sign in with Apple button.
showGoogle	bool	false	Show Sign in with Google button.
showMicrosoft	bool	false	Show Sign in with Microsoft button.
taglines	List<String>	[]	Animated typing taglines on the login landing screen.
logo	Widget?	null	Custom logo widget displayed on the landing screen.
legalLinks	LegalLinks?	null	Terms of service and privacy policy URLs shown at the bottom.
guestMode	bool	false	Enable a "Continue as Guest" option on the landing screen.

Provider Interface

AuthProvider is the abstract interface your backend must implement:

abstract class AuthProvider {
  /// Sign in with email and password.
  Future<AuthResult> signInWithEmail(String email, String password);

  /// Create a new account with email and password.
  Future<AuthResult> signUp(String email, String password);

  /// Sign in with Apple.
  Future<AuthResult> signInWithApple();

  /// Sign in with Google.
  Future<AuthResult> signInWithGoogle();

  /// Sign in with Microsoft.
  Future<AuthResult> signInWithMicrosoft();

  /// Send a password reset email.
  Future<void> sendResetEmail(String email);

  /// Confirm a reset code and set a new password.
  Future<void> confirmResetCode(String code, String newPassword);

  /// Verify a 6-digit code (e.g., email verification).
  Future<void> verifyCode(String code);

  /// Sign out the current user.
  Future<void> signOut();

  /// Stream of authentication state changes.
  Stream<AuthState> get authStateChanges;
}

State Management

AuthController extends ChangeNotifier and manages the flow navigation state machine. It tracks which screen is active, handles loading states during async operations, and propagates errors from the provider.

final auth = AuthController(authProvider: MockAuthProvider());

// Current screen in the flow
auth.currentScreen;   // AuthScreen enum

// Loading and error state
auth.isLoading;       // bool
auth.error;           // String?

// Navigate between screens
auth.goToEmailEntry();
auth.goToForgotPassword();
auth.goBack();

Usage

final auth = AuthController(authProvider: MockAuthProvider());

AuthFlowScreen(
  controller: auth,
  config: AuthFlowConfig(
    showApple: true,
    showGoogle: true,
    taglines: ['Write code faster', 'Debug smarter'],
  ),
)