Lewati ke isi

Modul Pertemuan 3: Firebase Authentication & Keamanan Navigasi

🎯 Tujuan Pembelajaran

  1. Siswa mampu mengaktifkan layanan otentikasi (Email & Google) di Firebase Console.

  2. Siswa mampu mengintegrasikan firebase_auth ke dalam fungsi login yang sudah ada.

  3. Siswa memahami cara mengamankan halaman (Route Guard) menggunakan GoRouter.

  4. Siswa mampu memecahkan masalah (Problem Solving) secara mandiri melalui pembacaan dokumentasi resmi.

1. Aktivasi Authentication di Firebase Console

Sebelum mengubah kode, kita harus memberi tahu Firebase metode login apa saja yang kita izinkan.

Langkah-langkah:

  1. Buka kembali dashboard project Firebase kalian di browser.

  2. Di menu sebelah kiri, cari bagian Build, lalu klik Authentication.

  3. Klik tombol Get Started (Mulai).

  4. Pilih tab Sign-in method (Metode login).

  5. Klik Email/Password, aktifkan toggle "Enable" (yang atas saja), lalu klik Save.

  6. Klik tombol Add new provider, pilih Google, aktifkan "Enable", masukkan email support kalian, lalu klik Save.

2. Menambahkan Package Tambahan

Buka terminal di VS Code, lalu jalankan perintah ini untuk menambahkan library yang bertugas mengurus autentikasi:

flutter pub add firebase_auth google_sign_in

3. Memodifikasi AuthProvider

Buka file lib/providers/auth_provider.dart. Kalian tidak perlu membuat fungsi baru dari nol. Kita hanya akan mengubah bagian atas (menambahkan instance Firebase) dan mengedit isi dari fungsi login yang sudah ada.

Ubah kode di AuthProvider kalian menjadi seperti ini:

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

class AuthProvider with ChangeNotifier {
  // 1. Tambahkan instance FirebaseAuth di bagian atas
  final FirebaseAuth _auth = FirebaseAuth.instance;

  User? _user;
  User? get user => _user;

  AuthProvider() {
    // 2. Pantau perubahan status login secara realtime
    _auth.authStateChanges().listen((User? currentUser) {
      _user = currentUser;
      notifyListeners(); 
    });
  }

  // 3. EDIT FUNGSI INI: Ganti isi dari fungsi login yang sudah ada
  Future<void> login(String email, String password) async {
    try {
      // Tembak data email dan password ke Firebase
      await _auth.signInWithEmailAndPassword(
        email: email, 
        password: password
      );
    } catch (e) {
      // Jika salah password/email, lemparkan error ke UI
      throw Exception('Gagal login: Periksa kembali email dan password Anda.');
    }
  }

  // Fungsi implementasi dummy lainnya (seperti register/logout) biarkan dulu...
}

4. Memodifikasi UI (Tampilan Login)

Buka file lib/screens/login_screen.dart. Kita akan menambahkan blok try-catch pada tombol aksi login.

Kita tetap mempertahankan setState(() => isLoading = true); agar animasi loading tetap berputar saat aplikasi sedang menghubungi server Firebase.

Ubah bagian onPressed pada tombol Login kalian menjadi seperti ini:

ElevatedButton(
  onPressed: () async {
    // 1. Nyalakan efek loading
    setState(() {
      isLoading = true;
    });

    try {
      // 2. Panggil fungsi login dari AuthProvider
      await context.read<AuthProvider>().login(
        emailController.text, 
        passwordController.text
      );
      // Jika berhasil, GoRouter otomatis memindahkan halaman (Route Guard)
    } catch (e) {
      // 3. Tangkap dan tampilkan pesan error jika gagal
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(e.toString()),
          backgroundColor: Colors.red,
        ),
      );
    } finally {
      // 4. Matikan efek loading apapun yang terjadi (berhasil/gagal)
      setState(() {
        isLoading = false; 
      });
    }
  },
  child: isLoading 
      ? const CircularProgressIndicator(color: Colors.white) 
      : const Text('Login'),
)

5. Proteksi Halaman (Route Guard) dengan GoRouter

Untuk memastikan orang yang belum login tidak bisa masuk ke /dashboard, kita kunci jalurnya di lib/core/routes/app_router.dart.

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

final GoRouter appRouter = GoRouter(
  initialLocation: '/', 

  // FUNGSI PENGECEKAN (REDIRECT)
  redirect: (context, state) {
    // Cek apakah ada user yang sedang login di Firebase
    final bool isLoggedIn = FirebaseAuth.instance.currentUser != null;
    final bool isGoingToLogin = state.uri.toString() == '/login';

    // Jika belum login, dan mencoba masuk ke dashboard, lempar ke login
    if (!isLoggedIn && !isGoingToLogin) return '/login';

    // Jika sudah login, tapi mencoba buka halaman login, lempar ke dashboard
    if (isLoggedIn && isGoingToLogin) return '/dashboard';

    return null;
  },

  // ... (Daftar rute GoRoute kalian di bawah sini)
);

6. 📝 TUGAS MANDIRI: Implementasi Logout & Google Sign-In

Sebagai calon Software Engineer, kalian harus terbiasa membaca dokumentasi resmi (bukan hanya menyalin kode dari tutorial).

Pada modul ini, fungsi Logout dan Login with Google belum diimplementasikan.

Tugas Kalian:

  1. Buat fitur agar tombol Logout di Dashboard berfungsi.

  2. Buat fitur agar tombol Google di halaman Login berfungsi.

Petunjuk Dokumentasi (Wajib Dibaca):

(Catatan Guru: Silakan bereksperimen, jika error silakan baca pesan error-nya di Terminal. Aplikasi yang bagus lahir dari ratusan error yang berhasil dipecahkan!)