Using Firebase Authentication for User Management in Flutter

Firebase Authentication is a powerful service provided by Firebase that simplifies the process of authenticating users in your Flutter applications. It supports various authentication methods, including email/password, phone number, Google Sign-In, Facebook Login, and more. In this blog post, we’ll walk through integrating Firebase Authentication into your Flutter app for comprehensive user management.

What is Firebase Authentication?

Firebase Authentication provides backend services, easy-to-use SDKs, and UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook, and Twitter, and more. Firebase Authentication integrates tightly with other Firebase services, making it an essential part of a full-fledged Firebase app.

Why Use Firebase Authentication in Flutter?

• Ease of Use: Simplifies the authentication process with pre-built methods and UI components.
• Security: Handles secure password storage and provides security against common authentication vulnerabilities.
• Scalability: Scales automatically with your user base without requiring server-side coding for authentication.
• Multi-Platform Support: Works seamlessly across Android, iOS, and web platforms.

How to Integrate Firebase Authentication in a Flutter App

Step 1: Set Up a Firebase Project

If you haven’t already, create a new project in the Firebase console:

1. Go to the Firebase Console.
2. Click on “Add project.”
3. Enter your project name, and follow the prompts to complete the setup.

Step 2: Configure Firebase for Your Flutter App

Next, add your Flutter app to your Firebase project:

1. In the Firebase console, select your project.
2. Click the Flutter icon.
3. Follow the instructions to register your app. This includes:
   • Installing the Firebase CLI
   • Logging in with your Google account
   • Running the flutterfire configure command in your Flutter project directory.

flutterfire configure

Step 3: Add Firebase Authentication Dependencies

Add the necessary Firebase Authentication packages to your pubspec.yaml file:

dependencies:
  firebase_core: ^2.15.0
  firebase_auth: ^4.9.0

Run flutter pub get to install the dependencies.

Step 4: Initialize Firebase in Your Flutter App

In your main.dart file, initialize Firebase:

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

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',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthenticationWrapper(),
    );
  }
}

Step 5: Implement User Registration (Sign-Up)

Create a method to register new users with an email and password:

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

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  // Register with email & password
  Future registerWithEmailAndPassword(String email, String password) async {
    try {
      UserCredential result = await _auth.createUserWithEmailAndPassword(
          email: email, password: password);
      return result;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }
}

Here’s the Flutter code to implement a sign-up screen:

import 'package:flutter/material.dart';

import 'auth_service.dart'; // Ensure this import path is correct.

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State {
  final AuthService _auth = AuthService();
  final _formKey = GlobalKey();
  String email = '';
  String password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sign Up')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (val) => val == null || val.isEmpty ? 'Enter an email' : null,
                onChanged: (val) {
                  setState(() => email = val);
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (val) => val == null || val.length  password = val);
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text('Sign Up'),
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    final result = await _auth.registerWithEmailAndPassword(email, password);
                    if (result != null) {
                      // User successfully registered
                      print('User registered: ${result.user!.email}');
                      Navigator.pop(context); // Go back to the previous screen
                    } else {
                      // Error during registration
                      print('Error signing up');
                      // Display an error message to the user (you'll need to manage state for this)
                    }
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Step 6: Implement User Login (Sign-In)

Create a method to sign in existing users:

  // Sign in with email & password
  Future signInWithEmailAndPassword(String email, String password) async {
    try {
      UserCredential result = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      return result;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }
}

Flutter code for a sign-in screen:

import 'package:flutter/material.dart';

import 'auth_service.dart'; // Ensure this import path is correct.

class SignInScreen extends StatefulWidget {
  @override
  _SignInScreenState createState() => _SignInScreenState();
}

class _SignInScreenState extends State {
  final AuthService _auth = AuthService();
  final _formKey = GlobalKey();
  String email = '';
  String password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sign In')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (val) => val == null || val.isEmpty ? 'Enter an email' : null,
                onChanged: (val) {
                  setState(() => email = val);
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (val) => val == null || val.isEmpty ? 'Enter your password' : null,
                onChanged: (val) {
                  setState(() => password = val);
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text('Sign In'),
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    final result = await _auth.signInWithEmailAndPassword(email, password);
                    if (result != null) {
                      // User successfully signed in
                      print('User signed in: ${result.user!.email}');
                      // Navigate to the main app screen
                      // Replace HomeScreen with your main app screen
                      // Ensure that the route exists.
                    } else {
                      // Error during sign in
                      print('Error signing in');
                      // Display an error message to the user (you'll need to manage state for this)
                    }
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Step 7: Implement User Sign-Out

Add a method to sign out the current user:

  // Sign out
  Future signOut() async {
    try {
      await _auth.signOut();
    } catch (e) {
      print(e.toString());
    }
  }
}

Implement a button in your app that calls this function:

ElevatedButton(
  onPressed: () async {
    await AuthService().signOut();
    // Navigate to the login screen after signing out
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => SignInScreen()));
  },
  child: Text('Sign Out'),
)

Step 8: Track Authentication State

Use StreamBuilder to listen to the authentication state changes. This will help you determine whether the user is signed in or not:

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

import 'sign_in_screen.dart';
import 'home_screen.dart';

class AuthenticationWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (BuildContext context, snapshot) {
        if (snapshot.hasData) {
          return HomeScreen(); // User is signed in
        } else {
          return SignInScreen(); // User is not signed in
        }
      },
    );
  }
}

Step 9: Error Handling

Proper error handling is crucial. Catch exceptions during authentication processes and provide user-friendly error messages:

try {
  UserCredential result = await _auth.createUserWithEmailAndPassword(
      email: email, password: password);
} on FirebaseAuthException catch (e) {
  if (e.code == 'weak-password') {
    print('The password provided is too weak.');
  } else if (e.code == 'email-already-in-use') {
    print('The account already exists for that email.');
  }
} catch (e) {
  print(e);
}

Additional Authentication Methods

Google Sign-In

Add the google_sign_in package:

dependencies:
  google_sign_in: ^6.1.5

Implement the sign-in logic:

import 'package:google_sign_in/google_sign_in.dart';

// Google Sign-In
Future signInWithGoogle() async {
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
  if (googleUser != null) {
    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
    final OAuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    try {
      UserCredential result = await _auth.signInWithCredential(credential);
      return result;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }
  return null;
}

Facebook Login

Add the flutter_facebook_auth package:

dependencies:
  flutter_facebook_auth: ^5.2.0

Implement the Facebook login logic:

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// Facebook Sign-In
Future signInWithFacebook() async {
  try {
    final LoginResult result = await FacebookAuth.instance.login();
    if (result.status == LoginStatus.success) {
      final OAuthCredential credential = FacebookAuthProvider.credential(result.accessToken!.token);
      UserCredential userCredential = await _auth.signInWithCredential(credential);
      return userCredential;
    } else {
      print('Facebook login failed: ${result.status}');
      return null;
    }
  } catch (e) {
    print(e.toString());
    return null;
  }
}

Conclusion

Firebase Authentication offers a comprehensive suite of tools to manage user authentication in Flutter applications. By integrating Firebase Auth, you can easily handle user registration, login, sign-out, and more with minimal backend coding. This simplifies development, improves security, and allows you to focus on building the core features of your app.