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:

STEP 3 :

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:

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;});}

STEP 5 :

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 :

HOPE THIS HELPS 😊😊

Interested in frontend developement & UI design