Using Firebase Authentication for User Sign-In and Sign-Up in Flutter

Firebase Authentication is a comprehensive identity solution provided by Google Firebase, enabling developers to easily implement secure and scalable user authentication systems. This blog post explores how to use Firebase Authentication to implement user sign-in and sign-up functionalities in a Flutter application.

What is Firebase Authentication?

Firebase Authentication offers backend services, SDKs, and UI libraries to authenticate users on your app. It supports authentication using passwords, phone numbers, Google, Facebook, Twitter, and more. It is easy to integrate with Flutter and provides a seamless user experience.

Why Use Firebase Authentication in Flutter?

• Ease of Implementation: Firebase provides straightforward APIs for common authentication flows.
• Multi-Platform Support: Supports Android, iOS, and web apps.
• Security: Securely handles user credentials.
• Scalability: Automatically scales with your user base.
• Integration: Seamlessly integrates with other Firebase services like Firestore and Cloud Functions.

Prerequisites

Before diving into the code, ensure you have:

• A Firebase project set up in the Firebase Console.
• A Flutter project configured to use Firebase.
• The firebase_core and firebase_auth Flutter packages added to your project’s pubspec.yaml file.

Step 1: Add Firebase Dependencies

In your pubspec.yaml file, add the necessary Firebase packages:

dependencies:
  firebase_core: ^2.15.0
  firebase_auth: ^4.6.0

Then, run flutter pub get in your terminal to install the dependencies.

Step 2: Initialize Firebase in Flutter

Initialize Firebase in your Flutter app, typically in your main.dart file:

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

import 'firebase_options.dart'; // Create this file by following Firebase instructions

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

class AuthenticationWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Add your authentication logic here to determine whether to show the sign-in/sign-up screen or the home screen
    return SignInScreen(); // Or HomeScreen() if the user is authenticated
  }
}

Step 3: Implement User Sign-Up

Create a function to handle user registration using email and password:

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

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

class _SignUpScreenState extends State {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future _signUp() async {
    try {
      final String email = _emailController.text.trim();
      final String password = _passwordController.text.trim();

      if (email.isEmpty || password.isEmpty) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Please enter email and password.')));
        return;
      }

      final UserCredential userCredential = await _auth.createUserWithEmailAndPassword(
        email: email,
        password: password,
      );

      final User? user = userCredential.user;

      if (user != null) {
        // Sign-up successful
        print('User signed up: ${user.uid}');
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => HomeScreen()),
        );
      }
    } on FirebaseAuthException catch (e) {
      // Handle Firebase Auth exceptions
      print('Firebase Auth Error: ${e.message}');
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Sign-up failed: ${e.message}')));
    } catch (e) {
      // Handle other exceptions
      print('Error during sign-up: $e');
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('An unexpected error occurred.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign Up'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _emailController,
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: InputDecoration(labelText: 'Password'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _signUp,
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}

Step 4: Implement User Sign-In

Create a function to handle user sign-in using email and password:

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

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

class _SignInScreenState extends State {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future _signIn() async {
    try {
      final String email = _emailController.text.trim();
      final String password = _passwordController.text.trim();

      if (email.isEmpty || password.isEmpty) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Please enter email and password.')));
        return;
      }

      final UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: email,
        password: password,
      );

      final User? user = userCredential.user;

      if (user != null) {
        // Sign-in successful
        print('User signed in: ${user.uid}');
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => HomeScreen()),
        );
      }
    } on FirebaseAuthException catch (e) {
      // Handle Firebase Auth exceptions
      print('Firebase Auth Error: ${e.message}');
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Sign-in failed: ${e.message}')));
    } catch (e) {
      // Handle other exceptions
      print('Error during sign-in: $e');
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('An unexpected error occurred.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign In'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _emailController,
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: InputDecoration(labelText: 'Password'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _signIn,
              child: Text('Sign In'),
            ),
          ],
        ),
      ),
    );
  }
}

Step 5: Handle User Sign-Out

Implement a function to handle user sign-out:

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

class HomeScreen extends StatelessWidget {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future _signOut(BuildContext context) async {
    try {
      await _auth.signOut();
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => SignInScreen()),
      );
    } catch (e) {
      print('Error signing out: $e');
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to sign out.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        actions: [
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () => _signOut(context),
          ),
        ],
      ),
      body: Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}

Implementing UI for Sign-Up and Sign-In

Ensure your Flutter app has appropriate UI components (like TextFields and ElevatedButtons) to interact with these functions. Implement proper error handling and UI updates based on the authentication state.

Error Handling and Security

Always handle potential exceptions, such as network issues or incorrect credentials, to provide a better user experience. Consider implementing additional security measures like email verification and password reset functionality.

Conclusion

Firebase Authentication simplifies the implementation of user sign-in and sign-up functionalities in Flutter apps. By leveraging Firebase, developers can focus on building great app features while relying on Firebase’s robust authentication infrastructure. Always handle authentication carefully to provide a secure and user-friendly experience.