Learn Authentication | Firebase Integration

Firebase Authentication is a powerful and flexible authentication system that enables you to add sign-in and user management functionality to your Flutter apps. It supports multiple sign-in methods, making it easy for users to access your app using their preferred credentials. The most common sign-in methods include email and password, phone number, Google, Facebook, Apple, Twitter, and anonymous authentication. By using Firebase Authentication, you can securely manage user sessions, handle account creation and sign-in flows, and integrate with other Firebase services seamlessly. For many apps, email and password authentication is a straightforward and widely used approach, allowing users to create an account with their email address and a secure password, and then sign in with those credentials.

main.dart


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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

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

class AuthPage extends StatefulWidget {
  @override
  _AuthPageState createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  String _status = "";

  Future<void> _signUp() async {
    try {
      await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text,
      );
      setState(() {
        _status = "Sign up successful!";
      });
    } on FirebaseAuthException catch (e) {
      setState(() {
        _status = "Sign up failed: {e.message}";
      });
    }
  }

  Future<void> _signIn() async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text,
      );
      setState(() {
        _status = "Sign in successful!";
      });
    } on FirebaseAuthException catch (e) {
      setState(() {
        _status = "Sign in failed: {e.message}";
      });
    }
  }

  Future<void> _signOut() async {
    await FirebaseAuth.instance.signOut();
    setState(() {
      _status = "Signed out.";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Auth Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: "Email"),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: "Password"),
              obscureText: true,
            ),
            SizedBox(height: 16),
            Row(
              children: [
                ElevatedButton(
                  onPressed: _signUp,
                  child: Text("Sign Up"),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _signIn,
                  child: Text("Sign In"),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _signOut,
                  child: Text("Sign Out"),
                ),
              ],
            ),
            SizedBox(height: 16),
            Text(_status),
            SizedBox(height: 16),
            StreamBuilder<User?>(
              stream: FirebaseAuth.instance.authStateChanges(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.active) {
                  final user = snapshot.data;
                  if (user == null) {
                    return Text("No user signed in.");
                  } else {
                    return Text("Signed in as: {user.email}");
                  }
                }
                return CircularProgressIndicator();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Managing authentication state and user sessions is essential for a secure and user-friendly experience. In the code above, the StreamBuilder listens to FirebaseAuth.instance.authStateChanges(), which emits updates whenever the authentication state changes, such as when a user signs in, signs out, or the session expires. This allows your app to reactively update the UI based on whether a user is currently signed in or not.

When a user successfully signs up or signs in, Firebase Authentication persists the session locally, so the user remains authenticated across app restarts until they explicitly sign out or the session is otherwise invalidated. You can access the currently authenticated user at any time using FirebaseAuth.instance.currentUser. Signing out is handled by calling signOut(), which clears the user's session.

By integrating these authentication flows and state management patterns, you ensure that only authenticated users can access protected resources in your app, and you provide a seamless sign-in experience.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 1

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain how to implement email and password authentication in Flutter using Firebase?

How do I use the StreamBuilder to listen for authentication state changes in my app?

What are the best practices for managing user sessions securely with Firebase Authentication?

Swipe to show menu

main.dart


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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

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

class AuthPage extends StatefulWidget {
  @override
  _AuthPageState createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  String _status = "";

  Future<void> _signUp() async {
    try {
      await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text,
      );
      setState(() {
        _status = "Sign up successful!";
      });
    } on FirebaseAuthException catch (e) {
      setState(() {
        _status = "Sign up failed: {e.message}";
      });
    }
  }

  Future<void> _signIn() async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text,
      );
      setState(() {
        _status = "Sign in successful!";
      });
    } on FirebaseAuthException catch (e) {
      setState(() {
        _status = "Sign in failed: {e.message}";
      });
    }
  }

  Future<void> _signOut() async {
    await FirebaseAuth.instance.signOut();
    setState(() {
      _status = "Signed out.";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Auth Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: "Email"),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: "Password"),
              obscureText: true,
            ),
            SizedBox(height: 16),
            Row(
              children: [
                ElevatedButton(
                  onPressed: _signUp,
                  child: Text("Sign Up"),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _signIn,
                  child: Text("Sign In"),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _signOut,
                  child: Text("Sign Out"),
                ),
              ],
            ),
            SizedBox(height: 16),
            Text(_status),
            SizedBox(height: 16),
            StreamBuilder<User?>(
              stream: FirebaseAuth.instance.authStateChanges(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.active) {
                  final user = snapshot.data;
                  if (user == null) {
                    return Text("No user signed in.");
                  } else {
                    return Text("Signed in as: {user.email}");
                  }
                }
                return CircularProgressIndicator();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 1