Integrasi Firebase Auth ke Aplikasi Flutter: Panduan Lengkap untuk Pemula

Bayangkan kamu baru saja selesai membangun aplikasi Flutter yang keren. Desainnya rapi, fiturnya lengkap, tapi ada satu masalah besar: belum ada sistem login. Setiap pengguna bisa masuk tanpa identitas, data tidak aman, dan tidak ada cara untuk membedakan satu pengguna dari yang lain.

Solusi pertama yang mungkin terlintas adalah membuat sistem autentikasi sendiri, lengkap dengan database pengguna, enkripsi password, manajemen token, dan fitur reset password. Kedengarannya masuk akal, tapi kenyataannya membangun auth yang benar-benar aman dari nol itu kompleks, memakan waktu berminggu-minggu, dan rawan celah keamanan jika tidak dilakukan dengan teliti.

Di sinilah Firebase Authentication hadir sebagai solusi.

Apa itu Firebase Authentication?

Firebase Authentication adalah layanan dari Google yang menangani seluruh proses autentikasi pengguna, mulai dari registrasi, login, manajemen sesi, hingga reset password, tanpa perlu membangun infrastruktur backend sendiri. Cukup integrasikan SDK-nya ke proyek Flutter, dan sistem login yang aman sudah siap digunakan dalam hitungan jam.

Firebase Auth mendukung berbagai metode login populer, di antaranya:

• Email & password untuk metode klasik yang paling umum digunakan

• Google Sign-In untuk login satu klik menggunakan akun Google

• Nomor telepon (OTP) yang cocok untuk aplikasi yang butuh verifikasi via SMS

• Anonymous untuk pengguna yang belum mau mendaftar tapi ingin mencoba fitur aplikasi

Kenapa pakai Firebase Auth?

Selain menghemat waktu, ada beberapa alasan kuat untuk memilih Firebase Auth dibanding membangun sendiri.

Keamanan yang sudah teruji. Firebase digunakan oleh jutaan aplikasi di seluruh dunia. Standar keamanannya mengikuti praktik industri terbaik, termasuk enkripsi data dan proteksi terhadap brute force, sehingga kamu tidak perlu khawatir menangani hal-hal tersebut secara manual.

Gratis untuk skala awal. Paket gratis Firebase mendukung hingga 10.000 autentikasi per bulan, lebih dari cukup untuk aplikasi yang baru diluncurkan atau masih dalam tahap pengembangan.

Integrasi mulus dengan ekosistem Firebase. Setelah pengguna login, kamu bisa langsung menggunakan uid-nya untuk menyimpan data ke Firestore, mengatur akses ke Firebase Storage, atau mengirim notifikasi via Cloud Messaging, semuanya terhubung secara native tanpa konfigurasi tambahan.

SDK Flutter yang lengkap. Package firebase_auth untuk Flutter aktif dikembangkan dan didokumentasikan dengan baik, sehingga proses integrasi mudah diikuti bahkan oleh developer yang baru mulai belajar Flutter.

Apa yang akan kita bangun?

Di artikel ini, kamu akan belajar mengintegrasikan Firebase Authentication ke proyek Flutter dari nol hingga siap pakai, mencakup empat hal utama: setup project Firebase dan konfigurasi di Flutter, fitur registrasi dan login menggunakan email & password, fitur login dengan akun Google, serta sistem manajemen sesi agar aplikasi otomatis mendeteksi apakah pengguna sudah login atau belum.

Prasyarat

Sebelum mulai, pastikan kamu sudah memiliki Flutter SDK terinstal (versi 3.0 ke atas), pemahaman dasar Flutter seperti widget, setState, dan navigasi, akun Google untuk mengakses Firebase Console, serta editor VS Code atau Android Studio.

Kalau semua sudah siap, mari kita mulai dari langkah pertama: membuat project di Firebase Console.

Setup Firebase Console

Sebelum menulis satu baris kode pun di Flutter, kita perlu menyiapkan project di Firebase Console terlebih dahulu. Bagian ini mungkin terasa seperti pekerjaan administrasi, tapi fondasi yang benar di sini akan menghindarkan kamu dari banyak error misterius di tahap selanjutnya.

Membuat project baru di Firebase

Buka console.firebase.google.com dan login menggunakan akun Google. Klik tombol Add project, lalu ikuti tiga langkah yang muncul.

Pertama, masukkan nama project. Pilih nama yang deskriptif karena nama ini juga akan menjadi bagian dari domain default project kamu. Kedua, Firebase akan menawarkan integrasi Google Analytics. Untuk project autentikasi sederhana ini kamu bisa menonaktifkannya, tapi jika berencana melacak perilaku pengguna di kemudian hari, lebih baik aktifkan sekarang karena tidak bisa ditambahkan semudah ini nanti. Ketiga, klik Create project dan tunggu beberapa detik hingga Firebase selesai menyiapkan semua layanannya.

Setelah project siap, kamu akan diarahkan ke dashboard utama Firebase.

Mengaktifkan metode autentikasi

Di panel kiri dashboard, klik Authentication, lalu pilih tab Sign-in method. Di sinilah kamu mengontrol metode login apa saja yang diizinkan masuk ke aplikasi.

Untuk mengikuti artikel ini, aktifkan dua metode berikut. Pertama, klik Email/Password, geser toggle ke posisi aktif, lalu simpan. Kamu tidak perlu mengaktifkan opsi "Email link" di bawahnya untuk saat ini. Kedua, klik Google, aktifkan toggle-nya, pilih email support project dari dropdown yang muncul, lalu simpan.

Metode lain seperti Phone, Facebook, atau Apple bisa diaktifkan kapan saja sesuai kebutuhan aplikasi, jadi tidak perlu disentuh sekarang.

Mendaftarkan aplikasi Android

Kembali ke halaman utama project dengan klik ikon rumah di panel kiri. Di bagian tengah halaman, klik ikon Android untuk menambahkan aplikasi Android ke project Firebase.

Firebase akan meminta Android package name. Nilai ini harus persis sama dengan applicationId di file android/app/build.gradle proyekmu. Secara default Flutter menggunakan format seperti com.example.nama_aplikasi, tapi sebaiknya ganti dengan nama yang lebih spesifik sebelum ke produksi, misalnya com.tokoku.auth_app.

Kolom App nickname bersifat opsional dan hanya untuk memudahkan identifikasi di dashboard. Kolom Debug signing certificate SHA-1 wajib diisi jika kamu akan menggunakan Google Sign-In. Untuk mendapatkan nilai SHA-1, jalankan perintah berikut di terminal dari folder root proyek Flutter:

cd android && ./gradlew signingReport

Salin nilai SHA1 yang muncul di baris Variant: debug, lalu tempelkan ke kolom tersebut. Klik Register app untuk melanjutkan.

Pada langkah berikutnya, Firebase akan meminta kamu mengunduh file google-services.json. Unduh file ini dan letakkan di folder android/app/ dalam proyek Flutter. Jangan letakkan di tempat lain karena Gradle tidak akan menemukannya. Klik Next beberapa kali hingga selesai, lalu klik Continue to console.

Mendaftarkan aplikasi iOS (opsional)

Jika kamu juga menargetkan platform iOS, kembali ke dashboard dan klik ikon Apple untuk mendaftarkan aplikasi iOS. Firebase akan meminta iOS bundle ID, yang bisa kamu temukan di Xcode dengan membuka file Runner.xcworkspace lalu melihat bagian Bundle Identifier di tab General.

Setelah mengisi bundle ID dan mengklik Register app, unduh file GoogleService-Info.plist yang disediakan. Berbeda dengan Android, file ini tidak bisa diletakkan sembarang tempat. Buka Xcode, klik kanan pada folder Runner di panel kiri, pilih Add Files to Runner, lalu pilih file GoogleService-Info.plist yang baru diunduh. Pastikan opsi Copy items if needed dicentang sebelum mengklik Add.

Jika hanya menargetkan Android untuk saat ini, bagian ini bisa dilewati dan dikerjakan nanti.

Memverifikasi setup

Sebelum lanjut ke konfigurasi Flutter, pastikan tiga hal berikut sudah beres: project Firebase sudah aktif di dashboard, metode login Email/Password dan Google sudah berstatus Enabled di tab Sign-in method, dan file google-services.json sudah berada di folder android/app/. Kalau ketiganya sudah terpenuhi, kita siap masuk ke langkah berikutnya yaitu mengonfigurasi proyek Flutter agar terhubung ke Firebase project yang baru saja kita buat.

1. Dependensi di pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.24.0
  firebase_auth: ^4.15.0
  google_sign_in: ^6.2.1

Jalankan flutter pub get setelah menyimpan file ini.

2. main.dart inisialisasi Firebase

import 'package:flutter/material.dart';

import 'package:firebase_core/firebase_core.dart';

import 'auth_wrapper.dart';

void main() async {

  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Firebase Auth Demo',

      debugShowCheckedModeBanner: false,

      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),

        useMaterial3: true,

      ),

      home: const AuthWrapper(),

    );

  }

}

WidgetsFlutterBinding.ensureInitialized() wajib dipanggil sebelum Firebase.initializeApp() karena inisialisasi Firebase bersifat asynchronous dan membutuhkan binding Flutter sudah siap.

3. auth_service.dart — logika autentikasi

File ini memisahkan semua logika Firebase dari UI, mengikuti prinsip separation of concerns.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  // Stream untuk memantau perubahan status login
  Stream<User?> get authStateChanges => _auth.authStateChanges();

  // Ambil user yang sedang login
  User? get currentUser => _auth.currentUser;

  // Login dengan Google
  Future<UserCredential?> signInWithGoogle() async {
    try {
      // Munculkan dialog pilih akun Google
      final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();

      // Jika user membatalkan dialog
      if (googleUser == null) return null;

      // Ambil token autentikasi dari akun Google yang dipilih
      final GoogleSignInAuthentication googleAuth =
          await googleUser.authentication;

      // Buat credential Firebase dari token Google
      final OAuthCredential credential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );

      // Login ke Firebase menggunakan credential
      return await _auth.signInWithCredential(credential);
    } on FirebaseAuthException catch (e) {
      throw _handleFirebaseError(e);
    } catch (e) {
      throw Exception('Terjadi kesalahan saat login dengan Google.');
    }
  }

  // Logout
  Future<void> signOut() async {
    await _googleSignIn.signOut();
    await _auth.signOut();
  }

  // Menerjemahkan kode error Firebase ke pesan yang ramah pengguna
  String _handleFirebaseError(FirebaseAuthException e) {
    switch (e.code) {
      case 'account-exists-with-different-credential':
        return 'Email ini sudah terdaftar dengan metode login lain.';
      case 'invalid-credential':
        return 'Kredensial tidak valid. Silakan coba lagi.';
      case 'network-request-failed':
        return 'Tidak ada koneksi internet. Periksa jaringanmu.';
      default:
        return 'Login gagal. Silakan coba beberapa saat lagi.';
    }
  }
}

4. auth_wrapper.dart — pengalihan otomatis halaman

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'auth_service.dart';
import 'login_page.dart';
import 'home_page.dart';

class AuthWrapper extends StatelessWidget {
  const AuthWrapper({super.key});

  @override
  Widget build(BuildContext context) {
    final authService = AuthService();

    return StreamBuilder<User?>(
      stream: authService.authStateChanges,
      builder: (context, snapshot) {
        // Masih menunggu respons dari Firebase
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Scaffold(
            body: Center(child: CircularProgressIndicator()),
          );
        }

        // User sudah login, arahkan ke HomePage
        if (snapshot.hasData) {
          return const HomePage();
        }

        // User belum login, arahkan ke LoginPage
        return const LoginPage();
      },
    );
  }
}

StreamBuilder di sini adalah kunci dari manajemen sesi. Setiap kali status login berubah, baik karena user baru login maupun logout, widget ini otomatis merender ulang halaman yang sesuai tanpa perlu navigasi manual.

5. login_page.dart — halaman login

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

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final AuthService _authService = AuthService();
  bool _isLoading = false;
  String? _errorMessage;

  Future<void> _handleGoogleSignIn() async {
    setState(() {
      _isLoading = true;
      _errorMessage = null;
    });

    try {
      final result = await _authService.signInWithGoogle();

      // User membatalkan dialog pilih akun
      if (result == null) {
        setState(() => _isLoading = false);
        return;
      }

      // Login berhasil — AuthWrapper otomatis mengarahkan ke HomePage
    } catch (e) {
      setState(() {
        _errorMessage = e.toString().replaceAll('Exception: ', '');
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // Ilustrasi / logo
              const Icon(Icons.lock_outline, size: 72, color: Colors.blueAccent),
              const SizedBox(height: 32),

              // Judul
              const Text(
                'Selamat datang',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 8),
              const Text(
                'Login untuk melanjutkan',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 15, color: Colors.grey),
              ),
              const SizedBox(height: 40),

              // Pesan error
              if (_errorMessage != null) ...[
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.red.shade50,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.red.shade200),
                  ),
                  child: Text(
                    _errorMessage!,
                    style: TextStyle(color: Colors.red.shade700, fontSize: 13),
                    textAlign: TextAlign.center,
                  ),
                ),
                const SizedBox(height: 16),
              ],

              // Tombol Google Sign-In
              OutlinedButton.icon(
                onPressed: _isLoading ? null : _handleGoogleSignIn,
                icon: _isLoading
                    ? const SizedBox(
                        width: 18,
                        height: 18,
                        child: CircularProgressIndicator(strokeWidth: 2),
                      )
                    : const Icon(Icons.login, size: 20),
                label: Text(_isLoading ? 'Memproses...' : 'Masuk dengan Google'),
                style: OutlinedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(vertical: 14),
                  textStyle: const TextStyle(fontSize: 15),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

6. home_page.dart — halaman setelah login

dart

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

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final AuthService authService = AuthService();
    final User? user = authService.currentUser;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Beranda'),
        actions: [
          IconButton(
            icon: const Icon(Icons.logout),
            tooltip: 'Logout',
            onPressed: () async {
              await authService.signOut();
              // AuthWrapper otomatis mengarahkan kembali ke LoginPage
            },
          ),
        ],
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Foto profil dari Google
              if (user?.photoURL != null)
                CircleAvatar(
                  radius: 40,
                  backgroundImage: NetworkImage(user!.photoURL!),
                )
              else
                const CircleAvatar(
                  radius: 40,
                  child: Icon(Icons.person, size: 40),
                ),
              const SizedBox(height: 20),

              // Nama pengguna
              Text(
                user?.displayName ?? 'Pengguna',
                style: const TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 6),

              // Email
              Text(
                user?.email ?? '',
                style: const TextStyle(fontSize: 14, color: Colors.grey),
              ),
              const SizedBox(height: 8),

              // UID Firebase
              Text(
                'UID: ${user?.uid ?? '-'}',
                style: const TextStyle(fontSize: 11, color: Colors.grey),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Struktur file lengkap

lib/
├── main.dart
├── auth_service.dart
├── auth_wrapper.dart
├── login_page.dart
└── home_page.dart

Beberapa catatan penting sebelum menjalankan kode ini. Pastikan SHA-1 fingerprint sudah ditambahkan di Firebase Console karena Google Sign-In tidak akan berfungsi tanpa ini. File google-services.json harus ada di folder android/app/. Di iOS, URL scheme dari GoogleService-Info.plist perlu ditambahkan ke Info.plist agar redirect setelah login berjalan dengan benar.