kids_auth 1.0.1

A delightful, child-friendly Flutter authentication package featuring login, registration, forgot password, and password reset screens, plus managed auth flows, backend adapters, and large accessible [...]

kids_auth 🚀

A delightful, child-friendly Flutter authentication package with animated mascot, vibrant themes, and fully customisable screens for:

• ✅ Login (email + password, remember me, forgot password link)
• ✅ Register (email + password + confirm password + success state)
• ✅ Forgot Password (sends magic reset link)
• ✅ Reset Password (new password + confirm, strength meter)
• ✅ Logout (button widget + example home screen)
• ✅ Managed auth flow with KidsAuthFlow
• ✅ Backend adapter layer with KidsAuthConnectedFlow
• ✅ Persistence hooks for remembered email state
• ✅ Terms & Conditions / Privacy Policy links on login and registration
• ✅ Custom Icons — drawn with CustomPainter, zero font/asset dependencies
• ✅ Animated Mascot — blinking, wobbling character that reacts to screen state
• ✅ 5 built-in themes — Default, Candy, Ocean, Jungle, Space + fully customisable

---

Screenshots

Login	Forgot Password	Reset Password
Colorful card with mascot	Magic link flow	Password strength meter

---

Getting Started

1. Add to pubspec.yaml

dependencies:
  kids_auth: ^1.0.1

2. Import

import 'package:kids_auth/kids_auth.dart';

3. Use a screen

KidsLoginScreen(
  onLogin: (email, password) async {
    // Call your auth backend — throw to show an error
    await myAuthService.login(email, password);
  },
  onSendResetLink: (email) async {
    await myAuthService.sendResetLink(email);
  },
  onRegisterSubmit: (email, password) async {
    await myAuthService.register(email, password);
  },
  onLoginSuccess: () {
    Navigator.pushReplacementNamed(context, '/home');
  },
)

That's it! The screen handles validation, loading states, and error display.

When you use KidsLoginScreen by itself, wire onSendResetLink and onRegisterSubmit if you want the built-in forgot-password and registration routes to appear. The package now hides those entry points unless they lead to real handlers.

4. Or use the connected flow

KidsAuthConnectedFlow(
  adapter: myAuthAdapter,
  persistenceStore: myPersistenceStore,
  onLoginSuccess: () {
    Navigator.pushReplacementNamed(context, '/home');
  },
)

This gives you package-managed login, registration, forgot-password, reset-password, remembered email hydration, and legal-link support in one widget.

Local package development

If you are working on the package itself:

flutter pub get
flutter analyze
flutter test

To run the demo app:

cd example
flutter pub get
flutter run

---

Themes

// Built-in themes
KidsAuthTheme()           // Default — purple + pink
KidsAuthTheme.candy()     // Hot pink + purple
KidsAuthTheme.ocean()     // Aqua + deep blue
KidsAuthTheme.jungle()    // Green + orange
KidsAuthTheme.space()     // Dark navy + neon purple

// Custom theme
KidsAuthTheme(
  primaryColor: Colors.teal,
  secondaryColor: Colors.orange,
  accentColor: Colors.yellow,
  backgroundGradient: [Colors.teal.shade50, Colors.orange.shade50],
  borderRadius: 24,
  titleFontSize: 30,
)

---

Configuration

KidsAuthConfig(
  appName: 'StarKids',
  appTagline: 'Learning is fun!',
  loginButtonLabel: 'Let\'s Go! 🚀',
  registerButtonLabel: 'Create Account 🌟',
  registerSuccessTitle: 'You\'re All Set! 🎉',
  minPasswordLength: 8,
  showRememberMe: true,
  showCharacter: true,
  allowPasswordToggle: true,
  termsOfServiceLabel: 'Terms of Service',
  privacyPolicyLabel: 'Privacy Policy',
  // Override any label or validation message
  emailRequiredMessage: 'Oops! We need your email 📧',
)

---

Connected Flow

KidsAuthFlow

Use KidsAuthFlow when you want the package to manage navigation between the built-in auth screens while you still provide the async handlers:

KidsAuthFlow(
  onLogin: (email, password) async { /* login */ },
  onRegister: (email, password) async { /* create account */ },
  onSendResetLink: (email) async { /* forgot password */ },
  onResetPassword: (password, token) async { /* reset password */ },
  onTermsOfServiceTap: () => _openTerms(context),
  onPrivacyPolicyTap: () => _openPrivacy(context),
)

KidsAuthConnectedFlow

Use KidsAuthConnectedFlow when you want the package to wire your backend adapter and remembered-login persistence for you:

class FirebaseKidsAuthAdapter implements KidsAuthAdapter {
  @override
  Future<void> login(String email, String password) {
    return FirebaseAuth.instance.signInWithEmailAndPassword(
      email: email,
      password: password,
    );
  }

  @override
  Future<void> register(String email, String password) {
    return FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: email,
      password: password,
    );
  }

  @override
  Future<void> sendResetLink(String email) {
    return FirebaseAuth.instance.sendPasswordResetEmail(email: email);
  }

  @override
  Future<void> resetPassword(String newPassword, String? resetToken) {
    return FirebaseAuth.instance.confirmPasswordReset(
      code: resetToken!,
      newPassword: newPassword,
    );
  }
}

---

All Screens

KidsLoginScreen

KidsLoginScreen(
  theme: KidsAuthTheme.candy(),
  config: KidsAuthConfig(appName: 'CandyLearn'),
  initialEmail: '[e-mail]',
  initialRememberMe: true,
  onLogin: (email, password) async { /* your logic */ },
  onForgotPassword: () { /* custom navigation or null for default */ },
  onTermsOfServiceTap: () { /* open legal page */ },
  onPrivacyPolicyTap: () { /* open privacy page */ },
  onLoginSuccess: () { /* navigate to home */ },
)

KidsForgotPasswordScreen

KidsForgotPasswordScreen(
  theme: KidsAuthTheme.ocean(),
  onSendResetLink: (email) async {
    await FirebaseAuth.instance.sendPasswordResetEmail(email: email);
  },
  onSuccess: () { /* show success dialog or navigate */ },
  onBackToLogin: () { Navigator.pop(context); },
)

KidsRegisterScreen

KidsRegisterScreen(
  theme: KidsAuthTheme.candy(),
  config: KidsAuthConfig(appName: 'CandyLearn'),
  onRegister: (email, password) async {
    await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: email,
      password: password,
    );
  },
  onRegisterSuccess: () { Navigator.pushReplacementNamed(context, '/login'); },
  onBackToLogin: () { Navigator.pop(context); },
)

KidsResetPasswordScreen

KidsResetPasswordScreen(
  theme: KidsAuthTheme.jungle(),
  resetToken: oobCode,  // from Firebase deep link
  onResetPassword: (newPassword, token) async {
    await FirebaseAuth.instance.confirmPasswordReset(
      code: token!,
      newPassword: newPassword,
    );
  },
  onSuccess: () { Navigator.pushReplacementNamed(context, '/login'); },
)

Logout Button

KidsAuthButton(
  label: 'Log Out',
  theme: KidsAuthTheme(),
  isSecondary: true,
  onPressed: () async {
    await FirebaseAuth.instance.signOut();
  },
  leading: KidsAuthIcon(
    type: KidsAuthIconType.logout,
    size: 22,
    color: theme.primaryColor,
  ),
)

---

Icons

All icons are drawn with CustomPainter — no external fonts or assets required.

KidsAuthIcon(type: KidsAuthIconType.rocket, size: 32, color: Colors.purple)

Available icons: star, rocket, key, lock, unlock, email, eye, eyeOff, checkCircle, errorCircle, arrowBack, logout, magic

---

Character Moods

KidsCharacterAvatar(
  theme: KidsAuthTheme(),
  size: 100,
  mood: KidsCharacterMood.happy,    // default
  // also: .thinking, .surprised, .success
)

---

Individual Widgets

You can use any widget from the package independently:

Widget	Purpose
KidsAuthTextField	Animated, bouncy text input with focus effects
KidsAuthButton	Scale-on-press button with gradient + loading state
KidsAuthIcon	CustomPainter icons — no assets needed
KidsCharacterAvatar	Blinking, wobbling animated mascot

---

Firebase Auth — Full Example

import 'package:firebase_auth/firebase_auth.dart';
import 'package:kids_auth/kids_auth.dart';

class AuthGate extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (snapshot.hasData) return const HomeScreen();
        return KidsLoginScreen(
          theme: KidsAuthTheme.space(),
          config: const KidsAuthConfig(appName: 'SpaceKids 🚀'),
          onLogin: (email, password) async {
            await FirebaseAuth.instance.signInWithEmailAndPassword(
              email: email, password: password,
            );
          },
        );
      },
    );
  }
}

---

Accessibility

• All interactive elements meet WCAG 2.1 minimum touch target size (48 × 48 dp)
• Large, bold fonts throughout
• High-contrast error states
• Semantics labels on custom painted icons are applied automatically
• Login legal links are exposed as real tappable buttons rather than paint-only text
• Register screen uses the same large controls and legal-link affordances as login
• Legal copy only shows links that actually have callbacks, so the UI doesn’t expose dead actions

---

Project Structure

lib/
  kids_auth.dart
  src/
    adapters/
    flow/
example/
  lib/main.dart
test/
  kids_auth_test.dart

---

License

MIT © 2024 — see LICENSE