Memulai Firebase Authentication di Situs

Anda dapat menggunakan Firebase Authentication untuk mengizinkan pengguna login ke aplikasi Anda menggunakan satu atau beberapa metode login, termasuk login dengan alamat email dan sandi, serta penyedia identitas gabungan seperti Login dengan Google dan Login dengan Facebook. Tutorial ini akan memandu Anda memulai Firebase Authentication dengan menunjukkan cara menambahkan login dengan alamat email dan sandi ke aplikasi Anda.

Menghubungkan aplikasi ke Firebase

Instal Firebase SDK. Pastikan untuk menempelkan kode konfigurasi ke halaman web Anda seperti yang dijelaskan.

(Opsional) Membuat prototipe dan melakukan pengujian dengan Firebase Local Emulator Suite

Sebelum membahas cara aplikasi Anda mengautentikasi pengguna, kami akan memperkenalkan serangkaian alat yang dapat digunakan untuk membuat prototipe dan menguji fungsionalitas Authentication: Firebase Local Emulator Suite. Jika Anda sedang memilih teknik dan penyedia autentikasi, mencoba berbagai model data dengan data publik dan pribadi menggunakan Authentication dan Aturan Keamanan Firebase, atau membuat prototipe desain UI login, akan sangat bermanfaat jika Anda bisa bekerja secara lokal tanpa men-deploy layanan langsung.

Emulator Authentication adalah bagian dari Local Emulator Suite, yang memungkinkan aplikasi Anda berinteraksi dengan konten dan konfigurasi database yang diemulasi, serta, jika diinginkan, dengan resource project yang diemulasi (fungsi, database lain, dan aturan keamanan).

Hanya diperlukan beberapa langkah untuk menggunakan emulator Authentication:

1. Menambahkan satu baris kode ke konfigurasi pengujian aplikasi untuk menghubungkannya ke emulator.
2. Menjalankan firebase emulators:start dari root direktori project lokal Anda.
3. Menggunakan UI Local Emulator Suite untuk pembuatan prototipe interaktif, atau REST API emulator Authentication untuk pengujian noninteraktif.

Panduan terperinci tersedia di bagian Menghubungkan aplikasi ke emulator Authentication. Untuk informasi selengkapnya, lihat Pengantar Local Emulator Suite.

Sekarang, mari kita lanjutkan dengan cara mengautentikasi pengguna.

Mendaftarkan pengguna baru

Buat formulir yang dapat dipakai pengguna baru untuk mendaftar ke aplikasi Anda menggunakan alamat email dan sandi. Setelah pengguna melengkapi formulir, validasi alamat email dan sandi yang diberikan oleh pengguna, lalu teruskan ke metode createUserWithEmailAndPassword:

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_signup_password.js

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

Memproses login pengguna yang ada

Buat formulir yang dapat dipakai pengguna yang ada untuk login menggunakan alamat email dan sandinya. Setelah pengguna melengkapi formulir, panggil metode signInWithEmailAndPassword:

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
auth_signin_password.js

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

Menetapkan observer status autentikasi dan mendapatkan data pengguna

Untuk setiap halaman aplikasi yang memerlukan informasi tentang pengguna yang telah login, tambahkan observer ke objek autentikasi global. Observer ini dipanggil setiap kali status login pengguna berubah.

Tambahkan observer menggunakan metode onAuthStateChanged. Setelah pengguna berhasil login, Anda bisa mendapatkan informasi tentang pengguna tersebut di observer.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

Langkah berikutnya

Pelajari cara menambahkan dukungan untuk penyedia identitas lainnya dan akun tamu anonim:

• Login dengan Google
• Login dengan Facebook
• Login dengan Twitter
• Login dengan GitHub
• Login secara anonim