Firebase

Firebase adalah platform pengembangan aplikasi Backend-as-a-Service (BaaS) yang menyediakan layanan backend seperti a realtime database, cloud storage, authentication, crash reporting, machine learning, remote configuration, dan file hosting.

Firebase Auth

Kita akan membuat sebuah aplikasi login dan logout menggunakan Firebase. Aplikasi ini hanya dapat berjalan di Android.

Setup Firebase Project

Buka https://console.firebase.google.com/ dan login menggunakan akun google, kemudian klik tombol Create a project.

• Pada halaman Create a project, beri nama project FirebaseAuth dan klik tombol Continue.
• Pada halaman AI assistance klik tombol Continue.
• Pada halaman Google Analytics klik tombol Continue.
• Pada halaman Configure Google Analytics, pilih Account dan klik tombol Create Project.

Add Firebase to Flutter

Berikut ini langkah-langkah untuk menggunakan Firebase di Flutter:

Install Firebase CLI

Kita bisa menginstall Firebase CLI dengan mendownload di sini https://firebase.google.com/docs/cli?authuser=0#setup_update_cli atau gunakan npm. Ketik perintah berikut ini di terminal.

npm install -g firebase-tools

Setelah berhasil menginstal firebase-tools, selanjutnya kita login ke Firebase menggunakan akun Google. Ketik perintah berikut ini di terminal.

firebase login

Berikutnya aktifkan package flutterfire_cli secara global. Ketik perintah berikut ini di terminal.

dart pub global activate flutterfire_cli

Configure your apps to use Firebase

Buat project baru dan beri nama firebase, kemudian gunakan FlutterFire CLI untuk mengonfigurasi aplikasi Flutter Anda agar terhubung ke Firebase. Ketik perintah berikut ini di terminal.

flutterfire configure

• Pilih nama project yang kita buat di Firebase console dan tekan tombol enter.

• Pilih platform (android dan web) dengan menggunakan tombol panah untuk berpindah, dan tombol spasi untuk menghilangkan centang. Kemudian tekan enter.

Initialize Firebase in your app

Dari direktori proyek Flutter, jalankan perintah berikut ini di terminal untuk menginstal core plugin:

flutter pub add firebase_core

Pada file main.dart import Firebase core plugin

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

Sesuaikan main fuction di file main.dart seperti berikut ini

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

Jalankan project.

Add Firebase Auth Package

Kita akan menggunakan package Firebase Auth untuk otentikasi. Tambahkan package Firebase Auth menggunakan perintah berikut ini pada terminal.

flutter pub add firebase_auth

Build Authentication

Buka Firebase console, klik menu Build - Authentication yang ada di sebelah kiri

• Klik tombol Get Started.
• Pada halaman Sign-in method, klik tombol Email/Password, kemudian klik tombol Enable dan klik tombol Save.

Code

Buat file auth.dart dengan kode sebagai berikut.

import "package:firebase_auth/firebase_auth.dart";

class Auth {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  User? get currentUser => _firebaseAuth.currentUser;

  Stream<User?> get authStateChanges => _firebaseAuth.authStateChanges();

  Future<void> signInWithEmailAndPassword({
    required String email,
    required String password,
  }) async {
    await _firebaseAuth.signInWithEmailAndPassword(
        email: email, password: password);
  }

  Future<void> createUserWithEmailAndPassword({
    required String email,
    required String password,
  }) async {
    await _firebaseAuth.createUserWithEmailAndPassword(
        email: email, password: password);
  }

  Future<void> signOut() async {
    await _firebaseAuth.signOut();
  }
}

Buat folder pages dan buat file login_register_page.dart

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

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  String? errorMessage = '';
  bool isLogin = true;

  final TextEditingController _controllerEmail = TextEditingController();
  final TextEditingController _controllerPassword = TextEditingController();

  Future<void> signInWithEmailAndPassword() async {
    try {
      await Auth().signInWithEmailAndPassword(
          email: _controllerEmail.text, password: _controllerPassword.text);
    } on FirebaseAuthException catch (e) {
      setState(() {
        errorMessage = e.message;
      });
    }
  }

  Future<void> createUserWithEmailAndPassword() async {
    try {
      await Auth().createUserWithEmailAndPassword(
          email: _controllerEmail.text, password: _controllerPassword.text);
    } on FirebaseAuthException catch (e) {
      setState(() {
        errorMessage = e.message;
      });
    }
  }

  Widget _title() {
    return const Text('Firebase Auth');
  }

  Widget _entryField(
      String title, TextEditingController controller, bool password) {
    return TextField(
      obscureText: password,
      controller: controller,
      decoration: InputDecoration(
        labelText: title,
      ),
    );
  }

  Widget _errorMessage() {
    return Text(errorMessage == '' ? '' : 'Humm ? $errorMessage');
  }

  Widget _submitButton() {
    return ElevatedButton(
      onPressed:
          isLogin ? signInWithEmailAndPassword : createUserWithEmailAndPassword,
      child: Text(isLogin ? 'Login' : 'Register'),
    );
  }

  Widget _loginOrRegisterButton() {
    return TextButton(
      onPressed: () {
        setState(() {
          isLogin = !isLogin;
        });
      },
      child: Text(isLogin ? 'Register' : 'Login'),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _title(),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        padding: EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _entryField('email', _controllerEmail, false),
            _entryField('password', _controllerPassword, true),
            _errorMessage(),
            _submitButton(),
            _loginOrRegisterButton(),
          ],
        ),
      ),
    );
  }
}

Buat file home_page.dart di dalam folder pages

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

class HomePage extends StatelessWidget {
  HomePage({super.key});

  final User? user = Auth().currentUser;

  Future<void> signOut() async {
    await Auth().signOut();
  }

  Widget _title() {
    return const Text('Firebase Auth');
  }

  Widget _userUid() {
    return Text(user?.email ?? 'User email');
  }

  Widget _signOutButton() {
    return ElevatedButton(
      onPressed: signOut,
      child: const Text("Sign Out"),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _title(),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _userUid(),
            _signOutButton(),
          ],
        ),
      ),
    );
  }
}

Buat file widget_tree.dart

import 'package:firebase/auth.dart';
import 'package:firebase/pages/home_page.dart';
import 'package:firebase/pages/login_register_page.dart';
import 'package:flutter/material.dart';

class WidgetTree extends StatefulWidget {
  const WidgetTree({super.key});

  @override
  State<WidgetTree> createState() => _WidgetTreeState();
}

class _WidgetTreeState extends State<WidgetTree> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: Auth().authStateChanges,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return HomePage();
          } else {
            return LoginPage();
          }
        });
  }
}

Terakhir sesuaikan file main.dart

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:firebase/widget_tree.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: const WidgetTree(),
    );
  }
}

Jalankan project.

Uji coba dengan mendaftar akun baru, jika berhasil kemudian logout. Kemudian login dengan akun yang baru terdaftar.

Untuk melihat apakah akun yang terdaftar tersebut sudah tersimpan di Firebase, buka Firebase Console, pada halaman Authentication klik menu Users.

Google Sign In

Pada Firebase Console klik menu Build - Authentication klik menu Sign-in method, klik tombol Add new provider kemudian pilih Google dan aktifkan.

• Beri nama project bebas.
• Masukkan email dan tekan tombol Save

Klik menu di Project Overview dan pilih Project Settings.

Tambahkan SHA certificate fingerprints dengan cara berikut ini:

• Untuk Windows ketikkan perintah berikut ini di terminal

keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

• Untuk Mac dan Linux ketikkan perintah berikut ini di terminal

keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

• Masukkan password android.

• Copy key SHA1 dan SHA256 secara bergantian ke Firebase Console dengan cara klik tombol Add Fingerprint.

Pada terminal project flutter, tambahkan package google_sign_in.

flutter pub add google_sign_in

Tambahkan kode berikut ini ke file auth.dart.

  Future<void> signOut() async {
    await _firebaseAuth.signOut();
    await GoogleSignIn.instance.disconnect();
  }

  Future<UserCredential?> signInWithGoogle() async {
    try {
      await GoogleSignIn.instance.initialize();
      final GoogleSignInAccount? gUser = await GoogleSignIn.instance.authenticate();
      if(gUser == null) {
        throw Exception("Google sign in aborted");
      }
      final GoogleSignInAuthentication gAuth = await gUser.authentication;
      final credential = GoogleAuthProvider.credential(
        idToken: gAuth.idToken,
      );
      return await _firebaseAuth.signInWithCredential(credential);
    } on FirebaseAuthException catch(e) {
      throw Exception(e.message);
    }
  }

Kemudian tambahkan kode berikut ini ke file login_register_page.dart setelah _loginOrRegisterButton(),

const SizedBox(
  height: 25,
),
ElevatedButton(
  onPressed: () => Auth().signInWithGoogle(),
  child: Text("Google Sign In"),
),

Hot restart project.

Uji coba dengan klik tombol Google Sign In dan login menggunakan akun google anda.