Getting Started with Flutter + Firebase Authentication

Short guide: sign in with email & password.

Introduction

Authentication is one of the most common features in mobile apps. With Firebase, Flutter developers can quickly implement secure login systems. In this guide, we’ll walk through setting up email and password authentication using Firebase in Flutter.


Step 1: Add Firebase to Your Flutter Project

  1. Create a Firebase project at Firebase Console.
  2. Register your iOS/Android app and download the google-services.json (Android) or GoogleService-Info.plist (iOS).
  3. Add the Firebase SDK dependencies in your pubspec.yaml:
dependencies:
  firebase_core: ^3.0.0
  firebase_auth: ^5.0.0
  1. Initialize Firebase in main.dart:
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

Step 2: Implement Authentication Methods

import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  // Sign up with email & password
  Future<User?> signUp(String email, String password) async {
    final userCredential = await _auth.createUserWithEmailAndPassword(
      email: email,
      password: password,
    );
    return userCredential.user;
  }

  // Sign in with email & password
  Future<User?> signIn(String email, String password) async {
    final userCredential = await _auth.signInWithEmailAndPassword(
      email: email,
      password: password,
    );
    return userCredential.user;
  }

  // Sign out
  Future<void> signOut() async {
    await _auth.signOut();
  }
}

Step 3: Simple UI for Login

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final emailController = TextEditingController();
  final passwordController = TextEditingController();
  final authService = AuthService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Login")),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(controller: emailController, decoration: const InputDecoration(labelText: "Email")),
            TextField(controller: passwordController, decoration: const InputDecoration(labelText: "Password"), obscureText: true),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                await authService.signIn(emailController.text, passwordController.text);
              },
              child: const Text("Sign In"),
            )
          ],
        ),
      ),
    );
  }
}

Conclusion

With just a few lines of code, you’ve set up Firebase Authentication in Flutter. From here, you can extend authentication with Google, Facebook, or phone number logins.


Posted

in

,

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *