Tutorial Sign-Up Menggunakan Firebase Authentication di Android

Last Updated on 8 years by Mas Herdi

Hi semuanya, seperti yang kalian tahu, Firebase mempunyai banyak fitur dan Analytics hanyalah salah satunya. Karena itu melanjutkan series saya tentang Tutorial Firebase di Android. Jika sebelumnya kita sudah belajar tentang bagaimana mengimplementasikan Firebase Analytics di Android. Di tutorial kali ini kita akan mencoba untuk belajar autentikasi pengguna menggunakan Firebase Authentication.

Belajar Membuat Sign-Up Form Menggunakan Firebase Authentication di Android Studio

Salah satu fitur yang hampir selalu ada di aplikasi Android adalah fitur autentikasi, yaitu fitur Login, Register, dan Logout. Autentikasi berfungsi untuk menandai pengguna-pengguna mana yang sedang menggunakan aplikasi tersebut, dan sekaligus membuka kesempatan bagi pengguna baru untuk mendaftar di aplikasi tersebut. Jika sebelumnya untuk membuat fitur Login atau Register kita membutuhkan web server dan back end yang lumayan kompleks. Saat ini kita hanya perlu menggunakan salah satu fitur dari Firebase, yaitu Firebase Authentication.

Pada tutorial ini kita akan belajar membuat Register / Sign-Up by Email menggunakan Firebase Authentication. Sebelum memulainya, seperti biasa sangat saya sarankan untuk membaca terlebih dahulu tutorial-tutorial di bawah ini :

Pre-requisites

• Membuat Project Hello World Android di Android Studio
• Implementasi Dasar dari Firebase Menggunakan Firebase Assistant
• Membuat Material TextInputLayout di Android

Oke, setelah kalian selesai membuat project baru di Android dan menambahkan Firebase SDK terlebih dahulu ke dalam aplikasi Android kalian,menggunakan Firebase Assistant. Maka langkah selanjutnya adalah kalian buka app level build.gradle dan masukkan dependency Firebase Auth seperti di bawah.

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.google.firebase:firebase-auth:10.0.1'
    compile 'com.android.support:design:25.1.1'
    // ... rest of code
}

Selanjutnya kalian bisa buka activity_main.xml dan kemudian masukkan baris xml di bawah ini untuk membuat form register :

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:layout_marginTop="150dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            android:inputType="textEmailAddress" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:layout_margin="10dp"
        android:id="@+id/bt_signup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Sign Up" />

</LinearLayout>

Form register tersebut berisi field untuk memasukkan email dan password, karena dua parameter itulah yang dibutuhkan untuk Register by Email di Firebase.

Jika sudah, kalian bisa buka MainActivity.java dan copy-paste kan kode di bawah ini :

package your.package.name;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
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;

/**
 * Created by Herdi_WORK on 13.03.17.
 */

public class MainActivity extends AppCompatActivity {

    private Button btSignUp;
    private EditText etEmail;
    private EditText etPassword;

    private FirebaseAuth fAuth;
    private FirebaseAuth.AuthStateListener fStateListener;

    private static final String TAG = FirebaseAuthActivity.class.getSimpleName();

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

        /**
         * Inisialisasi Firebase Auth
         */
        fAuth = FirebaseAuth.getInstance();

        /**
         * Cek apakah ada user yang sudah login
         */
        fStateListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                FirebaseUser user = firebaseAuth.getCurrentUser();
                if (user != null) {
                    // User sedang login
                    Log.d(TAG, "onAuthStateChanged:signed_in:" + user.getUid());
                } else {
                    // User sedang logout
                    Log.d(TAG, "onAuthStateChanged:signed_out");
                }
            }
        };

        btSignUp = (Button) findViewById(R.id.bt_signup);
        etEmail = (EditText) findViewById(R.id.et_email);
        etPassword = (EditText) findViewById(R.id.et_password);

        btSignUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                /**
                 * Lempar email dan password ketika tombol signup diklik
                 */
                signUp(etEmail.getText().toString(), etPassword.getText().toString());
            }
        });

    }

    private void signUp(final String email, String password){

        fAuth.createUserWithEmailAndPassword(email, password)
                .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        Log.d(TAG, "createUserWithEmail:onComplete:" + task.isSuccessful());

                        /**
                         * Jika sign in gagal, tampilkan pesan ke user. Jika sign in sukses
                         * maka auth state listener akan dipanggil dan logic untuk menghandle
                         * signed in user bisa dihandle di listener.
                         */
                        if (!task.isSuccessful()) {
                            task.getException().printStackTrace();
                            Toast.makeText(FirebaseAuthActivity.this, "Proses Pendaftaran Gagal",
                                    Toast.LENGTH_SHORT).show();
                        } else {
                            Toast.makeText(FirebaseAuthActivity.this, "Proses Pendaftaran Berhasil\n" +
                                            "Email "+email,
                                    Toast.LENGTH_SHORT).show();
                        }

                        // rest of code
                    }
                });

    }

    @Override
    protected void onStart() {
        super.onStart();
        fAuth.addAuthStateListener(fStateListener);
    }

    @Override
    protected void onStop() {
        super.onStop();
        if (fStateListener != null) {
            fAuth.removeAuthStateListener(fStateListener);
        }
    }
}

Jika kalian lihat pada kodingan di atas, langkah-langkahnya cukup straight forward. Pertama-tama kalian menginisialisasi FirebaseAuth. Setelah itu kalian set listener pada button SignUp yang apabila diklik maka akan memanggil method FirebaseAuth#createUserWithEmailAndPassword(), dimana email dan password nya berasal dari inputan pengguna yang diambil dari EditText.

Kemudian apabila kalian menggunaka proguard, bisa tambahkan line berikut pada file proguard-rules.pro.

-keepattributes Signature
-keepattributes *Annotation*

Langkah terakhir, kalian bisa masuk ke Firebase Console > Authentication > Sign-In Method. Kemudian kalian bisa klik provider Email/Password, kemudian switch ke enable. Sehingga tampilannya menjadi seperti ini.

Meng-Enable Provider Email/Password di Firebase

Demo

Sekarang kita coba jalankan aplikasinya :

Firebase Auth Sign Up Form

Begitulah tampilkan aplikasi form Register sederhana yang kita buat menggunakan Firebase Auth. Bisa dilihat apabila kita selesai memasukkan email dan password dan klik Sign Up, maka akan muncul Toast di bagian bawah aplikasi seperti gambar di atas.

Jika register sukses, kita bisa cek di Firebase Console di bagian User. Akan muncul nama email user yang sudah kita daftarkan seperti gambar di bawah.

Registered User di Firebase Console

Oiya satu hal lagi tentang password yang dipakai saat Register. Firebase Auth mempunyai algoritma pengecekan sendiri sehingga apabila kalian menggunakan password yang mudah ditebak seperti ‘12345’ maka Register akan gagal. Sehingga pilihlah password yang lumayan susah ditebak.

That’s all ! Semoga membantu! Source code nya bisa kalian download dan jalankan sebagai Android Studio project di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. 🙂 Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀