How to Use Firebase Auth with Flutter

1# Install FlutterFire CLI
2dart pub global activate flutterfire_cli
3
4# Run configuration (select your Firebase project)
5flutterfire configure
6
7# Add Firebase packages to pubspec.yaml
8flutter pub add firebase_core firebase_auth

1import 'package:firebase_core/firebase_core.dart';
2import 'package:flutter/material.dart';
3import 'firebase_options.dart';
4
5void main() async {
6  WidgetsFlutterBinding.ensureInitialized();
7  await Firebase.initializeApp(
8    options: DefaultFirebaseOptions.currentPlatform,
9  );
10  runApp(const MyApp());
11}

1import 'package:firebase_auth/firebase_auth.dart';
2
3class AuthService {
4  final FirebaseAuth _auth = FirebaseAuth.instance;
5
6  Future<String?> signUp(String email, String password) async {
7    try {
8      await _auth.createUserWithEmailAndPassword(
9        email: email,
10        password: password,
11      );
12      return null; // success
13    } on FirebaseAuthException catch (e) {
14      return e.message; // return error message
15    }
16  }
17
18  Future<String?> signIn(String email, String password) async {
19    try {
20      await _auth.signInWithEmailAndPassword(
21        email: email,
22        password: password,
23      );
24      return null;
25    } on FirebaseAuthException catch (e) {
26      return e.message;
27    }
28  }
29
30  Future<void> signOut() async {
31    await _auth.signOut();
32  }
33
34  User? get currentUser => _auth.currentUser;
35}

1import 'package:firebase_auth/firebase_auth.dart';
2import 'package:flutter/material.dart';
3
4class AuthGate extends StatelessWidget {
5  const AuthGate({super.key});
6
7  @override
8  Widget build(BuildContext context) {
9    return StreamBuilder<User?>(
10      stream: FirebaseAuth.instance.authStateChanges(),
11      builder: (context, snapshot) {
12        // Show loading indicator while checking auth state
13        if (snapshot.connectionState == ConnectionState.waiting) {
14          return const Scaffold(
15            body: Center(child: CircularProgressIndicator()),
16          );
17        }
18
19        // User is signed in
20        if (snapshot.hasData) {
21          return const HomeScreen();
22        }
23
24        // User is not signed in
25        return const LoginScreen();
26      },
27    );
28  }
29}

1import 'package:google_sign_in/google_sign_in.dart';
2import 'package:firebase_auth/firebase_auth.dart';
3
4Future<String?> signInWithGoogle() async {
5  try {
6    // Trigger the Google Sign-In flow
7    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
8    if (googleUser == null) return 'Sign-in cancelled';
9
10    // Get auth details from the Google account
11    final GoogleSignInAuthentication googleAuth =
12        await googleUser.authentication;
13
14    // Create a Firebase credential
15    final credential = GoogleAuthProvider.credential(
16      accessToken: googleAuth.accessToken,
17      idToken: googleAuth.idToken,
18    );
19
20    // Sign in to Firebase with the Google credential
21    await FirebaseAuth.instance.signInWithCredential(credential);
22    return null; // success
23  } catch (e) {
24    return e.toString();
25  }
26}
27
28// Add to pubspec.yaml: google_sign_in: ^6.0.0

1import 'package:firebase_auth/firebase_auth.dart';
2import 'package:flutter/material.dart';
3
4class HomeScreen extends StatelessWidget {
5  const HomeScreen({super.key});
6
7  @override
8  Widget build(BuildContext context) {
9    final user = FirebaseAuth.instance.currentUser!;
10
11    return Scaffold(
12      appBar: AppBar(
13        title: const Text('Home'),
14        actions: [
15          IconButton(
16            icon: const Icon(Icons.logout),
17            onPressed: () => FirebaseAuth.instance.signOut(),
18          ),
19        ],
20      ),
21      body: Center(
22        child: Column(
23          mainAxisAlignment: MainAxisAlignment.center,
24          children: [
25            if (user.photoURL != null)
26              CircleAvatar(
27                backgroundImage: NetworkImage(user.photoURL!),
28                radius: 40,
29              ),
30            const SizedBox(height: 16),
31            Text('Welcome, ${user.displayName ?? user.email}'),
32            Text('UID: ${user.uid}'),
33          ],
34        ),
35      ),
36    );
37  }
38}