November 10, 2023

This tutorial demonstrates how to create a login page and authentication state of Firebase using fire_auth package.

First, import fire_auth to pubspeck.yaml.

Let’s clean up main.dart, and add StreamBuilder to listen log in state of the application. Make sure to update main function to match your Firebase’s information.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
      options: const FirebaseOptions(
          apiKey: "AIzaSyALSbJ7Ha6asdfPs2KQ6qvstqvcf4",
          authDomain: "moneytracker-e25a3.firebaseapp.com",
          projectId: "moneytracker-e25a3",
          storageBucket: "moneytracker-e25a3.appspot.com",
          messagingSenderId: "4912343949309059",
          appId: "1:4912343949309059:web:0f63f363cad342db03ae94bb6",
          measurementId: "G-3CEXCYS5DCV76"));
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Money Tracker',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (snapshot.connectionState != ConnectionState.active) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
        final User? user = snapshot.data;
        if (user != null &&
            FirebaseAuth.instance.currentUser != null &&
            FirebaseAuth.instance.currentUser!.emailVerified == true) {
          print('Logged in state');
          return Placeholder();
        } else {
          print('Logged out state');
          return Placeholder();
        }
      },
    );
  }
}