Authentication with Facebook

The onClick of each of these buttons will point to three functions that will authenticate the user. The Facebook authentication method, which will handle our authentication with Firebase, will look like this:

 authWithFacebook(){
 console.log("facebook");
 firebaseApp.auth().signInWithPopup(facebookProvider).then((result,error)=>{
 if(error){
   console.log("unable to sign in with facebook");
 }
 else{
   this.setState({redirect:true})
 }}).catch((error)=>{
        ToastDanger(error.message);
    })
 }

Here, we call the signInWithPopup() method from the firebase auth module and pass the facebook provider.

To display the error messages on UI, we are using React Toaster module and passing those messages into it (don't forget to install and import the React Toaster module before using it). We also need to bind authWithFacebook() methods into the constructor.

npm install --save react-toastr-basic

// In app.js import the container
import ToastrContainer from 'react-toastr-basic';

//Inside the render method
<ToastrContainer />

constructor() {
 super();
 this.authWithFacebook = this.authWithFacebook.bind(this);
 this.state = {
  redirect: false,
  data:null
 }}

Now, when we click on the Login with Facebook button, it will open a popup that gives us the option to sign in with a Facebook account, as shown:

signInWithPopup() has a promise API that allows us to call .then() on it and pass in a callback. This callback will be provided with a result object that contains, among other things, an object called user that has all the information about the user who has just successfully signed in—including their name, email, and user photo URL. We will store this object inside of the state using setState() and display the name, email, and photo of the user on UI:

Table of Contents for Authentication with Facebook

Create new playlist

Sign In

Sign Up

Table of Contents for
Authentication with Facebook