How to develop/configure Facebook (OAuth) based authentication for Google Firebase using React

The post assumes that you have basic knowledge on Firebase and you do have a Project created and available for POC in Firebase.  It also uses a 3rd party NPM package “react-facebook-login” to take care of invoking facebook OAuth api’s :

  1. Enable Facebook authentication in FireBaseauth1 Copy the App ID and App Secret from Facebook and copy over the OAuth redirect URI (as we need to update it in the Facebook developer site)
    auth2Click on “Add Domain” and key in your dns/domain for the React site (If you are using localhost, you don’t need to include the port number)auth3
  2. Configure Facebook settings
    1. Login to Facebook developer portal select/create a new app (if you don’t have one setup yet)
    2. Click on “Add product” and choose “Set Up” in Facebook Login
    3. fb1Choose “WWW/Web”
    4. In Site URL provide your site’s url.  In case of localhost, include the port number as well (http://localhost:3000/).  (Note: This will update the platform website url, which can be modified using the Settings->Basic on the left site menu bar.)  Click Save and Continue
    5. The other tabs are just help text on setting up of the authentication mechanism using JS.
    6. Go to Facebook Login->Settings and provide the OAuth redirect URI (which was copied while setting up of the FireBase facebook authentication).fb2
  3. Creating React Application
    Step 1 and Step 2 are just the basic steps required to enable Facebook to pass on the auth_token to Firebase and ensure a seamless auth experience.  Now let’s move on to the coding part:

    1. Go to Fire Base Authentication settings and click on “Web Setup“.  Copy the content to be used for replacing the configuration in the code :firebasesettings
    2. Use “create-react-app” to create a new react application.  I have named mine as “firebasefacebookauth
    3. Use “create-react-app” to create a new react application.  I have named mine as “firebasefacebookauth
    4. Run npm install react-facebook-login --save
    5. Run npm install firebase --save
    6. Create a new React class Component (I am naming it as fbauth.js)
    7. Paste the below code into fbauth.js
      import React from 'react'
      import firebase from 'firebase';
      import FacebookLogin from 'react-facebook-login';
      
      export class FBAuth extends React.Component{
          constructor(props)
          {
              super(props);
      
              this.state = {userSignedIn: false, fbReAuthenticate: true };
              
              var config = {
                  apiKey: "<FIREBASE_API_KEY>",
                  authDomain: "FIREBASE_AUTH_DOMAIN_URL",
                  databaseURL: "FIREBASE_REALTIME_DATABASE_URL",
                  projectId: "FIREBASE_PROJECTID",
                  storageBucket: "FIREBASE_STORAGEBUCKET_ID",
                  messagingSenderId: "FIREBASE_MESSAGINGSENDERID"
              };
              firebase.initializeApp(config);
          }
      
          //This will be the CAllBACK that would get invoked after authentication from Facebook
          responseFacebook = (response) => {
              
              //Validate if it has a valid accessToken
              if (response.accessToken)
              {            
                  console.log(response);
                  console.log(response.accessToken);
      
                  // Build Firebase credential with the Facebook access token.
                  var credential = firebase.auth.FacebookAuthProvider.credential(response.accessToken);
          
                     // Sign in with credential from the Google generated based on the Facebook Auth Token.
                     firebase.auth().signInWithCredential(credential).then((user) => {
                          
                          if (user) {
                              // User has successfully signed in.
                             // alert('user logged in successfully - 1'); 
                              this.setState ({userSignedIn: true});
                            } else {
                              // No user is signed in.
                              alert('user didnt sign in');
                            }                    
                     })               
                     .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;
                          alert(errorCode + ' ' + errorMessage);
                 });
              }
           
          }
      
          //To handle the SignOut functionality
          SignOutFromFireBase(e)
          {
              firebase.auth().signOut().then(() =>
              {
                 // alert('user successfully signed out')
                  this.setState({userSignedIn: false});
              }
              ).catch((error) => {
                  alert('error during signout - ' + error.code + ' ' + error.message);
              });
          }
      
      
          render()
          {
      
              let status ;
              // alert(this.state.userSignedIn);
               if (this.state.userSignedIn)
                   status = 'user signed in'
               else
                  status = '';
              return (
                  <div> 
                      <FacebookLogin
                          appId="FACEBOOK_APPID_GOES_HERE"
                          autoLoad={false} 
                          fields="name,email,picture"
                          callback={(e) => this.responseFacebook(e) } 
                          cssClass="my-facebook-button-class"
                          icon="fa-facebook"
                          reAuthenticate = {this.state.fbReAuthenticate}
                      />
                      <button onClick = { (e) => this.SignOutFromFireBase(e) } > Sign Out </button>
                      <p/>
                          {status }         
                      <div> 
      
                      </div>
                  </div>
              )
          }
      }

      Change Firebase configuration and Facebook App Id

      1. Replace the Firebase configuration in LIne 12 through Line 18 with configuration copied from Step A.
      2. Replace FACEBOOK_APPID in line 87 with your application id.
    8. Run npm start You should get the below output :output

Continue reading

1,155 total views, 3 views today