Beranda / Authentication / Firebase

Cara Melakukan Sign Up dengan Email dan Sandi pada Firebase Authentication

Oleh Wildan M Athoillah

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada materi Firebase Authentication ini kita akan belajar bagaimana cara membuat halaman Sign Up untuk mendaftarkan user baru menggunakan Email dan Kata Sandi, dalam Firebase Authentication kita dapat membuat sistem autentikasi menggunakan alamat emali dan kata sandinya, selain itu juga kita dapat membuat sistem resigtrasi untuk mendaftarkan alamat email dan sandi dari user tersebut.


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:

Disini kita akan membuat project sederhana menggunakan Firebase Authentication untuk membuat sistem register/daftar atau Sign Up yang dapat mengizinkan pengguna untuk login/masuk menggunakan alamat email dan sandi mereka. Untuk itu mari kita simak tutorial berikut ini.

Cara Melakukan Sign Up dengan Email dan Sandi pada Firebase Authentication

1) Pertama, tambahkan Firebase kedalam Project Aplikasi,Untuk Tutorialnya kalian bisa lihat Disini

2) Buka file build.gradle (app level), masukan library berikut ini didalam dependencies kalian.
implementation 'com.google.firebase:firebase-auth:16.0.2'
3) Buka Firebase Console kalian, pada Authentication, aktifkan login dengan Email/Sandi.


Pada Link Email (login tanpa sandi) tidak perlu kita aktifkan, karena disini akan membuat sistem autentikasi login dan register.

4) Buat activity baru bernama LoginActivity, activity ini akan tampil pertama kalian pada saat aplikasi dibuka.

Untuk desain layout activity-nya, kita menggunakan widget ImageView, TextInputLayout, dan juga Button. Tapi kalian dapat menyesuaikannya sendiri.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="cianjur.developer.net.firebaseexample.LoginActivity">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="120dp"
        android:layout_height="120dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.100000024"
        app:srcCompat="@drawable/firebase_auth"
        tools:ignore="ContentDescription" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/emailForm"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/getEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Masukan Email"
            tools:ignore="HardcodedText" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordForm"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/emailForm">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/getPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            tools:ignore="HardcodedText" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/login"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="4dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:text="Masuk"
        app:layout_constraintEnd_toStartOf="@+id/register"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/passwordForm"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="4dp"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/register"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="8dp"
        android:text="Daftar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/login"
        app:layout_constraintTop_toBottomOf="@+id/passwordForm"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="32dp"
        tools:ignore="HardcodedText" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="64dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>
View:


Jika terdapat error seperti pada gambar berikut ini.


Untuk mengatasinya, pada folder values, buka file string.xml, lalu tambahkan baris kode berikut ini.
<item name="visible" type="id"/>
<item name="masked" type="id"/>
5) Jika sudah, selanjutnya buat activity baru bernama RegisterActivity, activity ini akan kita gunakan sebegai halaman pendaftaran user baru menggunakan email dan kata sandi.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="cianjur.developer.net.firebaseexample.RegisterActivity">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="120dp"
        android:layout_height="120dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.07999998"
        app:srcCompat="@drawable/firebase_auth"
        tools:ignore="ContentDescription" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/emailForm"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/regEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Masukan Email"
            tools:ignore="HardcodedText" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordForm"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/emailForm">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/regPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            tools:ignore="HardcodedText" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/regUser"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:text="Daftarkan"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/passwordForm"
        tools:ignore="HardcodedText" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/regUser"
        tools:visibility="gone" />

</android.support.constraint.ConstraintLayout>
View:


6) Buka class RegisterActivity.java kalian, pertama-tama kita akan deklarasikan beberapa variable dan juga inisialisasi objek dari Firebase Authentication, serta membuat beberapa method untuk mengecek data user dan untuk mendaftarkan user baru.
package cianjur.developer.net.firebaseexample;

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.firebase.auth.FirebaseAuth;

public class RegisterActivity extends AppCompatActivity {

    //Deklarasi Variable
    private TextInputEditText myEmail, myPassword;
    private Button regButtton;
    private ProgressBar progressBar;
    private FirebaseAuth auth;
    private String getEmail, getPassword;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);

        //Inisialisasi Widget dan Membuat Objek dari Firebae Authenticaion
        myEmail = findViewById(R.id.regEmail);
        myPassword = findViewById(R.id.regPassword);
        regButtton = findViewById(R.id.register);
        progressBar = findViewById(R.id.progressBar);
        progressBar.setVisibility(View.GONE);
        auth = FirebaseAuth.getInstance();

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

        regButtton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                cekDataUser();
            }
        });
    }

    //Method ini digunakan untuk mengecek dan mendapatkan data yang dimasukan user
    private void cekDataUser(){}
    
    //Method ini digunakan untuk membuat akun baru user
    private void createUserAccount(){}
}
Coba kalian perhatikan, didalam source code tersebut kita menerapkan Hide Password untuk menyembunyikan password user.

7) Pada method cekDataUser(), berfungsi untuk mendapatkan input dari user dan mengecek data jiga yang dimasukan kosong atau tidak, dan juga mengecek panjang karakter password baru yang ingin didaftarkan.
private void cekDataUser(){
    //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{
        //Mengecek panjang karakter password baru yang akan didaftarkan
        if(getPassword.length() < 6){
            Toast.makeText(this, "Sandi Terlalu Pendek, Minimal 6 Karakter", Toast.LENGTH_SHORT).show();
        }else {
            progressBar.setVisibility(View.VISIBLE);
            createUserAccount();
        }
    }
}
8) Jika sudah, berikutnya pada method createUserAccount(), disini kita akan menggunakan fungsi createUserWithEmailAndPassword() untuk mendaftarkan email dan kata sandi baru.
private void createUserAccount(){
    auth.createUserWithEmailAndPassword(getEmail, getPassword)
            .addOnCompleteListener(new OnCompleteListener<AuthResult>() {
                @Override
                public void onComplete(@NonNull Task<AuthResult> task) {
                        
                    //Mengecek status keberhasilan saat medaftarkan email dan sandi baru
                    if(task.isSuccessful()){
                        Toast.makeText(RegisterActivity.this, "Sign Up Success", Toast.LENGTH_SHORT).show();
                        finish();
                    }else {
                        Toast.makeText(RegisterActivity.this, "Terjadi Kesalahan, Silakan Coba Lagi", Toast.LENGTH_SHORT).show();
                        progressBar.setVisibility(View.GONE);
                    }
                }
            });
}
Setelah kita selesai membuat sistem Sign Up / Daftar User Baru, berikutnya kita akan membuat sistem Login / Masuk menggunakan email dan kata sandi yang telah dibuat oleh user. Klik Disini.

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

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.