React js Firebase Authentication

Mungkin ada dari kalian yang pernah mengunjungi website dan ingin mendaftar account disana namun kita sudah merasa malas ketika input email dan password secara manual, akan lebih praktis ketika mendaftar langsung menggunakan akun google atau facebook, disini Firebase hadir dengan salah satu fitur yang bernama Firebase Authentication.

Jadi Firebase Authentication adalah layanan backend siap pakai untuk mengautentikasi pengguna ke aplikasi kalian. Fitur autentikasi yang didukung juga sudah banyak seperti autentikasi menggunakan sandi, nomor telepon, social media, seperti Google, Facebook, dan Twitter, dan lain-lain.

Nah gimana keren banget kan dan disini kita akan coba menerapkan salah satu metode autentikasinya menggunakan google dengan firebase, oke langsung saja kita mulai.

Setup Firebase

Pertama, Buat project firebase baru kalian disni disni.

Kedua, Setelah project berhasil dibuat silahkan masuk kedalam menu authentication di sidebar kanan. Dan pilih Sign In Method.

Ketiga, Silahkan aktifkan metode login dengan google dan klik simpan.

Keempat, Tambahkan aplikasi kalian ke firebase dan tulis nama aplikasi kalian.

Jika sudah selesai salin kode yang di dapat dari Firebase SDK.

var firebaseConfig = {
 apiKey: "AIzaXXXXXXX",
 authDomain: "reactjsauthXXXX",
 databaseURL: "https://reactjsauthXXXX.com",
 projectId: "reactjsauth-e345b",
 storageBucket: "reactjsauthxxxxxx",
 messagingSenderId: "531xxxxx",
 appId: "1:5312xxxxxxxxx",
 measurementId: "G-xxxxxxx"
};

Implementasi Firebase

Pertama silahkan install package firebase di dalam project react kalian.

npm i firebase

Setelah itu buat file baru bernama firebase.js di dalam folder src lalu tambahkan kode yang di dapat dari Firebase SDK.

src/firebase.js

import firebase from 'firebase';var firebaseConfig = {
 apiKey: "AIzaXXXXXXX",
 authDomain: "reactjsauthXXXX",
 databaseURL: "https://reactjsauthXXXX.com",
 projectId: "reactjsauth-e345b",
 storageBucket: "reactjsauthxxxxxx",
 messagingSenderId: "531xxxxx",
 appId: "1:5312xxxxxxxxx",
 measurementId: "G-xxxxxxx"
};

firebase.initializeApp(firebaseConfig);
firebase.analytics();

const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export { auth, provider };

Jika sudah ubah kode di dalam file App.js seperti kode dibawah.

import React, { Component } from 'react';
import './App.css';
import { auth, provider } from './Firebase';export

default class App extends Component {

 constructor(props) {
  super(props);
  this.state = {
   isAuth: false,
   isError: false,
   account: null,
  }
 }

 render() {
  const { isAuth, isError, account } = this.state;
  return (
   <div className="App">
    <header className="App-header">
     {isAuth ? (
      <>
       <img
        src={account.picture}
        alt={account.name}
        width="200"
       />
       <p>{account.name}</p>
      <button onClick={this.logoutGoogle}>
       Logout
      </button>
     </>
    ):(
     <>
      <p>Firebase Authentication</p>
      <button onClick={this.loginGoogle}>
       Login With Google
      </button>
     </>
    )}
    <small>{isError.message}</small>
   </header>
  </div>
 );
}}

Save project kalian dan coba run maka tampilannya akan seperti ini.

Oke selanjutnya kita connect dengan google auth dengan menambahkan beberapa fungsi berikut di dalam file src/App.js.

src/App.

loginGoogle = () => {
  auth.signInWithPopup(provider)
  .then((res) => {
    this.setState({
      isAuth: true,
      account: res.additionalUserInfo.profile
    });
  }).catch((err) => {
    this.setState({
      isError: err
    });
  });
}

logoutGoogle = () => {
  auth.signOut()
  .then(() => {
    this.setState({
      isAuth: false,
      account: []
    });
  })
  .catch((err) => {
    this.setState({
      isError: err
    });
  })
}

Maka jika kita satukan semuanya kode yang kita tulis didalam file src/App.js akan seperti ini.

Oke disini saya mau jelaskan secara singkat terlebih dahulu, jadi didalam fungsi render ada sebuah pengecekan menggunakan if ternary. Ketika kita belum login maka akan menampilkan component Firebase Authentication dan ketika kita klik button login maka akan menjalankan fungsi loginGoogle jika berhasil maka akan membuka pop up login menggunakan google.

Dan ketika proses login berhasil maka akan mengubah state isAuth menjadi true dan akan menampilkan component profile.

Ketika kita click button logout maka akan menjalankan fungsi logoutGoogle dan ketika proses logout berhasil maka akan mengubah state isAuth menjadi false.

Oke jadi tadi kita sudah selesai mengimplementasikan Firebase Authentication menggunakan google, kalian bisa coba metode authentication yang lainnya juga seperti facebook, twitter / dsb.

Untuk source code silahkan lihat disni.

Sekian dari saya dan sampai jumpa pada sesi sharing selanjutnya.