Terakhir diperbarui: 2021-04-26

Penulis: Habibie Ed Dien, S.Kom., M.T.

Firebase di ReactJS

Pada codelab ini Anda akan mempelajari tentang penggunaan Firebase di ReactJS.

Pengetahun yang Anda harus miliki

Sebelum memulai codelab ini, sebaiknya Anda memiliki pengetahuan dasar tentang:

Apa yang Anda akan pelajari

Apa yang Anda perlu persiapkan

Apa itu Firebase ?

Firebase adalah produk dari Google yang menyediakan fasilitas untuk berbagai platform mulai dari autentikasi, penyimpanan, machine learning, dan lain sebagainya.

Pada codelab kali ini, kita akan belajar untuk mengintegrasikan aplikasi React dengan firebase. Kita akan membuat fitur Register dan Login menggunakan fasilitas yang disediakan oleh firebase.

Silakan lanjutkan ke langkah berikutnya untuk memulai praktikum pada codelab ini.

Pada praktikum ini, kita akan membuat form register yang nantinya akan dihubungkan langsung dengan firebase. Silakan lakukan langkah-langkah praktikum berikut ini.

  1. Anda dapat membuat project baru React atau melanjutkan praktikum dari Codelab sebelumnya.
  2. Buatlah komponen Register.js dalam folder src/components, lalu buat function Register.
function Register(){
 ...
}
  1. Buat tiga variabel hooks dan menggunakan context di dalam function Register() seperti berikut.

  1. Kemudian kita import bagian yang dibutuhkan di file Register.js.

  1. Buat konstanta AuthContext di src/App.js seperti berikut.
export const AuthContext = React.createContext(null);
  1. Selanjutnya buat return form Register pada komponen function Register().
return (
    <div>
      <h1>Register</h1>
      <form onSubmit={e => handleForm(e)}>
        <input
          value={email}
          onChange={e => setEmail(e.target.value)}
          name="email"
          type="email"
          placeholder="email"
        />
        <input
          value={password}
          onChange={e => setPassword(e.target.value)}
          name="password"
          type="password"
          placeholder="password"
        />
        <hr />
        <button className="googleBtn" type="button">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
            alt="logo"
          />
          Register With Google
        </button>
        <button type="submit">Register</button>
        <span>{error}</span>
      </form>
    </div>
  );
  1. Buat fungsi handleForm pada komponen Register yang sementara isinya seperti berikut. Nanti kita akan ganti dengan fungsi firebase.

  1. Jangan lupa di luar function Register() perlu ditambahkan sintaks export agar dapat digunakan pada file App.js nantinya.
export default Register;

Membuat Komponen Header

  1. Kita buat komponen Header yang berfungsi untuk menampilkan menu Register dan Login. Buat file Header.js di src/components. Isinya sebagai berikut.

  1. Kemudian buat file routes.js di folder src/components.

Membuat App Utama

  1. Kita pindah ke file src/App.js yang menentukan tampilan render pada aplikasi React kita.

  1. Jangan lupa import yang diperlukan pada file src/App.js
import React, { useState } from 'react';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import Header from './components/Header';
import routes from './components/routes';
import './App.css';
  1. Selanjutnya perlu disesuaikan style pada App.css.
.App {
  font-family: sans-serif;
  padding: 50px;
}

h1 {
  margin: 0 0 25px 0;
  text-align: left;
}

form {
  display: flex;
  flex-direction: column;
}

input {
  max-width: 450px;
  width: auto;
  border: none;
  margin: 0 0 25px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 10px;
}

button {
  max-width: 450px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border: none;
  padding: 7px;
  text-align: center;
  cursor: pointer;
}

button[type="submit"] {
  background-color: #4c566a;
  color: white;
  font-size: 14px;
  font-weight: 900;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 15px;
}

.googleBtn img {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0 5px;
  vertical-align: middle;
}

.nav {
  display: flex;
  text-decoration: none;
  list-style-type: none;
  justify-content: flex-start;
  margin: 0 0 50px;
  padding: 0;
}

.nav li {
  margin: 0 10px;
}
  1. Simpan semua pekerjaan lalu lihat hasilnya di browser. Seharusnya form register sudah tampil seperti pada gambar berikut.

Melanjutkan dari praktikum 1, kita akan membuat form login. Silakan lakukan langkah-langkah praktikum berikut ini.

  1. Buat komponen login di src/components/Login.js yang isinya sama persis dengan komponen Register.js hanya saja berbeda teks pada bagian return.

  1. Kemudian pada file src/components/routes.js kita tambahkan komponen Login

  1. Terakhir save semua file, lalu lihat hasilnya di browser. Seharusnya sudah tampil menu dan form login seperti pada gambar berikut ini.

Pada praktikum kali ini, kita akan menghubungkan form Registerd dan Login dengan Firebase. Silakan lakukan langkah-langkah praktikum berikut ini.

  1. Silakan buka terminal atau command prompt untuk memasang library pada project React kita dengan perintah berikut.
npm install --save firebase
  1. Sembari menunggu proses instalasi firebase selesai, silakan buka web firebase di https://console.firebase.google.com/
  2. Buat project baru dengan pilih Add project

  1. Kemudian beri nama project, misalnya Belajar React

  1. Langkah selanjutnya dapat mengaktifkan Google Analytics yang berfungsi untuk melacak pengguna yang mengakses aplikasi React kita. Fungsi ini juga dapat dimatikan jika hanya untuk latihan saja, bukan untuk aplikasi sesungguhnya.

  1. Jika kita memilih untuk mengaktifkan Google Analytics, maka akan tampil seperti pada gambar berikut untuk memilih pada akun mana akan diterapkan.

  1. Selanjutnya, klik Create project untuk membuat project baru pada firebase. Tunggu hingga proses pembuatan project firebase selesai.

  1. Selanjutnya pilih jenis aplikasi web untuk aplikasi React kita.

  1. Setelah itu kita akan mendapatkan script konfigurasi yang akan menjadi penghubung dengan project React kita. Salin script tersebut lalu tempel pada file baru di dalam folder src yang kita beri nama firebase.config.js (gambar dibawah adalah contoh, sesuaikan script yang anda dapat dari firebase).

Paste di src/firebase.config.js

  1. Kembali ke web firebase lalu pilih Authentication > get started, lalu bagian Sign-in method aktifkan untuk Email/Password dan Google sign-in.

  1. Jika sudah aktif kedua method sign-in tersebut, maka akan ada tanda enabled seperti pada gambar berikut.

Membuat Koneksi Firebase di Form Register

  1. Selanjutnya kita pindah ke project React di vs-code. Jika telah berhasil memasang firebase, maka perlu kita import library tersebut di file src/App.js lalu inisiasi dengan konfigurasi firebase yang sudah didapat dari web firebase tadi.

  1. Lalu buka komponen Register di src/components/Register.js lakukan tambahan import firebase dan ubah isi handleForm seperti berikut.

  1. Save lalu coba untuk registrasi di browser seperti pada gambar berikut. Jika berhasil registrasi, maka status Is logged in? menjadi true.

Kemudian ada tambahan data di web firebase seperti berikut.

Membuat Koneksi Firebase di Form Login

  1. Buka komponen Login di src/components/Login.js lalu tambahkan import firebase dan isi handleForm diganti seperti berikut.

  1. Save lalu lihat hasilnya di browser. Silakan coba untuk login dengan email dan password yang tadi telah didaftarkan.
  1. Dari praktikum sebelumnya, tambahkan aksi pada tombol "Login with Google" dan "Logout" agar bisa melakukan login dan logout dengan akun Google yang sudah kita miliki.
  2. Tambahkan animasi loading saat melakukan registrasi dan login. Boleh menggunakan dari tema boostrap atau lainnya.

Selamat, Anda telah berhasil menyelesaikan codelab ini. Semoga mendapatkan ilmu yang bermanfaat.

Apa selanjutnya?

Silakan cek beberapa sumber belajar lainnya...

Referensi