Hallo sobat flutter, kali ini saya akan membuat sebuah projek tentang login menggunakan firebase. Apa itu firebase ? Firebase merupakan layanan dari google yang digunakan untuk mempermudah developer dalam mengembangkan aplikasi. Dengan adanya firebase kita bisa lebih fokus pada satu tujuan untuk mengembangkan aplikasi tanpa melakukan usaha yang besar. Jadi firebase ini sangat mempermudah pada developer dan usaha yang dilakukan kecil untuk mengembangkan aplikasi. Langsung saja kita ke projeknya, pertama kita buat sebuah firebase projek untuk menghubungkannya dengan projek flutter kita nih sob. Sobat semua buka firebase consolenya di link ini sob https://console.firebase.google.com/ kemudian pilih add projek, kemudian disitu sobat harus memasukkan nama projeknya, saya memberikan nama projek seperti gambar dibawah ini sob.

Kemudian jangan lupa dicentang pada bagian I confirm, setelah itu klik continue, lalu akan muncul tampilan seperti pada gambar dibawah ini.

Pada bagian enable google analytics, sobat bisa men-disable kan atau membiarkannya secara default, saya men-disable google analytics tersebut, kemudian klik create project / continue.

Jika google analytics nya di disable maka kalian hanya tinggal menunggu prosesnya aja sob, lalu kemudian klik continue. Sebelum kita melanjutkannya, kita setting dulu firebasenya ke dalam projek kita, tambahkan firebase_core di pubspec.yaml kemudian di pub get. Setelah itu kita setting untuk platform apa firebasenya, android atau ios. Disini saya hanya akan mensetting yang android. Ketika muncul tampilan seperti gambar dibawah ini, klik yang ada gambar android nya.

Setelah gambar android diklik, maka akan muncul tampilan seperti ini.

Form yang kosong itu kita isi sesuai perintah ya sob. Pertama kita harus me-register app nya yaitu dengan mengisi android package name, untuk mengetahui android package name nya itu letaknya ada di android/app/build.gradle , disitu tertera applicationId, itu yang kita copy ke form android package name tersebut. Kemudian kita isi app nicknamenya, itu terserah sobat mau diisi seperti apa nicknamenya. Kemudian disitu ada kolom untuk SHA1, itu bisa sobat isi ataupun tidak. Jika sobat ingin mengisinya maka cara mengisinya adalah sobat bisa melihat pada link berikut https://developers.google.com/android/guides/client-auth atau untuk pengguna windows bisa mengetikan perintah ini keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore, sha1 itu opsional kalian bisa menambahkannya atau tidak.

ke dalam terminal. Setelah mengetikan perintah tersebut, nanti akan dimintai password, anda bisa mengetikkan android untuk passwordnya, maka akan muncul tampilan seperti ini.

Disitu tertera SHA1 dan SHA256, kita copy SHA1 nya ke firebase console nya.

Setelah semuanya diisi, kemudian kita klik register app dan tunggu prosesnya. Setelah proses tahap pertama selesai maka kita akan diarahkan ke tahap berikutnya.

Di tahap ini kita diminta untuk mendownload google-services.json. klik download, kemudian setelah berhasil di download, pindahkan file tersebut ke dalam folder app. Setelah itu klik next dan kita akan diarahkan ke tahap berikutnya.

Pada tahap ini, kita diminta untuk menambahkan goggle services ke dalam project level build.gradle. kemudian tambahkan di dependenciesnya. Seperti gambar dibawah ini.

Kemudian tambahkan lagi google services yang ada di bagian app-level. Ini masih berada ditahap yang sama, hanya saja berbeda folder dan file.

Kemudian tambahkan apply plugin yang google services ke build.gradle yang ada di app-level. Seperti gambar dibawah ini.

Setelah ditambahkan, kemudian import firebase BoM nya ke file yang sama dibagian dependenciesnya. Seperti gambar dibawah ini.

Setelah semuanya telah ditambahkan kemudian klik next. Setelah ke tahap berikutnya maka akan diminta kembali ke console, klik button tersebut. Selesai deh sob, kita sudah mengintegrasikan projek kita dengan firebase. Nah sob, di firebase console, kita masuk ke project settings, kemudian disitu kita akan menambahkan SHA256.

Klik add fingerprint kemudian copy SHA256 yang tadi sudah kita dapat. Setelah itu klik save. Setelah itu, kita initialization firebase kita ke project yang sudah kita buat. Kemudian tambahkan kode ini ke file main.dart, seperti gambar dibawah ini.

Kita coba jalankan projek kita ke emulator atau ke hp kalian. Jika berhasil dirun, maka dibagian debug console akan memunculkan seperti gambar dibawah ini.

Nah sekarang kita coba buat file login.dart untuk melakukan proses authentication ke firebase. Pada bagian authentication di firebase console, pada tab sign-in method, pilih email dan password lalu kita aktifkan agar kita bisa menggunakan fitur tersebut, kemudian kita buat email dan passwordnya secara manual saja, hasilnya akan seperti gambar dibawah ini.

Setelah itu, pada main.dart kita bungkus materialapp dengan sebuah StreamProvider.value, fungsinya untuk memantau perubahan pada user, sebelum itu kita tambahkan dulu provider kedalam pubspec.yaml, kemudian tambahkan kode ini kedalam kodingan kalian.

Untuk bagian authservis, kita buat sebuah file authentication di projek kita kemudian buat class tersebut, nama class nya terserah sobat semua, tidak harus sama dengan saya. Pada file auth, karna kita hanya menggunakan email dan password yang sudah ada, jadi kodenya akan seperti ini.

Class AuthServis tersebut isinya adalah ketika kita melakukan login menggunakan email dan password, kita akan diarahkan kemana dan jika email dan password tersebut kosong maka akan muncul pesan error di debug console. Pada main.dart dibagian home ada class yang Namanya wrapper, kita buat file tersebut lalu tambahkan class wrapper dan kodenya akan seperti ini.

Pada class wrapper tersebut kita membuat sebuah kondisi, jika firebaseUser == null maka akan diarahkan ke login screen tapi jika dia tidak null maka akan diarahkan ke home screen. Setelah itu kalian buat login screen dan home screennya, pada bagian button di login screen tambahkan kode ini, agar si applikasinya tahu akan diarahkan kemana.

Jika kalian berhasil login maka tampilan nya akan seperti ini.

tampilan ini berbeda tergantung sobat semua buatnya seperti apa. Terimakasih telah membaca postingan ini.