Membuat Halaman Login dengan Email dan Sandi pada Firebase Authentication

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada tutorial sebelumnya kita telah belajar Cara Melakukan Sign Up dengan Email dan Sandi pada Firebase Authentication. Selanjutnya kita akan membuat halaman login untuk user yang telah mendaftarkan akunnya menggunakan alamat email dan kata sandi.

Firebase menyediakan banyak sekali fitur untuk keperluan development aplikasi yang akan kita buat, khusunya pada autentikasi, pada postingan sebelumnya saya sudah membahas beberapa tutorial mengenai firebase Authentication, seperti login menggunakan akun Google, Twitter, Facebook dan juga Nomor Telepon, materinya bisa kalian lihat pada link dibawah ini.

Materi lainnya yang direkomendasikan:

• Cara Autentikasi Menggunakan Nomor Telepon pada Firebase
• Cara Autentikasi Menggunakan Akun Facebook pada Firebase
• Cara Autentikasi Menggunakan Akun Twitter pada Firebase
• Cara Autentikasi Menggunakan Akun Google pada Firebase

Saya sarankan sebelum kalian mengikuti tutorial ini, ikuti tutorial yang saya berikan sebelumnya, karena project merupakan lanjutan dari project yang telah dibuat pada tutorial sebelumnya mengenai sistem sign in pada Firebase Authentication.

Membuat Halaman Login dengan Email dan Sandi pada Firebase Authentication

1) Pertama kita akan membuat activity baru bernama MainActivity, class ini digunakan sebagai halaman utama jika user berhasil login / masuk mengunakan email dan kata sandi mereka.

<?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:gravity="center"
    android:orientation="vertical"
    tools:context="cianjur.developer.net.firebaseexample.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Selamat Datang"
        android:textAlignment="center"
        android:textSize="18sp"
        android:textStyle="bold"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/logout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Logout"
        tools:ignore="HardcodedText" />
    
</LinearLayout>

Pada activity tersebut kita cukup menambahkan TextView dan Button saja, Button tersebut digunakan untuk Logout / Keluar.

2) Selanjutnya buka class LoginActivity.java, untuk membuat sistem login dengan email dan kata sandi, kita cukup menggunakan fungsi signInWithEmailAndPassword() bawaan dari Firebase Authentication.

package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.support.annotation.NonNull;
import android.support.design.widget.TextInputEditText;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;

public class LoginActivity extends AppCompatActivity implements View.OnClickListener{

    //Deklarasi Variable
    private Button Register, Login;
    private TextInputEditText myEmail, myPassword;
    private ProgressBar progressBar;
    private FirebaseAuth auth;
    private FirebaseAuth.AuthStateListener listener;
    private String getEmail, getPassword;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

        //Inisialisasi Widget
        myEmail = findViewById(R.id.getEmail);
        myPassword = findViewById(R.id.getPassword);
        Register = findViewById(R.id.register);
        Register.setOnClickListener(this);
        Login = findViewById(R.id.login);
        Login.setOnClickListener(this);
        progressBar = findViewById(R.id.progressBar);
        progressBar.setVisibility(View.GONE);

        //Menyembunyikan / Hide Password
        myPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());

        //Instance / Membuat Objek Firebase Authentication
        auth = FirebaseAuth.getInstance();

        //Mengecek Keberadaan User
        listener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {

                //Mengecek apakah ada user yang sudah login / belum logout
                FirebaseUser user = firebaseAuth.getCurrentUser();
                if(user != null){
                    //Jika ada, maka halaman akan langsung berpidah pada MainActivity
                    startActivity(new Intent(LoginActivity.this, MainActivity.class));
                    finish();
                }
            }
        };
    }

    //Menerapkan Listener
    @Override
    protected void onStart() {
        super.onStart();
        auth.addAuthStateListener(listener);
    }

    //Melepaskan Litener
    @Override
    protected void onStop() {
        super.onStop();
        if(listener != null){
            auth.removeAuthStateListener(listener);
        }
    }

    //Method ini digunakan untuk proses autentikasi user menggunakan email dan kata sandi
    private void loginUserAccount(){
        auth.signInWithEmailAndPassword(getEmail, getPassword)
                .addOnCompleteListener(new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {

                        //Mengecek status keberhasilan saat login
                        if(task.isSuccessful()){
                            Toast.makeText(LoginActivity.this, "Login Success", Toast.LENGTH_SHORT).show();
                        }else {
                            Toast.makeText(LoginActivity.this, "Tidak Dapat Masuk, Silakan Coba Lagi", Toast.LENGTH_SHORT).show();
                            progressBar.setVisibility(View.GONE);
                        }
                    }
                });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){

            case R.id.register:
                startActivity(new Intent(LoginActivity.this, RegisterActivity.class));
                break;

            case R.id.login:
                //Mendapatkan dat yang diinputkan User
                getEmail = myEmail.getText().toString();
                getPassword = myPassword.getText().toString();

                //Mengecek apakah email dan sandi kosong atau tidak
                if(TextUtils.isEmpty(getEmail) || TextUtils.isEmpty(getPassword)){
                    Toast.makeText(this, "Email atau Sandi Tidak Boleh Kosong", Toast.LENGTH_SHORT).show();
                }else{
                    loginUserAccount();
                    progressBar.setVisibility(View.VISIBLE);
                }
                break;
        }
    }
}

3) Buka class MainActivity.java, untuk membuat sistem logout / keluar, kita cukup menggunakan fungsi signOut(); fungsi tersebut akan kita implementasikan pada Button. Lalu menambahkan Listenet untuk memeriksa apakah user telah logout / keluar, jika ya, maka akan langsung berpindah pada halaman Login.

package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;

public class MainActivity extends AppCompatActivity {

    //Deklarasi Variable
    private FirebaseAuth.AuthStateListener authListener;
    private FirebaseAuth auth;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button Logout = findViewById(R.id.logout);

        //Instance Firebasee Auth
        auth = FirebaseAuth.getInstance();

        //Menambahkan Listener untuk mengecek apakah user telah logout / keluar
        authListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {

                //Jika Iya atau Null, maka akan berpindah pada halaman Login
                FirebaseUser user = firebaseAuth.getCurrentUser();
                if (user == null) {
                    Toast.makeText(MainActivity.this, "Logout Success", Toast.LENGTH_SHORT).show();
                    startActivity(new Intent(MainActivity.this, LoginActivity.class));
                    finish();
                }
            }
        };

        Logout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Fungsi untuk logout
                auth.signOut();
            }
        });
    }

    //Menerapkan Listener
    @Override
    protected void onStart() {
        super.onStart();
        auth.addAuthStateListener(authListener);
    }

    //Melepaskan Litener
    @Override
    protected void onStop() {
        super.onStop();
        if(authListener != null){
            auth.removeAuthStateListener(authListener);
        }
    }
}

Demo:

Setelah kita membuat sistem Sign In dan Sign Up, lalu bagaimana cara merubah kata sandi emali dari User tersebut, tutorialnya dapat kalian lihat disini.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.