Flutter Firebase Authentication Tutorial: Step-by-Step User Login & Signup Guide

Are you building a Flutter app and want to add secure user authentication? Firebase Authentication makes it super easy to handle user login, signup, and logout without building your own backend. In this guide, we’ll start by setting up Firebase using the CLI and then implement a full authentication system step by step.

Firebase Database is a cloud-based NoSQL database that allows you to store and sync data in real time across all connected devices. It’s designed to be fast, scalable, and extremely easy to integrate—especially for mobile apps built with Flutter. Unlike traditional databases, Firebase Database updates instantly whenever data changes, making it perfect for apps that require live data, such as chat applications, real-time dashboards, forums, and collaborative tools.

Have you read about the local database SQLite?

Firebase provides two types of cloud databases:

1. Realtime Database: A lightweight, tree-structured NoSQL database ideal for real-time syncing.

2. Cloud Firestore: A more advanced, flexible, and scalable document-based database.

Both databases are fully managed by Google, offer offline support in Flutter apps, and handle security through Firebase Authentication and Firestore Security Rules. This makes Firebase Database a powerful choice for developers who want to build modern apps without managing their own servers.

Step 1: Install Firebase CLI & FlutterFire CLI

Before integrating Firebase, install the required command-line tools.

Install Firebase CLI via npm (Node Package Manager):

• npm install -g firebase-tools

‘npm’ is Not Recognized; visit Issue #0

Verify installation:

• firebase –version

Install FlutterFire CLI:

• dart pub global activate flutterfire_cli

If your command line is crashing, that means Dart is not recognized; visit Issue #1

Ensure the CLI is available:

• flutterfire –version

Before stepping into Firebase database setup, first create/sign up for your Firebase account and visit the link.

Step 2: Log in to Firebase via CLI

Authenticate your Firebase account:

• firebase login

 Firebase is not recognized; visit Issue #5

Then login for FlutterFire:

• flutterfire login

 ‘flutterfire’ is Not Recognized; visit Issue #2

Both commands open a browser for Google account authentication.

Step 3: Create or Select a Firebase Project

Create a Firebase project from CLI:

• firebase projects: create my-flutter-auth –display-name “Flutter Auth Demo”

Note: If not, create a Firebase project, then create it manually on Firebase console, visit Issue #4

Or list existing projects:

• firebase projects:list

Step 4: Configure Firebase in Your Flutter Project

From your Flutter project root (Terminal):

• flutterfire configure

This step will:

• Let you select your Firebase project

• Detect your platforms (Android, iOS, Web)

• These files are generated automatically (firebase_options.dart, google-services.json, and GoogleService-Info.plist)

Step 5: Create a Flutter Project (if not already)

• flutter create firebase_auth_demo

• cd firebase_auth_demo

Ensure it flutterfire configure is run inside the project folder.

Step 6: Add Firebase Packages

Install necessary Flutter packages:

• flutter pub add firebase_core firebase_auth

• flutter pub get

firebase_core initializes Firebase, and firebase_auth handles authentication.

Step 7: Initialize Firebase in Flutter

Edit lib/main.dart:

import 'package:firebase_database_app/screens/AuthScreen.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart'; // Generated by FlutterFire CLI

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Auth Demo',
      home: AuthScreen(),
    );
  }
}

Firebase is now connected to your Flutter app!

Step 8: Create Login & Signup Screens

Login Screen Example:

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

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  Future<void> loginUser() async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text.trim(),
      );
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Login Successful!")),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Error: ${e.toString()}")),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Login")),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(controller: _emailController, decoration: InputDecoration(labelText: "Email")),
            TextField(controller: _passwordController, decoration: InputDecoration(labelText: "Password"), obscureText: true),
            SizedBox(height: 20),
            ElevatedButton(onPressed: loginUser, child: Text("Login")),
          ],
        ),
      ),
    );
  }
}

For signup, replace signInWithEmailAndPassword with createUserWithEmailAndPassword.

Step 9: Add Logout Functionality

ElevatedButton(
onPressed: () async {
await FirebaseAuth.instance.signOut();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Logged out!")));
},
child: Text("Logout"),
)

Users can now safely log out.

Step 10: Test Your App

Run on emulator or device:

• flutter run

1. Test login, signup, and logout

2. Verify users appear in Firebase Console → Authentication → Users

Step 11: Bonus Tips

1. Use form validation for email/password fields.

2. Add loading indicators while processing login/signup.

3. Enable email verification for extra security.

How to Build a Complete Flutter Authentication System with Firebase (Login, Signup, Reset Password & Dashboard)

Conclusion:

Congratulations! 🎉

You’ve successfully set up Firebase using the CLI and implemented a complete user authentication system in Flutter. Firebase makes authentication simple, fast, and secure, allowing you to focus on building awesome features in your app.

If this tutorial helped you learn something new, consider subscribing to or following the blog so you never miss upcoming guides. More deep-dive tutorials on Flutter, Firebase, UI design, and real-world app development are on the way, and trust me, you’ll want to stay tuned.

Stay curious, keep experimenting, and continue building amazing things.
See you in the next blog! 🚀✨