Firebase Auth Login in Flutter: solved email/password exercise

Firebase Auth Login in Flutter: solved exercise

If you are looking for Firebase Auth login in Flutter, this solved exercise gives you a practical implementation pattern you can reuse in real projects.

Problem statement

Build a screen with:

  • email input
  • password input
  • authenticate user
  • show success or error feedback

Flutter solution

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final emailCtrl = TextEditingController();
  final passCtrl = TextEditingController();

  Future<void> signIn() async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: emailCtrl.text.trim(),
        password: passCtrl.text,
      );
      if (!mounted) return;
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Login successful')));
    } on FirebaseAuthException catch (e) {
      if (!mounted) return;
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Error: ${e.code}')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Firebase Login')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(controller: emailCtrl, decoration: const InputDecoration(labelText: 'Email')),
            TextField(controller: passCtrl, decoration: const InputDecoration(labelText: 'Password'), obscureText: true),
            const SizedBox(height: 12),
            ElevatedButton(onPressed: signIn, child: const Text('Sign in')),
          ],
        ),
      ),
    );
  }
}

Expected result

Users can sign in with valid credentials and get clear error messages otherwise.

Common mistakes

  • Using Auth before Firebase initialization.
  • Showing raw technical errors to users.
  • Skipping basic input validation.

Practical use

A frequent starting point for MVP apps, community products, and internal tools.

Guided practice and next step

FAQ

Is Firebase Auth production-ready?

Yes, when properly configured and monitored.

Can I combine email login with Google Sign-In?

Yes. Multi-provider auth is supported in the same project.

What should happen after successful login?

Persist session state, load profile data, and redirect to main flow.