React js Firebase Authentication

1-rsn-H26-IMW6-Bn-Lbl-TZxj-Og.jpg


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.


1-RXJq-SILb84gm-BMn9-GQIno-A.png


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


1-8-TV08b-KUp-Ql-YRSca-XCWg-Yg.jpg


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


1-5-ZHa-RYI-wahl-BGlk-Kj-A9-Og.png


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


1-z-LOy-x-H5h-Vh-Ep-FXLsv-Tw2w.jpg


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.


1-p-G02-X63y6-Ds3-MGmz-X1-Yc-A.png


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.


1-XJExh-KVl4-Tm-Oepm-Bw-Feh-Aw.png


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.


1-LNVza-J2tni-L2-FUt-Ps7ku-A.png


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


1-t8-Smqzg-HZw7-AZP3m3-Ui-F5-Q.png


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.

avatar Kubilismail

Ditulis oleh @Kubilismail

"Code and coffe"