Firebase Authentication adalah layanan otentikasi yang disediakan oleh Firebase, yang memungkinkan pengembang untuk mengamankan aplikasi mereka dengan mudah dengan menyediakan metode otentikasi seperti email dan password, Google, Facebook, Twitter, dan lainnya. Dalam tutorial ini, saya akan membahas bagaimana cara membuat login dan register user dengan Firebase Authentication menggunakan email dan password.

Langkah 1: Buat proyek Firebase

Langkah pertama adalah membuat proyek Firebase dan mengaktifkan Firebase Authentication. Jika Anda belum memiliki akun Firebase, Anda dapat mendaftar di https://console.firebase.google.com/. Setelah itu, ikuti langkah-langkah berikut:

1. Buat proyek Firebase baru di konsol Firebase.

2. Beri nama proyek Firebase Anda dan klik “Create Project”.

3. Aktifkan Firebase Authentication dengan memilih “Authentication” di sisi kiri konsol Firebase dan mengaktifkannya.

4. Di bawah tab “Sign-in method”, aktifkan “Email/Password”.

Langkah 2: Tambahkan Firebase ke aplikasi Anda

Untuk menambahkan Firebase ke aplikasi Anda, Anda perlu menambahkan file konfigurasi Firebase ke dalam proyek Anda. Berikut ini langkah-langkahnya:

1. Pada konsol Firebase, klik tombol “Add Firebase to your web app” pada tab “Project Overview”.

2. Salin kode konfigurasi Firebase ke dalam file konfigurasi Firebase pada proyek Anda.

Langkah 3: Tambahkan kode ke halaman login dan register

Setelah menambahkan Firebase ke proyek Anda, Anda dapat menambahkan kode untuk halaman login dan register Anda. Berikut ini langkah-langkahnya:

1. Buat halaman login dan register Anda dengan HTML, CSS, dan JavaScript.

2. Tambahkan kode JavaScript untuk memproses login dan register dengan Firebase.

Berikut contoh kode untuk login dan register dengan Firebase:

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Get elements
const email = document.getElementById('email');
const password = document.getElementById('password');
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');

// Add login event
loginForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const emailValue = email.value;
  const passwordValue = password.value;
  firebase.auth().signInWithEmailAndPassword(emailValue, passwordValue)
    .then((userCredential) => {
      // Signed in
      const user = userCredential.user;
      console.log(user);
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(errorCode, errorMessage);
    });
});

// Add register event
registerForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const emailValue = email.value;
  const passwordValue = password.value;
  firebase.auth().createUserWithEmailAndPassword(emailValue, passwordValue)
    .then((userCredential) => {
      // Signed in
      const user = userCredential.user;
      console.log(user);
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(errorCode, errorMessage);
    });
});

Kesimpulan

Dalam tutorial ini, saya telah menjelaskan bagaimana cara membuat login dan register user dengan Firebase Authentication menggunakan email dan password. Dengan mengikuti langkah-langkah di atas, Anda dapat mengamankan aplikasi Anda dengan mudah menggunakan