Sub CPMK :
- Mahasiswa dapat menjelaskan mengenai firebase database
- Mahasiswa dapat menghubungkan firebase dengan android studio
- Mahasiswa dapat membuat aplikasi android untuk autentifikasi data menggunakan firebase
Alat dan Bahan :
- Laptop atau PC dengan Spesifikasi Prosesor minimal Corei5 dan RAM 8 GB
- Android Studio
- Android Device
Langkah Praktikum :
- Buat Project baru di android studio, dengan kriteria sebagai berikut :
| Nama Project | Firebase Authentification |
| Package | studio.afandi.firebaseauthentification |
| Target & Minimal SDK | Phone and Tablet, API Level 21 |
| Tipe Activity | Empty Activity |
| Language | Kotlin |
Membuat Project Baru di Firebase
- Aplikasi yang akan kita buat menggunakan firebase sebagai database secara real-time. Oleh karena itu aga bisa menggunakan firebase, kita harus login terlebih dahulu menggunakan email gmail. Kemudian buka alamat https://console.firebase.google.com. Sehingga tampilan pada browser akan terlihat sebagai berikut :
- Klik Create Project kemudian kita akan diminta untuk mengisikan nama project. Beri nama nama project kita “FirebaseAuth” lalu klik check I accept the Firebase terms. Klik Continue untuk melanjutkan project.
- Setelah itu masuk ke Step berikutnya, terdapat permintaan untuk melakukan Enable Google Analytics. Lakukan Enable dengan cara menggeser slide bar klo klik Continue.
- Step berikutnya lakukan konfigurasi pada google analytics dengan cara chck semua check box yang tersedia untuk melakukan persetujuan. Terakhir klik tombol Create Project.
Tunggu beberapa saat sampai project selesai terbentuk
Menambahkan Firebase Pada Aplikasi Android
- Setelah itu kita akan dibawa ke halaman beranda dari project kita. Pilih logo android untuk menghubungkan dengan android studio.
- Kita akan menambahkan firebase ke aplikasi android yang akan kita bangun. Disini untuk nama package, disesuaikan dengan nama package yang kalian pakai di android studio. Disini nama package project saya adalah “studio.afandi.firebaceauthentification”. Kemudian untuk nama aplikasi sebenarnya boleh tidak diisi, tapi disini saya isi dengan nama “My Firebase Authentification”.
- Setelah kita klik Register app, maka kita akan dibawa step selanjutnya yaitu menambahkan configuration file ke android studio. Klik Download google-service.json untuk mendapatkan file konfigurasi google-service.json.
tambahkan google-service.json ke dalam android studio kita, caranya kita ganti dulu tampilan tree project kita yang tadinya android menjadi Project. Kemudian copy google-service.json dan paste kan pada direktori app. Hasilnya seperti ditunjukan gambar dibawah ini
- Berikutnya kita tambahkan SDK firebase dengan cara copy line classpath ‘com.google.gms:google-services:4.3.10’ tambahkan di dependencies yang ada di build.gradle (Project)
- Kemudian tambahkan
apply plugin 'com.google.gms.google-servicespada plugin yang ada di build.gradle (Module). Hanya karena kita menggunakan versi android terbaru, kode nya diubah menjadiid 'com.google.gms.google-services
dikarenakan kita membuat aplikasi authentifikasi, maka kita wajib menambahkan perintah implementation ‘com.google.firebase:firebase-auth:21.0.1’ di dependencies yang ada di build.gradle (Modul). Setelah selesai semuanya klik “Sync Now” untuk meninstall
- Setelah semua step kita lalui maka kita akan dibawa ke halaman dashboard yang ada di project FirebaseAuth.
Membuat Aplikasi Autentifikasi Android
Setelah kita berhasil membuat project firebase, selanjutnya kita hubungkan firebase dengan aplikasi android yang kita bangun. Aplikasi yang kita bangun dapat melakukan authentifikasi seperti sign in, register dan sign out.
- Pertama-tama kita masuk ke menu authentication yang ada di project kita. Kemudian plih Email/Password. Kita akan menggunakan email untuk register dan sign in.
Kemudian klik kita geser seek bar untuk Enable Email.
Authentication dengan email telah berhasil diaktifkan
- Setelah itu mari kita beralih ke android studio. Pertama Kita buat Activity baru dengan cara Klik New -> Activity -> Empty Activity, lalu beri nama SplashActivity. Tujuan SplashActivity adalah untuk membuat splash screen yang menampilkan logo firebase. Buka activity_splash.xml lalu tambahkan kode berikut :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
android:gravity="center"
tools:context=".SplashActivity"
tools:ignore="UseCompoundDrawables">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo_firebase"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/firebase_auth"
android:textSize="28sp"
android:textColor="@color/teal_700"
android:textStyle="bold"/>
</LinearLayout>Apabila terjadi error pada ImageView, itu terjadi karena kita belum menambahkan gambar logo_firebase. Untuk menambahkan logo, silahkan download asset kemudian masukan ke dalam direktori drawable. Sehingga direktori drawable menjadi seperti ini.
Kemudian kita isikan kode di SplashActivity untuk menambahkan logic pada halaman splash screen. Berikut kode pada SplashActivity.
class SplashActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_splash)
Handler().postDelayed({
checkAuth()
}, 2000)
}
private fun checkAuth() {
if(FirebaseAuth.getInstance().currentUser != null){
startActivity(Intent(this, MainActivity::class.java))
finish()
} else {
startActivity(Intent(this, AuthActivity::class.java))
finish()
}
}
}- Skema atau alur kerja dari aplikasi yang kita buat adalah sebagai berikut :
- Selanjutnya kita masuk ke build.gradle (Module), kemudian pada plugins tambahkan kode berikut :
plugins {
id 'com.android.application'
id 'kotlin-android'
// tambahkan perintah berikut
id 'kotlin-android-extensions'
id 'com.google.gms.google-services'
}- Selanjutnya kita buka AndroidManifest.xml, disini kita akan mengganti default activity yang pertama kali akan dibuka oleh aplikasi. Secara default aplikasi akan membuka MainActivity, tapi disini kita ganti default activity ke SplashActivity. Caranya adalah dengan memindah kode berikut ke SplashActivity.
<intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter>
Sehingga tampilan yang ada di AndroidManifest.xml menjadi seperti ini
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="studio.afandi.firebaseauthentification">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.FirebaseAuthentification">
<activity
android:name=".SplashActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:exported="false" />
</application>
</manifest>- Lanjut kita lakukan pengubahan tema android dengan cara mengubah kode di theme.xml, caranya klik res > layout > values> themes.xml. Kemudian ubah isi dari theme.xml menjadi sebagai berikut.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.FirebaseAuthentification" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/teal_700</item>
<item name="colorPrimaryVariant">@color/teal_200</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/purple_200</item>
<item name="colorSecondaryVariant">@color/purple_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>Yang perlu diperhatikan disini adalah pada tag <style> disini kita menggunakan Style NoActionBar. Itu berarti kita akan membuat sendiri ActionBar menggunakan Material Design.
- Lanjut kita tambahkan Attribute Name pada String.xml agar kita dapat menggunakan kembali string name pada layout.
<resources>
<string name="app_name">Firebase Authentification</string>
<string name="firebase_auth">Firebase Auth</string>
<string name="sign_in">Sign-In</string>
<string name="sign_up">Sign-up</string>
<string name="email">Email</string>
<string name="password">Password</string>
<string name="confirm_password">Confirm Password</string>
<string name="forgot_password">Forgot Password</string>
<string name="send_email">Send Email</string>
<string name="welcome_back">Welcome back</string>
<string name="logout">Logout</string>
</resources>- Sekarang kita buat sebuah activity baru bernama AuthActivity. Caranya Klik New -> Activity -> Empty Activity, lalu beri nama AuthActivity. Tujuan AuthActivity adalah sebagai halaman dashboard user yang ingin sign in, atau jika belum punya akun dapat memilih menu sign up. Selanjutnya buka activity_auth.xml lalu tambahkan kode berikut :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
android:gravity="center"
android:background="@drawable/bg_prepare_login"
tools:context=".AuthActivity">
<Button
android:id="@+id/btn_signin_auth"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_btn_primary"
android:layout_marginTop="40dp"
android:text="@string/sign_in"
android:textColor="@color/white"/>
<Button
android:id="@+id/btn_signup_auth"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_btn_primary"
android:layout_marginTop="20dp"
android:text="@string/sign_up"
android:textColor="@color/white"/>
</LinearLayout>- Langkah berikutnya kita buat 2 activity sekaligus yaitu SignInActivity dan SignUpActivity, Caranya Klik New -> Activity -> Empty Activity.
- Tambahkan kode kotlin berikut pada AuthActivity.
class AuthActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_auth)
btn_signin_auth.setOnClickListener {
startActivity(Intent(this, SignInActivity::class.java))
}
btn_signup_auth.setOnClickListener {
startActivity(Intent(this, SignUpActivity::class.java))
}
}
}- Tambahkan sebuah Object bernama CustomDialog yang digunakan untuk menampilkan dialog loading progress. Caranya New -> Kotlin Class/File-> Object. Kemudian isikan kode berikut.
object CustomDialog {
private var dialog: Dialog? = null
fun showLoading(activity: Activity){
val dialogView = activity.layoutInflater.inflate(R.layout.layout_progress, null, false)
dialog = Dialog(activity)
dialog?.setCancelable(false)
dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
dialog?.setContentView(dialogView)
dialog?.show()
}
fun hideLoading(){
dialog?.dismiss()
}
}apabila terjadi error, itu terjadi karena kita belum menambahkan file layout_progress.xml , tambahkan layout_progress.xml dengan cara klik kanan pada res > layout > Pilih New > Pilih Layout Resource File. Isikan dengan kode xml berikut :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
</RelativeLayout>- Sekarang kita masuk ke activity_sign_in.xml. Kita desain tampilan halaman sign in dengan cara menambahkan kode XML berikut :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="20dp"
tools:context=".SignInActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="@+id/tbSignIn"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/transparent"
android:elevation="0dp"/>
</com.google.android.material.appbar.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:text="@string/sign_in"
android:layout_marginBottom="20dp"/>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/etEmailSignIn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_edit_text"
android:hint="@string/email"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:textColor="@color/black"
android:inputType="textWebEmailAddress"
android:layout_marginBottom="20dp"/>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/teal_700"
app:hintEnabled="false"
android:gravity="center_vertical">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/etPasswordSignIn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_edit_text"
android:hint="@string/password"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:textColor="@color/black"
android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="@+id/btnForgotPass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forgot Password"
android:textAllCaps="false"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_gravity="end"
android:textColor="@color/black"
android:clickable="true"
android:focusable="true"
android:background="@drawable/bg_forgot_pass"/>
<Button
android:id="@+id/btnSignIn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_btn_primary"
android:text="Sign-In"
android:textColor="@android:color/white"/>
</LinearLayout>
</ScrollView>
</LinearLayout>- Kemudian tambahkan logic pada halaman SigInActivity dengan cara menambahkan kode berikut :
class SignInActivity : AppCompatActivity() {
private lateinit var auth : FirebaseAuth
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_sign_in)
initActionBar()
initFirebaseAuth()
btnSignIn.setOnClickListener {
val email = etEmailSignIn.text.toString().trim()
val pass = etPasswordSignIn.text.toString().trim()
if (checkValidation(email, pass)){
loginToServer(email, pass)
}
}
btnForgotPass.setOnClickListener {
startActivity(Intent(this, ForgotPasswordActivity::class.java))
}
tbSignIn.setNavigationOnClickListener {
finish()
}
}
private fun loginToServer(email: String, pass: String) {
val credential = EmailAuthProvider.getCredential(email, pass)
fireBaseAuth(credential)
}
private fun fireBaseAuth(credential: AuthCredential) {
auth.signInWithCredential(credential)
.addOnCompleteListener { task ->
CustomDialog.hideLoading()
if (task.isSuccessful) {
startActivity(Intent(this, MainActivity::class.java))
finishAffinity()
} else {
Toast.makeText(this, "Sign-In failed", Toast.LENGTH_SHORT).show()
}
}
.addOnFailureListener { exception ->
CustomDialog.hideLoading()
Toast.makeText(this, exception.message, Toast.LENGTH_SHORT).show()
}
}
private fun checkValidation(email: String, pass: String): Boolean {
if (email.isEmpty()){
etEmailSignIn.error = "Please field your email"
etEmailSignIn.requestFocus()
}else if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()){
etEmailSignIn.error = "Please use valid email"
etEmailSignIn.requestFocus()
}else if (pass.isEmpty()){
etPasswordSignIn.error = "Please field your password"
etPasswordSignIn.requestFocus()
}else{
return true
}
CustomDialog.hideLoading()
return false
}
private fun initFirebaseAuth() {
auth = FirebaseAuth.getInstance()
}
private fun initActionBar() {
setSupportActionBar(tbSignIn)
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.title = ""
}
}- Lanjut kita desain pula tampilan dari SignUpActivity, tambahkan kode berikut pada activity_sign_up.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
android:orientation="vertical"
tools:context=".SignUpActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="@+id/tbSignUp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/transparent"
android:elevation="0dp"/>
</com.google.android.material.appbar.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sign_up"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="@android:color/black"
android:layout_marginBottom="20dp"/>
<EditText
android:id="@+id/etEmailSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_edit_text"
android:hint="@string/email"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:textColor="@color/black"
android:inputType="textEmailAddress"
android:layout_marginBottom="20dp"/>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/teal_200"
app:hintEnabled="false"
android:gravity="center_vertical"
android:layout_marginBottom="20dp">
<EditText
android:id="@+id/etPasswordSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_edit_text"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:hint="@string/password"
android:textColor="@color/black"
android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/teal_200"
app:hintEnabled="false"
android:gravity="center_vertical"
android:layout_marginBottom="36dp">
<EditText
android:id="@+id/etConfirmPasswordSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_edit_text"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:textColor="@color/black"
android:hint="@string/confirm_password"
android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="@+id/btnSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_btn_primary"
android:text="@string/sign_up"
android:textColor="@android:color/white"/>
</LinearLayout>
</ScrollView>
</LinearLayout>- Tambahkan Pula Kode pada SignUpActivity, sehingga kode lengkap dari SignUpActivity menjadi seperti ini
class SignUpActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_sign_up)
initActionBar()
btnSignUp.setOnClickListener {
val email = etEmailSignUp.text.toString().trim()
val pass = etPasswordSignUp.text.toString().trim()
val confirmPass = etConfirmPasswordSignUp.text.toString().trim()
CustomDialog.showLoading(this)
if (checkValidation(email, pass, confirmPass)){
registerToServer(email, pass)
}
}
tbSignUp.setNavigationOnClickListener {
finish()
}
}
private fun registerToServer(email: String, pass: String) {
FirebaseAuth.getInstance()
.createUserWithEmailAndPassword(email, pass)
.addOnCompleteListener{task ->
CustomDialog.hideLoading()
if (task.isSuccessful){
startActivity(Intent(this, MainActivity::class.java))
finishAffinity()
}
}
.addOnFailureListener{
CustomDialog.hideLoading()
Toast.makeText(this, "Authentication failed", Toast.LENGTH_SHORT).show()
}
}
private fun checkValidation(email: String, pass: String, confirmPass: String): Boolean {
if (email.isEmpty()){
etEmailSignUp.error = "Please field your email"
etEmailSignUp.requestFocus()
}else if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()){
etEmailSignUp.error = "Please use valida email"
etEmailSignUp.requestFocus()
}else if (pass.isEmpty()){
etPasswordSignUp.error = "Please field your password"
etPasswordSignUp.requestFocus()
}else if (confirmPass.isEmpty()){
etConfirmPasswordSignUp.error = "Please field your confirm password"
etConfirmPasswordSignUp.requestFocus()
}else if (pass != confirmPass){
etPasswordSignUp.error = "Your pass didnt match"
etConfirmPasswordSignUp.error = "Your confirm pass didnt match"
etPasswordSignUp.requestFocus()
etConfirmPasswordSignUp.requestFocus()
}else{
etPasswordSignUp.error = null
etConfirmPasswordSignUp.error = null
return true
}
CustomDialog.hideLoading()
return false
}
private fun initActionBar() {
setSupportActionBar(tbSignUp)
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.title = ""
}
}- Pada sistem autentifikasi yang kita bangun terdapat fitur forgot password yang akan sangat berguna apabila kita lupa password kita. Untuk menambahkan fitur ini, silahkan buat sebuat activity baru bernama ForgotPasswordActivity. Kemudian kita buat tampilan dari ForgotPasswordActivity terlebih dahulu. Buka activity_forgot_password.xml kemudian tambahkan kode berikut.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context=".ForgotPasswordActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="@+id/tbForgotPass"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/transparent"
android:elevation="0dp"/>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/forgot_password"
android:textSize="24sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:layout_marginBottom="20dp"/>
<EditText
android:id="@+id/etEmailForgotPass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_edit_text"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:hint="@string/email"
android:layout_marginBottom="36dp"/>
<Button
android:id="@+id/btnSendEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_btn_primary"
android:text="@string/send_email"
android:textColor="@android:color/white"/>
</LinearLayout>
</LinearLayout>- Kemudian pada bagian logic kita tambahkan kode berikut pada file ForgotPasswordActivity, sebagai kode lengkapnya sebagai berikut.
class ForgotPasswordActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_forgot_password)
initActionBar()
btnSendEmail.setOnClickListener {
val email = etEmailForgotPass.text.toString().trim()
if (email.isEmpty()){
etEmailForgotPass.error = "Please field your email"
etEmailForgotPass.requestFocus()
return@setOnClickListener
}else if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()){
etEmailForgotPass.error = "Please use valid email"
etEmailForgotPass.requestFocus()
return@setOnClickListener
}else{
forgotPass(email)
}
}
tbForgotPass.setNavigationOnClickListener {
finish()
}
}
private fun forgotPass(email: String) {
FirebaseAuth.getInstance().sendPasswordResetEmail(email)
.addOnCompleteListener { task ->
if (task.isSuccessful){
Toast.makeText(this, "Your reset password has been sent to your email", Toast.LENGTH_SHORT).show()
startActivity(Intent(this, SignInActivity::class.java))
finishAffinity()
}else{
Toast.makeText(this, "Failed reset password", Toast.LENGTH_SHORT).show()
}
}
.addOnFailureListener { exception ->
Toast.makeText(this, exception.message, Toast.LENGTH_SHORT).show()
}
}
private fun initActionBar() {
setSupportActionBar(tbForgotPass)
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.title = ""
}
}- Lanjut ke sentuhan terakhir, kita desain tampilan dari MainActivity. Buka file activity_main.xml kemudian isikan kode berikut :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo_home"
android:layout_marginTop="40dp"
android:layout_marginBottom="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/welcome_back"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@color/teal_700"
android:layout_marginBottom="20dp"/>
<TextView
android:id="@+id/tvEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/email"
android:textColor="@android:color/black"
android:textStyle="bold"
android:textSize="28sp"/>
</LinearLayout>
<Button
android:id="@+id/btnLogout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/bg_btn_logout"
android:text="@string/logout"
android:textColor="@android:color/white" />
</RelativeLayout>- Terakhir tambahkan kode berikut pada MainActivity sehingga kode lengkap dari MainActivity adalah sebagai berikut :
class MainActivity : AppCompatActivity() {
private lateinit var auth : FirebaseAuth
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initFirebaseAuth()
getData()
btnLogout.setOnClickListener {
auth.signOut()
startActivity(Intent(this, AuthActivity::class.java))
}
}
private fun getData() {
val user = auth.currentUser
if(user != null){
tvEmail.text = user.email
}
}
private fun initFirebaseAuth() {
auth = FirebaseAuth.getInstance()
}
}- Jika tidak ada yang Error, silahkan Running project dan hasilnya adalah sebagai berikut :
Notifikasi Email untuk reset password
