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 2:

GO TO OFFICIAL DOCS OF FIREBASE OR GO TO THIS LINK..

Authenticate Using Google Sign-In with JavaScript | Firebase

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 now
signed-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 now
signed-in!
</p>
<a onClick={() => firebase.auth().signOut()}>Sign-out</a>
</div>
);
}
}

NEXT STEPS :

U CAN ADD REUX ,REACT HOOKS TO THIS

HOPE THIS HELPS 😊😊