Firebase adalah platform pengembangan aplikasi seluler dan web yang populer yang menyediakan berbagai layanan, termasuk otentikasi pengguna, penyimpanan cloud, database realtime, dan banyak lagi. Dalam artikel ini, kami akan menjelaskan cara menggunakan plugin Firebase resmi, firebase_core dan firebase_auth, dalam aplikasi Flutter Anda untuk mengimplementasikan otentikasi pengguna dan mengakses layanan Firebase lainnya.

Apa itu firebase_core dan firebase_auth?

• firebase_core: Ini adalah plugin inti Firebase yang diperlukan untuk menginisialisasi Firebase dalam aplikasi Flutter Anda. Ini adalah langkah pertama yang perlu Anda lakukan sebelum mengakses layanan Firebase lainnya.
• firebase_auth: Plugin ini memungkinkan Anda untuk mengimplementasikan otentikasi pengguna dalam aplikasi Anda menggunakan Firebase. Ini menyediakan berbagai metode otentikasi, seperti email dan kata sandi, Google Sign-In, Facebook Login, dan banyak lainnya.

Pastikan teman-teman sudah menginstall flutterfire-cli pada komputernya jika blum teman – teman bisa mengikuti artikel berikut bagaimana instalasi sampai bisa menggunakan flutterfirenya panduan instalasi firebase dan flutterfire cli

Gunakan perintah berikut untuk menghubungkan flutter dengan project di firebase menggunakan terminal

flutterfire configure

kemudian akan muncul opsi sebagai berikut

Kemudian pilih create new project yang berwarna hijau

setelah itu silahkan ikuti pengisian nama projectnya hingga selesai seperti berikut :

Silahkan kunjungi link berikut untuk documentasi lebih lengkapnya https://firebase.google.com/docs/flutter/setup?platform=android

setelah itu pergi ke https://console.firebase.google.com/ untuk mengelola project firebase yang sudah dibuat tadi. Setelah itu aktifkan menu auth email dan password pada firebase console

Selanjutnya kita akan membuat sebuah project authentikasi sederhana menggunakan firebase Berikut Output dari aplikasinya :

source code :

main.dart

import 'package:artikel/firebase_options.dart';
import 'package:artikel/firebaseauth/loginpage.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.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(debugShowCheckedModeBanner: false, home: LoginPage());
  }
}

loginpage.dart

import 'package:artikel/firebaseauth/homepage.dart';
import 'package:artikel/firebaseauth/registerpage.dart';
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();

  String errorMessage = '';

  Future<void> _signIn() async {
    try {
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: emailController.text,
        password: passwordController.text,
      );
      User? user = userCredential.user;
      if (user != null) {
        // Pindah ke halaman beranda atau halaman lainnya setelah login berhasil
        Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) => HomePage(user: user),
        ));
      }
    } catch (e) {
      setState(() {
        errorMessage = 'Login gagal: $e';
      });
    }
  }

  @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: [
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: _signIn,
              child: Text('Masuk'),
            ),
            Text(errorMessage, style: TextStyle(color: Colors.red)),
          ],
        ),
      ),
      bottomNavigationBar: MaterialButton(
        color: Colors.blue,
        onPressed: () {
          Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (context) => RegisterPage(),
          ));
        },
        child: Text(
          'Register',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

registerpage.dart

import 'package:artikel/firebaseauth/loginpage.dart';
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();

  String errorMessage = '';

  Future<void> _register() async {
    try {
      UserCredential userCredential =
          await _auth.createUserWithEmailAndPassword(
        email: emailController.text,
        password: passwordController.text,
      );
      User? user = userCredential.user;
      if (user != null) {
        showDialog(
          context: context,
          builder: (context) => AlertDialog(actions: [
            TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('Ok'))
          ], title: Text("Berhasil Register")),
        );
        emailController.text = "";
        passwordController.text = "";
      }
    } catch (e) {
      setState(() {
        errorMessage = 'Registrasi gagal: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Register')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: _register,
              child: Text('Daftar'),
            ),
            Text(errorMessage, style: TextStyle(color: Colors.red)),
          ],
        ),
      ),
      bottomNavigationBar: MaterialButton(
        color: Colors.blue,
        onPressed: () {
          Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (context) => LoginPage(),
          ));
        },
        child: Text(
          'Login',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

homepage.dart

import 'package:artikel/firebaseauth/loginpage.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class HomePage extends StatelessWidget {
  final User user;

  HomePage({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Selamat datang, ${user.email}!'),
            ElevatedButton(
              onPressed: () async {
                await FirebaseAuth.instance.signOut();
                Navigator.of(context).pushReplacement(MaterialPageRoute(
                  builder: (context) => LoginPage(),
                ));
              },
              child: Text('Keluar'),
            ),
          ],
        ),
      ),
    );
  }
}