Membuat fitur Login dengan Firebase di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat fitur login di flutter dengan firebase. Bagaimana caranya?, ayo ikuti selengkapnya di bawah ini.

Sebelumnya saya sudah membuat tutorial cara membuat fitur login dengan firebase di flutter. link: https://www.sahretech.com/2023/11/membuat-login-google-di-flutter.html Fitur ini sangat kalian butuhkan untuk membuat proses registrasi dan login menjadi lebih cepat. Sekarang kita akan belajar cara membuat login dengan email dan password yang mana datanya kita simpan di dalam firebase.

Cara Membuat Login dengan Firebase di Flutter

1. Buatlah project flutter, gunakan flutter versi 3 atau versi yang lebih baru yang sudah mendukung null safety.

2. Buat project baru di firebase melalui https://firebase.google.com. Dan hubungkan project flutter dengan firebase. Ikuti tutorialnya di link berikut ini https://www.sahretech.com/2023/10/cara-menghubungkan-flutter-dengan.html. Kalian wajib menghubungkan flutter dengan firebase, karena jika tidak maka akan terjadi error.

3. Setelah berhasil dihubungkan, kembali ke dashboard firebase kalian. Klik menu build --> Authentication --> lalu pilih tab sign-in method --> pada native providers --> pilih email/password. Perhatikan seperti gambar di bawah ini!.

Menambahkan Provider

4. Kemudian klik atau switch enable seperti gambar di bawah ini. Kemudian klik save. Sampai disini konfigurasi firebase sudah selesai. Waktunya kita ngoding!.

Menambahkan Providers

5. Masih di dalam halaman authentication. Klik tab Users --> klik tombol add user, lalu isi email dan password yang diinginkan --> lalu klik add user untuk menyimpan data.

Menambahkan User

6.. Kembali ke project flutter kalian. Lalu buka file pubspec.yaml dan tambahkan package firebase_core: ^2.23.0 dan firebase_auth: ^4.14.1 seperti gambar di bawah ini. Lalu save file untuk mengunduh package.

Menambahkan Package

7. Buka file main.dart lalu modifikasi dengan script di bawah ini.

// Import library untuk inisialisasi Firebase, pembuatan antarmuka pengguna, dan autentikasi Firebase.
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

// Import file terkait konfigurasi Firebase dan halaman utama.
import 'firebase_options.dart';
import 'home.dart';

// Fungsi utama yang dijalankan ketika aplikasi dimulai.
void main() async {
  // Pastikan inisialisasi Flutter sudah selesai sebelum menjalankan aplikasi.
  WidgetsFlutterBinding.ensureInitialized();

  // Inisialisasi Firebase dengan opsi yang sesuai dengan platform saat ini.
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // Jalankan aplikasi Flutter.
  runApp(MyApp());
}

// Kelas utama aplikasi Flutter.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // Set halaman utama aplikasi sebagai halaman login.
      home: LoginPage(),
    );
  }
}

// Kelas untuk halaman login.
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

// Kelas state untuk halaman login.
class _LoginPageState extends State<LoginPage> {
  // Instance dari FirebaseAuth untuk melakukan otentikasi.
  final FirebaseAuth _auth = FirebaseAuth.instance;

  // Controller untuk input email dan password pada form login.
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  // Fungsi untuk proses login.
  Future<void> _login() async {
    try {
      // Lakukan otentikasi dengan email dan password yang diinput.
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );

      // Arahkan pengguna ke halaman utama jika login berhasil.
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
            builder: (context) => HomePage(userCredential.user?.email ?? "")),
      );
    } catch (e) {
      // Tampilkan Snackbar jika terjadi kesalahan saat login.
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Email atau Password Anda Salah!'),
        action: SnackBarAction(
          label: 'Tutup',
          onPressed: () {
            // Aksi yang akan dijalankan saat tombol "Tutup" di Snackbar diklik.
          },
        ),
      ));
      // Cetak kesalahan pada konsol.
      print("Error: $e");
    }
  }

  // Membangun antarmuka pengguna halaman login.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Form input untuk email.
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            // Form input untuk password.
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            // Jarak antara form dan tombol login.
            SizedBox(height: 20),
            // Tombol login yang memanjang untuk memenuhi lebar layar.
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: _login,
                child: Text('Login'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

8. Buatlah sebuah file baru dengan nama home.dart lalu tambahkan script di bawah ini.

// Import library yang diperlukan untuk mengelola otentikasi Firebase dan pembuatan antarmuka pengguna Flutter.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

// Import file main.dart yang berisi definisi kelas MyApp dan kelas LoginPage.
import 'main.dart';

// Kelas untuk halaman utama setelah login.
class HomePage extends StatelessWidget {
  // Variabel untuk menyimpan alamat email pengguna yang berhasil login.
  final String userEmail;

  // Konstruktor untuk menginisialisasi alamat email pengguna.
  HomePage(this.userEmail);

  // Metode untuk membangun antarmuka pengguna halaman utama.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Bar atas aplikasi dengan judul "Home".
      appBar: AppBar(
        title: Text('Home'),
      ),
      // Tubuh utama halaman dengan konten yang ditengah.
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Menampilkan pesan selamat datang dengan nama pengguna yang berhasil login.
            Text('Selamat datang, $userEmail!'),
            // Jarak antara pesan dan tombol logout.
            SizedBox(height: 20),
            // Tombol logout yang memicu aksi sign out dan mengarahkan kembali ke halaman login.
            ElevatedButton(
              onPressed: () async {
                // Melakukan proses sign out dari Firebase.
                await FirebaseAuth.instance.signOut();
                // Mengarahkan pengguna kembali ke halaman login dan menggantikan halaman sebelumnya.
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => LoginPage()),
                );
              },
              // Label pada tombol logout.
              child: Text('Logout'),
            ),
          ],
        ),
      ),
    );
  }
}

9. Semua step sudah kita jalankan. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini. Pastikan semua step dikerjakan seperti di atas, jika terjadi error segera tanyakan langsung di kolom komentar di bawah ini.

Kalian bisa membuat tampilan yang lebih keren lagi dengan menggunakan shape dan gambar sesuai keinginan atau saya ada contoh tampilan halaman yang bisa kalian ikuti https://www.sahretech.com/2023/06/tampilan-login-flutter-simple-tapi-keren.html

Ok, sekian tutorial cara membuat fitur login dengan firebase di flutter. Semoga tutorial singkat ini bermanfaat. Jika ada kendala segera tanyakan langsung di kolom komentar di bawah ini. Sekian dan terima kasih banyak.