FIREBASE , FIRESTORE, REACT AND GOOGLE SIGN-IN SIMPLIFIED

react firestore firebase

BASICALLY IF YOU WANT TO LOGIN USING GOOGLE IN YOUR REACT-FIREBASE APP AND MAP THE USER TO A COLLECTION , THEN THIS ARTICLE MIGHT HELP YOU!!

I HAVE DIVIDED THEM TO STEPS :-

STEP 1:

CREATE A GOOGLE PROJECT IN CONSOLE DEVELOPERS.COM AND OAUTH CLIENT TO IT (I ASSUME YOU KNOW IT ALREADY)

STEP 3 :

CREATE A REACT LOGIN COMPONENT …

import React from "react";
import * as firebase from "firebase/app";
class Login extends React.Component {
state = {
isSignedIn: false // Local signed-in state.};
render() {if (!this.state.isSignedIn) {return (<div><h1>My App</h1><p>Please sign-in:</p><button onClick={() => this.googleLogin()}>log in</button></div>);}return (<div><h1>My App</h1><p>Welcome {firebase.auth().currentUser.displayName}! You are nowsigned-in!</p><a onClick={() => firebase.auth().signOut()}>Sign-out</a></div>);}}

STEP 4:

WRITING THE GOOGLE LOGIN FUNCTION …

googleLogin = props => {console.log("clicked");var provider = new firebase.auth.GoogleAuthProvider();firebase.auth().signInWithPopup(provider).then(function(result) {var token = result.credential.accessToken;var user = result.user;
console.log(user.displayName)
}).catch(function(error) {var errorCode = error.code;var errorMessage = error.message;var email = error.email;var credential = error.credential;});}

THIS IS IT …..!!

BASIC GOOGLE LOGIN FUNCTION WORKING…!!!!

STEP 5 :

ADDING SOME MORE CODE TO GOOGLE LOGIN FUNCTION MAKES MAPPING USERS TO COLLECTION POSSIBLE !

googleLogin = props => {console.log("clicked");var provider = new firebase.auth.GoogleAuthProvider();firebase.auth().signInWithPopup(provider).then(function(result) {var token = result.credential.accessToken;var user = result.user;db.collection("users").doc(user.uid).get().then(doc => {if (doc.exists) {console.log("already hee");} else {db.collection("users").doc(user.uid).set({name: user.displayName}).then(function() {console.log("Document successfully written!");}).catch(function(error) {console.error("Error writing document: ", error);});}});}).catch(function(error) {var errorCode = error.code;var errorMessage = error.message;var email = error.email;var credential = error.credential;});}//BOLD CODE IS NEEDED FOR MAPPING TO FIRESTORE COLLECTION

WHATS LEFT ??

ADD COMPONENT DID MOUNT AND COMPONENT WILL UNMOUNT

componentDidMount() {this.unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => this.setState({ isSignedIn: !!user }));}componentWillUnmount() {this.unregisterAuthObserver();}

COMPLETE CODE :

import React from "react";import db from "../Firebas";import * as firebase from "firebase/app";class Login extends React.Component {state = {isSignedIn: false // Local signed-in state.};// Listen to the Firebase Auth state and set the local state.componentDidMount() {this.unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => this.setState({ isSignedIn: !!user }));}// Make sure we un-register Firebase observers when the component unmounts.componentWillUnmount() {this.unregisterAuthObserver();}googleLogin = props => {console.log("clicked");var provider = new firebase.auth.GoogleAuthProvider();firebase.auth().signInWithPopup(provider).then(function(result) {var token = result.credential.accessToken;var user = result.user;db.collection("users").doc(user.uid).get().then(doc => {if (doc.exists) {console.log("already hee");} else {db.collection("users").doc(user.uid).set({name: user.displayName}).then(function() {console.log("Document successfully written!");}).catch(function(error) {console.error("Error writing document: ", error);});}});}).catch(function(error) {// Handle Errors here.var errorCode = error.code;var errorMessage = error.message;// The email of the user's account used.var email = error.email;// The firebase.auth.AuthCredential type that was used.var credential = error.credential;// ...});};render() {var user = firebase.auth().currentUser;if (!this.state.isSignedIn) {return (<div><h1>My App</h1><p>Please sign-in:</p><button onClick={() => this.googleLogin()}>log in</button></div>);}return (<div><h1>My App</h1><p>Welcome {firebase.auth().currentUser.displayName}! You are nowsigned-in!</p><a onClick={() => firebase.auth().signOut()}>Sign-out</a></div>);}}

NEXT STEPS :

U CAN ADD REUX ,REACT HOOKS TO THIS

HOPE THIS HELPS 😊😊

--

--

--

Interested in frontend developement & UI design

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

283. Move Zeroes

How to create a Create React App Template

IMPROVING THE PERFORMANCE OF REACT APP

Do We Still Need to Compile ES6 JavaScript Code Into ES5 in 2022?

Golang Iterate Map of Array of Struct

JavaScript ES6 : The cool kid with a new swag

Customizable Node-red alternative

Writing constant errors with Go 1.13

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhik

Abhik

Interested in frontend developement & UI design

More from Medium

What is the Navbar Component in ReactJS?

Firebase in React for local development

Top 6 UI Frameworks for ReactJS

React.js Showing A Blank Page

Interesting…