Metode Login dengan Google Menggunakan Firebase dan ReactJs
Tidak bisa dipungkiri bahwasanya user semakin malas untuk mengisi form registrasi pada suatu website. Untuk itu, mari kita bahas bersama sama, bagaimana cara membuat halaman login dengan akun google, kemudian data user kita ambil untuk kemudian kita olah.
Untuk mengikuti tutorial ini, kalian harus mempunyai skill dasar menggunakan library react dan sudah memiliki dasar pemrograman Javascript. Berikut step by step membuat login with google dengan firebase.
Flow yang akan kita jalankan bersama sama adalah, kita bikin satu state lokal di app.js, anggap saja namanya user, kita inisialisasi dengan array kosong. Ketika si user belum login, tampilan awal hanyalah sebuah button login with google. ketika user berhasil login, kita akan set state yang tadinya kosong, berubah menjadi respon data dari firebase. maka tampilan akan berubah menjadi photo dari si akun google punya si user, beserta display name nya disertai satu tombol untuk logout.
Pertama, aktifkan metode login dengan google di firebase.
Buat project baru di firebase kalian. Masuk ke console 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.
Kedua, Tambahkan firebase ke aplikasi React.
Masuk ke menu project overview, kemudian klik icon web untuk mendapatkan kode konfigurasi yang berfungsi untuk menghubungkan aplikasi react kalian dengan firebase.
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.
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 . Berikut adalah penampakan dari response firebase di console.
Di dalam properti user lah semua data yang kita butuhkan berada, silahkan kalian amati sendiri di konsol masing masing.
Ketika setState() dijalankan, maka akan terjadi perubahan state, dari state user yang tadinya array kosong, menjadi array yang berisi data user.
Ketika ada perubahan state, maka si react bakalan menjalankan kembali function render miliknya (re-render), tapi render yang kedua kalinya sudah dengan state.user yang tidak kosong, sehingga tampilan akan berubah seperti gambar di bawah ini
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;
Singkat cerita 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.
Sekian tutorial dari saya, semoga menjadi pencerahan bagi kawan kawan programmer semuanya.
