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 2:
GO TO OFFICIAL DOCS OF FIREBASE OR GO TO THIS LINK..
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 😊😊