Firebase Authentication
Firebase Authentication adalah salah satu layanan back-end, fitur Android dan iOS, SDK yang mudah digunakan, dan tampilan interfaces yang siap pakai untuk mengautentikasi pengguna ke aplikasi yang kamu buat. Firebase Authentication mendukung autentikasi menggunakan nomor telepon, sandi, penyedia identitas gabungan populer seperti seperti Google, Facebook, dan sebagainya.
Dan kita akan membuat form login dan register sederhana menggunakan layanan Firebase Authentication di Project kita.
Mengaktifkan Authentication pada Firebase
Untuk mengaktifkan Layanan Authentication pada Firebase kita perlu membuka kembali Firebase Console, lalu buka menu build pada Product categories dan buka Authentication
Kita bisa memulai dengan menekan Set up sign-in method karna kita akan menentukan metode apa yang akan kita digunakan untuk autentikasi dalam project kita
Kita bisa memilih metode Email / Password karna umumnya Form Login dan register menggunakan metode Email dan Password
Kita langsung bisa mengaktifkan metode Email / Password dengan menekan switch enable dan juga Email Link kita enable kan
Kita bisa lanjut dengan menekan tombol Save.
Bila tampilannya sudah seperti ini, Berarti kita telah mengaktifkan metode Email dan Password.
Maka kita bisa melanjutkan dengan membuka Project Flutter kita, dan kita akan memulai untuk menambahkan dependensi Firebase Core dan Firebase Auth. karena project kita memakai GetX &Get CLI kita bisa langsung membuka terminal pada Aplikasi kita dan tuliskan command berikut
//dependensi awal saat kita menggunakan Firebase
get install firebase_core
//dependensi untuk menghubungkan aplikasi dengan layanan Firebase Authentication
get install firebase_auth
Bila berhasil tampilan terminal akan seperti berikut
Membuat Halaman
Login, Sign up dan Home pada umumnya memiliki halamannya masing masing, karena kita ingin membuat Login dan Sign up kita harus membuatnya terlebih dahulu.
Karena kita menggunakan Get CLI untuk membuat sebuah halaman yang lengkap beserta controllernya, kita bisa menggunakan command berikut untuk membuat sebuah halaman
get create page:nama_halamanmaka dengan command diatas kita bisa membuat halaman Login dan Sign up seperti command di atas
Halaman login
Halaman Sign up
Maka bisa kita cek dengan membuka folder lib → folder app → folder modules
Dan kita akan membuat controller dari authentication dengan menuliskan command berikut
get create controller:auth
Nama controller akan menjadi AuthController
Setelah itu kita ubah isi dari AuthController dan kita tambahkan Instance dari Firebase dan fungsi Login, Sign up dan Logout pada AuthController
import 'package:firebase_auth/firebase_auth.dart';
import 'package:get/get.dart';
class AuthController extends GetxController {
FirebaseAuth auth = FirebaseAuth.instance;
void login(){}
void signup(){}
void logout(){}
}
Dan jangan lupa untuk mengimport firebase_auth.
Setelah itu pada bagian main.dart kita akan membuat class baru dengan StatelessWidget yang kita beri nama MyApp dan dalam class kita kasih nilai pengembalian StreamBuilder karena kita akan menggunakan metode paling sederhana dari Firebase Authentication yaitu metode authStateChanges().
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final authCont = Get.put(AuthController(), permanent: true);
@override
Widget build(BuildContext context) {
return StreamBuilder<User?>(
stream: authCont.streamAuthStatus,
builder: (context, snapshot) {
print(snapshot); //mengecheck isi dari snapshot
return GetMaterialApp(
title: "Application",
initialRoute: AppPages.INITIAL,
getPages: AppPages.routes,
);
},
);
}
}
pada bagian streamAuthStatus masih terdapat error karna kita belum membuat fungsi pada AuthController. Kita tambahkan fungsi streamAuthStatus pada AuthController, kita bisa menaruh dibawah instance
Stream<User?> get streamAuthStatus => auth.authStateChanges();Layout Form Login
Karna Login pada umumnya memerlukan user input dari pengguna maka kita memerlukan Text Field pada halaman login. Tetapi sebelum membuat layout form login kita harus menetapkan layar awal pada aplikasi kita dengan menggunakan validasi pada Class MyApp di bagian initialRoute. Dan kita juga akan memberikan validasi bila datanya tidak mengeluarkan hasil maka akan menampilkan Loading Page
class MyApp extends StatelessWidget {
final authCont = Get.put(AuthController(), permanent: true);
@override
Widget build(BuildContext context) {
return StreamBuilder<User?>(
stream: authCont.streamAuthStatus,
builder: (context, snapshot) {
if(snapshot.connectionState == ConnectionState.active){
print(snapshot);
return GetMaterialApp(
title: "Application",
initialRoute: snapshot.data != null ? Routes.HOME : Routes.LOGIN,
getPages: AppPages.routes,
);
}
return LoadingView();
},
);
}
}
Karna kita memerlukan Loading Screen kita harus membuat Loading Screen Terlebih dahulu
dengan Command get create page:loading, lalu untuk bagian loading_view akan kita ubah body menggunakan CircularProgressIndicator seperti berikut :
class LoadingView extends StatelessWidget {
const LoadingView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
),
);
}
}
Dan jangan lupa untuk mengimport class LoadingView pada main.dart
Setelah itu pada file login_view.dart kita akan membuat Layout Form Login berikut kodenya
class LoginView extends GetView<LoginController> {
final authCont = Get.find<AuthController>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('LoginView'),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(25.0),
child: Column(
children: [
TextField(
controller: controller.emailCont,
decoration: InputDecoration(labelText: "Email"),
),
TextField(
controller: controller.passCont,
decoration: InputDecoration(labelText: "Password"),
),
Align(
alignment: Alignment.centerRight,
child: TextButton(onPressed: ()=>
Get.toNamed(Routes.RESET_PASSWORD), child: Text('Reset Password')),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Belum Punya Akun ?"),
TextButton(onPressed: ()=> Get.toNamed(Routes.SIGNUP), child: Text('Daftar'))
],
),
SizedBox(height: 10,),
ElevatedButton(
onPressed: (){
authCont.login(controller.emailCont.text, controller.passCont.text);
},
child: Text('Login')),
],
),
),
);
}
}
Kita membuat 2 TextField yang fungsinya untuk menginput email dan password, dan kita menggunakan TextButton untuk berpindah ke halaman Daftar, dan Elevated Button untuk Login dan akan Berpindah ke halaman Home
Karna kita belum membuat controller untuk mengontrol Input User jadi kita haru membuat TextEditingController terlebih dahulu pada file login_controller. Berikut kodenya
class LoginController extends GetxController {
TextEditingController emailCont = TextEditingController(text: "[email protected]");
TextEditingController passCont = TextEditingController(text: "miqdad123");
@override
void onClose() {
emailCont.dispose();
passCont.dispose();
super.onClose();
}
}
Login Function
Pada file login_view.dart kita masih memiliki error pada bagian Elevated Button
Terdapat error karna kita belum memberikan Code Logika pada fungsi Login di AuthController, maka kita harus memberikan validasi bila email tidak tersedia maka akan memunculkan dialog ‘Email Salah’ dan bila Email Tersedia maka akan masuk ke halaman Home maka kita menggunakan method signInWithEmailAndPassword. Berikut Code Logika pada fungsi Login
void login(String email, String password) async {
try {
await auth.signInWithEmailAndPassword(email: email, password: password);
Get.offAllNamed(Routes.HOME);
} on FirebaseException catch (e) {
if (e.code == 'user-not-found') {
print('User tidak ditemukan');
} else {
print("Password salah");
}
}
}
Setelah membuat fungsi login kita akan membuat fungsi Sign Up.
Layout Form Sign Up
Setelah kita membuat Layout Form Login berserta Fungsinya kali kita akan melanjutkan dengan membuat Layout Form Sign Up, untuk Layout Form Sign Up kita akan membuatnya sama seperti Layout Form Login karena sama sama membutuhkan Input User Email dan Password. Kita bisa menyamakan isi dari file login_view.dart ke file signup_view.dart Berikut kodenya.
class SignupView extends GetView<SignupController> {
final authCont = Get.find<AuthController>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SignUp'),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(25.0),
child: Column(
children: [
TextField(
controller: controller.emailCont,
decoration: InputDecoration(labelText: "Email"),
),
TextField(
controller: controller.passCont,
decoration: InputDecoration(labelText: "Password"),
),
Align(
alignment: Alignment.centerRight,
child: TextButton(onPressed: (){}, child: Text('Reset Password')),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Sudah Punya Akun ?"),
TextButton(onPressed: ()=> Get.toNamed(Routes.SIGNUP), child: Text('Login'))
],
),
SizedBox(height: 10,),
ElevatedButton(
onPressed: (){
authCont.signup(controller.emailCont.text, controller.passCont.text);
},
child: Text('Daftar')),
],
),
),
);
}
}
Masih terdapat merah di bagian emailCont dan passCont karena kita belum menambahkan TextEditingController pada file signup_controller.dart, untuk kode pada bagian file signup_controller.dart, kita bisa menggunakan code dari file login_controller.dart.
class SignupController extends GetxController {
TextEditingController emailCont = TextEditingController();
TextEditingController passCont = TextEditingController();
@override
void onClose() {
emailCont.dispose();
passCont.dispose();
super.onClose();
}
}Sign Up Function
Setelah itu buat fungsi sign up pada auth_controller. kita bisa menggunakan method dari Firebase yaitu createUserWithEmailAndPassword.
void signup(String email, String password) async {
try {
await auth.createUserWithEmailAndPassword(email: email, password: password);
Get.offAllNamed(Routes.HOME);
} on FirebaseAuthException catch (e) {
if (e.code == 'weak-password') {
print('The password provided is too weak.');
} else if (e.code == 'email-already-in-use') {
print('The account already exists for that email.');
}
} catch (e) {
print(e);
}
}
Setelah itu kita bisa menjalankannya dan mencoba membuat akun di halaman SignUp bila di firebase console sudah terinput emailnya maka sudah berhasil untuk membuat Akun dengan Firebase Aunthentication. Contoh bila berhasil
Logout
Bila kita berhasil untuk Login maka kita juga memerlukan Logout untuk user bisa mengeluarkan akun dari Aplikasi. Untuk tombol Logout kita bisa menaruh pada halaman home kita cukup memberikan IconButton yang mengarah pada fungsi Logout yang berada pada AuthController.
Buat variabel yang mengarah ke AuthController
final authCont = Get.find<AuthController>();
Buat IconButton pada AppBar di file home_view.dart
appBar: AppBar(
title: Text('HomeView'),
actions: [IconButton(onPressed: ()=> authCont.logout(), icon: Icon(Icons.logout))],
centerTitle: true,
),Setelah itu menambahkan code pada fungsi logout di AuthController. Fungsi Logout hanya sederhana cukup menggunakan method signOut yang telah disediakan oleh Firebase
void logout() async {
await FirebaseAuth.instance.signOut();
Get.offAllNamed(Routes.LOGIN);
}
Bila dijalankan dan berhasil menuju ke halaman Login maka telah selesai lah pembahasan kita mengenai Firebase Authentication bila dijalankan maka Hasilnya akhirnya akan seperti berikut.
Berikut Authentikasi sederhana menggunakan Firebase Authentication