React JS dengan Firebase

Firebase adalah backend all-in-one sebagai penyedia layanan (BaaS) yang menyediakan basis data, otentikasi, penyimpanan cloud di antara banyak layanan mereka.  Dalam tutorial ini Anda akan belajar cara menggunakan layanan Firebase Real Time Database dalam React aplikasi.

 Kalian dapat membangun aplikasi daftar tim sederhana, di mana pengguna dapat menambah, menghapus, dan mengedit informasi anggota tim.

Buat aplikasi basis data Anda

 Pertama, Anda harus membuat aplikasi di Firebase console.

 Kemudian pergilah ke menu Database dan gulirkan sedikit ke bagian Choose Real Time Database

Terakhir, dapatkan konfigurasi yang diperlukan untuk mengintegrasikan Firebase ke aplikasi web Anda.

Metode login dengan menggunakan Firebase

Pertama, aktifkan metode login dengan google di firebase.

Buat project baru di firebase kalian. Masuk ke console Firebase

membuat project baru di firebase

masuk ke project kalian, kemudian pilih menu authentication, lalu pilih tab metode login dan aktifkan metode login dengan google. Jangan lupa untuk klik button save.

mengaktifkan metode login dengan google

Kedua, Tambahkan firebase ke aplikasi React.

 

 Ambil source code dari codesandbox dan ambil:

Setelah itu, copy kan kode yang sudah di dapat, di dalam src/app.js

src/App.js

import React, { Component } from 'react';import './App.css';var config = {apiKey: "AIzaSyAxcsrM3GwgtOMP0lMdHm-y2y1i98A-_zc",authDomain: "login-with-35d08.firebaseapp.com",databaseURL: "https://login-with-35d08.firebaseio.com",projectId: "login-with-35d08",storageBucket: "login-with-35d08.appspot.com",messagingSenderId: "206347566463"};class App extends Component {render() {return (<div>Login With Google</div>);}}
export default App;

jalankan npm install firebase di terminal kalian, pastikan path di terminal sesuai dengan folder react kalian.

sediakan state user yang di inisialisasi dengan array kososng, kemudian import firebase di aplikasi kalian dan lakukan konfigurasi seperti kode di bawah.

jalankan npm install firebase di terminal kalian, pastikan path di terminal sesuai dengan folder react kalian.

sediakan state user yang di inisialisasi dengan array kososng, kemudian import firebase di aplikasi kalian dan lakukan konfigurasi seperti kode di bawah.

import React, { Component } from 'react';
import firebase from 'firebase'import './App.css';
var config = {apiKey: "AIzaSyAxcsrM3GwgtOMP0lMdHm-y2y1i98A-_zc",authDomain: "login-with-35d08.firebaseapp.com",databaseURL: "https://login-with-35d08.firebaseio.com",projectId: "login-with-35d08",storageBucket: "login-with-35d08.appspot.com",messagingSenderId: "206347566463"};firebase.initializeApp(config);
const provider = new firebase.auth.GoogleAuthProvider();class App extends Component {
state = {user : []}render() {return (<div>Login With Google</div>);}}export default App;

Ketiga, pengkondisian tampilan.

Kita akan mengkondisikan tampilan kita sesuai yang kita mau, yaitu ketika user belum login, hany akan tampil satu tombol login with google, ketika user sudah berhasil login, maka akan ada satu tombol log out dan display name user beserta photo profile nya.

Saya menggunakan if ternary untuk pengkondisian kali ini. Perhatikan dan simak kode yang sudah saya bold.

import React, { Component } from 'react';
import firebase from 'firebase'import './App.css';var config = {apiKey: "AIzaSyAxcsrM3GwgtOMP0lMdHm-y2y1i98A-_zc",authDomain: "login-with-35d08.firebaseapp.com",databaseURL: "https://login-with-35d08.firebaseio.com",projectId: "login-with-35d08",storageBucket: "login-with-35d08.appspot.com",messagingSenderId: "206347566463"};firebase.initializeApp(config);
const provider = new firebase.auth.GoogleAuthProvider();class App extends Component {
state = {user : []}render() {return (<div><div style={{display : 'flex' , justifyContent:'center',marginTop:'300px'}}>{this.state.user.length == 0?<input type='button' value='login with google' onClick={this.onBtnLoginClick} />:<div><img src={this.state.user.photoURL  } alt='broken' width="200px"/><p>{this.state.user.displayName}</p><input type='button' value='log out' onClick={this.onBtnLogoutClick} /></div>}</div></div>);}}export default App;

Keempat, membuat function untuk event on click pada button login

buat function dengan nama onBtnLoginClick, saya menggunakan arrow function punyanya es6. Di dalam function tersebut, saya menjalankan firebase.auth().signInWithPopup(provider) yang me return sebuah promise, dimana ketika login berhasil, akan masuk ke .then() dan ketika login gagal, akan masuk ke .catch() .

Di dalam function tersebut, saya juga menambahkan this.setState() untuk merubah state user yang tadinya array kosong menjadi array dari response firebase

import React, { Component } from 'react';
import firebase from 'firebase'import './App.css';var config = {apiKey: "AIzaSyAxcsrM3GwgtOMP0lMdHm-y2y1i98A-_zc",authDomain: "login-with-35d08.firebaseapp.com",databaseURL: "https://login-with-35d08.firebaseio.com",projectId: "login-with-35d08",storageBucket: "login-with-35d08.appspot.com",messagingSenderId: "206347566463"};firebase.initializeApp(config);
const provider = new firebase.auth.GoogleAuthProvider();class App extends Component {
state = {user : []}onBtnLoginClick = () => {firebase.auth().signInWithPopup(provider).then((res) => {this.setState({user: res.user})}).catch((err) => {console.log(err)})}render() {return (<div><div style={{display : 'flex' , justifyContent:'center',marginTop:'300px'}}>{this.state.user.length == 0?<input type='button' value='login with google' onClick={this.onBtnLoginClick} />:<div><img src={this.state.user.photoURL  } alt='broken' width="200px"/><p>{this.state.user.displayName}</p><input type='button' value='log out' onClick={this.onBtnLogoutClick} /></div>}</div></div>);}}export default App;

Kita bisa melihat semua isi response dari firebase dengan cara melihatnya di console.log .

Kelima, membuat function logout

gampang saja, di dalam function logout, kita panggil function dari firebase, untuk kemudian kita ubah state user yang tadinya isi, menjadi array kosong lagi.

Kenapa mesti kita ubah? agar komponen kita bisa re-render dengan array kosong, sehingga akan kembali ke tampilan awal dimana hanya ada button login with google

perhatikan code yang sudah saya bold di bawah ini

import React, { Component } from 'react';
import firebase from 'firebase'import './App.css';var config = {apiKey: "AIzaSyAxcsrM3GwgtOMP0lMdHm-y2y1i98A-_zc",authDomain: "login-with-35d08.firebaseapp.com",databaseURL: "https://login-with-35d08.firebaseio.com",projectId: "login-with-35d08",storageBucket: "login-with-35d08.appspot.com",messagingSenderId: "206347566463"};firebase.initializeApp(config);
const provider = new firebase.auth.GoogleAuthProvider();class App extends Component {
state = {user : []}onBtnLoginClick = () => {firebase.auth().signInWithPopup(provider).then((res) => {this.setState({user: res.user})}).catch((err) => {console.log(err)})}onBtnLogoutClick = () =>{firebase.auth().signOut().then((res) => this.setState({user : []})).catch((err) => console.log(err))}render() {return (<div><div style={{display : 'flex' , justifyContent:'center',marginTop:'300px'}}>{this.state.user.length == 0?<input type='button' value='login with google' onClick={this.onBtnLoginClick} />:<div><img src={this.state.user.photoURL  } alt='broken' width="200px"/><p>{this.state.user.displayName}</p><input type='button' value='log out' onClick={this.onBtnLogoutClick} /></div>}</div></div>);}}export default App;

Kita sudah berhasil membuat login with google, dimana nantinya data yang sudah berhasil kita dapatkan bisa kita manipulasi sedemikian rupa, seperti kita mengirim ke database, atau kita taruh di dalam global state redux, atau kita oper ke props, dan lain sebagainya.