Membuat Aplikasi Flutter dengan Firebase untuk Autentikasi Email dan Password

Dalam artikel ini, kita akan membahas langkah-langkah membuat aplikasi Flutter yang menggunakan Firebase untuk autentikasi email dan password. Firebase menyediakan layanan backend yang mudah digunakan, termasuk autentikasi pengguna.

Langkah-langkah Implementasi

1. Persiapan Proyek Firebase

1. Buat Proyek Firebase:

— Buka [Firebase Console](https://console.firebase.google.com/).
— Klik “Add project” dan ikuti langkah-langkah untuk membuat proyek baru.

2. Tambahkan Aplikasi Android ke Firebase:

— Di Firebase Console, klik ikon Android untuk menambahkan aplikasi Android.
— Daftarkan aplikasi Anda dengan nama paket (misalnya, `com.example.yourapp`).
— Unduh file `google-services.json` dan letakkan di direktori `android/app` proyek Flutter Anda.

3. Tambahkan Aplikasi iOS ke Firebase (Opsional):

— Di Firebase Console, klik ikon iOS untuk menambahkan aplikasi iOS.
— Ikuti instruksi untuk mengunduh file `GoogleService-Info.plist` dan tambahkan ke proyek Xcode Anda.

4. Instal Firebase CLI:

Pastikan Anda telah menginstal Node.js, kemudian instal Firebase CLI:

npm install -g firebase-tools

5. Login ke Firebase:

Login ke akun Firebase Anda menggunakan Firebase CLI:

firebase login

6. Instal FlutterFire CLI:

Instal FlutterFire CLI untuk mempermudah konfigurasi Firebase di proyek Flutter Anda:

dart pub global activate flutterfire_cli

Tambahkan Dart SDK ke PATH sistem Anda jika diperlukan.

6. Inisialisasi Firebase di Proyek Flutter:

Jalankan perintah berikut di direktori proyek Flutter Anda untuk mengonfigurasi Firebase:

flutterfire configure

2. Konfigurasi Proyek Flutter

1. Tambahkan Dependency Firebase:

Buka file `pubspec.yaml` dan tambahkan dependency berikut:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.2.0
  firebase_auth: ^4.2.0

Kemudian, jalankan perintah berikut untuk menginstal dependency:

flutter pub get

2. Inisialisasi Firebase di Flutter:

Pastikan Anda menginisialisasi Firebase di file `main.dart`.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'login_page.dart';
import 'register_page.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Auth',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => LoginPage(),
        '/register': (context) => RegisterPage(),
      },
    );
  }
}

3. Membuat Halaman Login

Buat file `login_page.dart` di direktori `lib` dan tambahkan kode berikut:

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

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future<void> _login() async {
    try {
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Berhasil login!')),
      );
    } on FirebaseAuthException catch (e) {
      String message;
      if (e.code == 'user-not-found') {
        message = 'Pengguna tidak ditemukan.';
      } else if (e.code == 'wrong-password') {
        message = 'Password salah.';
      } else {
        message = 'Gagal login: $e';
      }
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(message)),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _login,
              child: Text('Login'),
            ),
            TextButton(
              onPressed: () {
                Navigator.pushNamed(context, '/register');
              },
              child: Text('Belum punya akun? Daftar'),
            ),
          ],
        ),
      ),
    );
  }
}

4. Membuat Halaman Register

Buat file `register_page.dart` di direktori `lib` dan tambahkan kode berikut:

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

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future<void> _register() async {
    try {
      UserCredential userCredential = await _auth.createUserWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Berhasil mendaftar!')),
      );
    } on FirebaseAuthException catch (e) {
      String message;
      if (e.code == 'weak-password') {
        message = 'Password terlalu lemah.';
      } else if (e.code == 'email-already-in-use') {
        message = 'Akun sudah ada untuk email tersebut.';
      } else if (e.code == 'invalid-email') {
        message = 'Alamat email tidak valid.';
      } else {
        message = 'Gagal mendaftar: $e';
      }
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(message)),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Register'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _register,
              child: Text('Daftar'),
            ),
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Sudah punya akun? Login'),
            ),
          ],
        ),
      ),
    );
  }
}

5. Jalankan Aplikasi

Jalankan aplikasi Flutter Anda untuk menguji fungsionalitas login dan registrasi email/password:

flutter pub get

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat aplikasi Flutter yang menggunakan Firebase untuk autentikasi email dan password. Pastikan semua konfigurasi di Firebase Console telah dilakukan dengan benar dan aplikasi Anda akan berfungsi tanpa masalah terkait cross-origin redirects.

Dengan demikian, Anda telah berhasil membuat aplikasi Flutter dengan Firebase untuk autentikasi email dan password. Selamat mencoba!

— -