Tutorial Membuat Sistem Login dan Register Backend Menggunakan Flutter 2024

 Login dan Register Backend Menggunakan Flutter

Berikut adalah tutorial untuk membuat sistem login dan register backend menggunakan Flutter. Dalam contoh ini, backend akan dibangun menggunakan Firebase Authentication untuk otentikasi. Firebase adalah pilihan populer untuk otentikasi karena mudah diintegrasikan dengan Flutter dan menyediakan keamanan yang baik.

1. Persiapan Proyek Flutter

1. Buat Proyek Flutter Baru: Buka terminal dan buat proyek baru dengan perintah:

   bash
   
   flutter create login_register_demo

2. Tambah Dependency Firebase: Buka file pubspec.yaml dan tambahkan beberapa dependency Firebase:

   yaml
   
   dependencies:
     firebase_core: latest_version
     firebase_auth: latest_version
     provider: latest_version # Untuk state management
   

3. Install Dependencies: Jalankan perintah berikut di terminal untuk menginstall dependency:

   bash
   
   flutter pub get
   

2. Konfigurasi Firebase Project

1. Buat Project di Firebase Console:

   • Masuk ke Firebase Console.
   • Buat project baru dan ikuti langkah-langkahnya.

2. Tambahkan Aplikasi Android dan iOS ke Project Firebase:

   • Ikuti instruksi Firebase untuk menambahkan aplikasi Android dan iOS.
   • Download file google-services.json untuk Android dan tambahkan ke folder android/app.
   • Untuk iOS, tambahkan file GoogleService-Info.plist ke proyek iOS di Runner.

3. Inisialisasi Firebase di Flutter:

   • Buka file main.dart dan tambahkan inisialisasi Firebase di fungsi main:

     dart
     
     void main() async {
       WidgetsFlutterBinding.ensureInitialized();
       await Firebase.initializeApp();
       runApp(MyApp());
     }
     

3. Membuat UI Login dan Register

Buat dua halaman sederhana untuk login dan register.

1. Login Page: Buat file baru bernama login_page.dart dengan UI sederhana:

   dart
   
   import 'package:flutter/material.dart';
   
   class LoginPage extends StatelessWidget {
     final TextEditingController emailController = TextEditingController();
     final TextEditingController passwordController = TextEditingController();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text("Login")),
         body: Padding(
           padding: const EdgeInsets.all(16.0),
           child: Column(
             children: [
               TextField(
                 controller: emailController,
                 decoration: InputDecoration(labelText: "Email"),
               ),
               TextField(
                 controller: passwordController,
                 decoration: InputDecoration(labelText: "Password"),
                 obscureText: true,
               ),
               ElevatedButton(
                 onPressed: () {
                   // Panggil fungsi login
                 },
                 child: Text("Login"),
               ),
               TextButton(
                 onPressed: () {
                   Navigator.pushNamed(context, '/register');
                 },
                 child: Text("Belum punya akun? Register"),
               ),
             ],
           ),
         ),
       );
     }
   }
   

2. Register Page: Buat file baru bernama register_page.dart dengan UI sederhana:

   dart
   
   import 'package:flutter/material.dart';
   
   class RegisterPage extends StatelessWidget {
     final TextEditingController emailController = TextEditingController();
     final TextEditingController passwordController = TextEditingController();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text("Register")),
         body: Padding(
           padding: const EdgeInsets.all(16.0),
           child: Column(
             children: [
               TextField(
                 controller: emailController,
                 decoration: InputDecoration(labelText: "Email"),
               ),
               TextField(
                 controller: passwordController,
                 decoration: InputDecoration(labelText: "Password"),
                 obscureText: true,
               ),
               ElevatedButton(
                 onPressed: () {
                   // Panggil fungsi register
                 },
                 child: Text("Register"),
               ),
             ],
           ),
         ),
       );
     }
   }
   

4. Fungsi Login dan Register dengan Firebase Authentication

Buat file baru auth_service.dart untuk mengelola fungsi otentikasi.

dart

import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  // Fungsi login
  Future<User?> login(String email, String password) async {
    try {
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: email,
        password: password,
      );
      return userCredential.user;
    } catch (e) {
      print("Login error: $e");
      return null;
    }
  }

  // Fungsi register
  Future<User?> register(String email, String password) async {
    try {
      UserCredential userCredential = await _auth.createUserWithEmailAndPassword(
        email: email,
        password: password,
      );
      return userCredential.user;
    } catch (e) {
      print("Register error: $e");
      return null;
    }
  }

  // Fungsi logout
  Future<void> logout() async {
    await _auth.signOut();
  }
}

5. Implementasi Fungsi Login dan Register di UI

Pada login_page.dart dan register_page.dart, panggil fungsi dari AuthService.

1. LoginPage: Tambahkan fungsi loginUser di dalam LoginPage untuk memanggil fungsi login dari AuthService.

   dart
   
   void loginUser(BuildContext context) async {
     AuthService authService = AuthService();
     User? user = await authService.login(
       emailController.text.trim(),
       passwordController.text.trim(),
     );
     if (user != null) {
       // Jika login berhasil, navigasi ke halaman utama
       Navigator.pushReplacementNamed(context, '/home');
     } else {
       ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Login gagal")));
     }
   }
   

2. RegisterPage: Tambahkan fungsi registerUser di dalam RegisterPage untuk memanggil fungsi register dari AuthService.

   dart
   
   void registerUser(BuildContext context) async {
     AuthService authService = AuthService();
     User? user = await authService.register(
       emailController.text.trim(),
       passwordController.text.trim(),
     );
     if (user != null) {
       // Jika register berhasil, navigasi ke halaman utama
       Navigator.pushReplacementNamed(context, '/home');
     } else {
       ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Register gagal")));
     }
   }
   

3. Panggil Fungsi di Tombol Login dan Register: Pada ElevatedButton di login_page.dart dan register_page.dart, tambahkan pemanggilan fungsi:

   dart
   
   ElevatedButton(
     onPressed: () => loginUser(context),
     child: Text("Login"),
   )
   

   dart
   
   ElevatedButton(
     onPressed: () => registerUser(context),
     child: Text("Register"),
   )
   

6. Routing Halaman

Buka main.dart dan tambahkan routing halaman:

dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login Register Demo',
      initialRoute: '/login',
      routes: {
        '/login': (context) => LoginPage(),
        '/register': (context) => RegisterPage(),
        '/home': (context) => HomePage(), // Buat halaman utama
      },
    );
  }
}

7. Menjalankan Aplikasi

Setelah semua langkah di atas selesai, jalankan aplikasi dengan perintah:

bash

flutter run

Sekarang, Anda memiliki aplikasi Flutter dengan fitur login dan register menggunakan Firebase Authentication.