React.js Tutorial: Facebook Login Example

Nowadays, Facebook login is part of the authentication mechanism besides Google login on web applications or mobile apps. Using the Facebook login can be done on just the Front-end side because it uses the Facebook SDK for JavaScript. Luckily, there is a react-facebook-login module that we will use for this React.js FB login.

The following tools, frameworks, and modules are required for this tutorial:

1. Node.js (with NPM or Yarn)
2. React.js (min. version 16.8)
3. react-facebook-login
4. Terminal or Node Command Line
5. IDE or Text Editor (We are using Visual Studio Code)

Before going to the main steps, make sure you have installed Node.js and can run NPM or Yarn. To check them, type these commands.

node -v
npm -v
yarn -v

You can watch the video tutorial on our YouTube channel.

Step #1: Set up a Facebook App

To set a Facebook App and get an App ID/Secret, go to Facebook Developers Apps https://developers.facebook.com/apps/. Log in with your Facebook developer account or credentials. 

Click the `+ Add a New App` button or the MyApps -> Create App button. 

Enter the display name (we use `MyReactApp` name), then click the `Create App ID` button. Make sure to use the valid name allowed by Facebook Developers.

After checking the captcha dialog and clicking the submit button, now, you can see App ID and Secret, write them to your notepad.

Click the Settings menu on the left menu, then click Basic. Scroll down, then click the `+ Add Platform` button,n then choose the website. Fill site URL with the callback URL for OAuth authentication callback URL We are using this callback URL: http://127.0.0.1:1337/auth/facebook/callback.

Click the `Save Changes` button, and now the Facebook apps are ready to use with your React.js application.

Step #2: Install create-react-app and Create React.js App

To create a new React.js application, we will use the create-react-app tool. The create-react-app is a tool to create a React.js app from the command line or CLI. So you don’t need to install or configure tools like Webpack or Babel because they are preconfigured and hidden so that you can focus on the code. Type this command to install it.

sudo npm install -g create-react-app

Now, we can create a new React.js app using that tool.

create-react-app react-fblogin

This command will create a new React app with the name `react-fblogin`, and this process can take minutes because all dependencies and modules are also installed automatically. Next, go to the newly created app folder.

cd ./react-fblogin

Open the project in your IDE or text editor and see the content of package.json.

  "dependencies": {
    ...
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },

That React version is the version that already uses React Hooks as default. Now, `src/App.js` doesn't use class anymore. For sanitation, run this React app for the first time by typing this command.

yarn start

And here we go ,the latest React.js application that uses React Hooks with the same initial home page.

Step #3: Install and Configure react-facebook-login

We will use the React Facebook Login module/library found on the NPMJS with the name react-facebook-login. To install it, type this command.

yarn add react-facebook-login

Because now the Facebook Login forces us to use HTTPS only, we need to modify this React.js app to run with HTTPS. Open and edit `package.json`, then modify "start" in the "scripts" object.

  "scripts": {
    "start": "HTTPS=true react-scripts start",
    ...
  },

Step #4: Display Sign In With Facebook Button and Basic User Profile

Now, we will display the sign-in with the Facebook button and show the basic user profile after successful login. For UI, we will use the React Bootstrap module. Type this command to install it.

yarn add react-bootstrap bootstrap

To use Bootstrap CSS from CDN, open and edit `public/index.html`, then add this <link> before the closing of </head>.

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

Next, open and edit `src/App.js`, then replace all React.js code with this.

import React, { useState } from 'react';
import FacebookLogin from 'react-facebook-login';
import { Card, Image } from 'react-bootstrap';
import './App.css';

function App() {
  
  const [login, setLogin] = useState(false);
  const [data, setData] = useState({});
  const [picture, setPicture] = useState('');

  const responseFacebook = (response) => {
    console.log(response);
    setData(response);
    setPicture(response.picture.data.url);
    if (response.accessToken) {
      setLogin(true);
    } else {
      setLogin(false);
    }
  }

  return (
    <div class="container">
      <Card style={{ width: '600px' }}>
        <Card.Header>
          { !login && 
            <FacebookLogin
              appId="562118384400275"
              autoLoad={true}
              fields="name,email,picture"
              scope="public_profile,user_friends"
              callback={responseFacebook}
              icon="fa-facebook" />
          }
          { login &&
            <Image src={picture} roundedCircle />
          }
        </Card.Header>
        { login &&
          <Card.Body>
            <Card.Title>{data.name}</Card.Title>
            <Card.Text>
              {data.email}
            </Card.Text>
          </Card.Body>
        }
      </Card>
    </div>
  );
}

export default App;

Step #5: Run and Test React.js Login App

To run this React.js Facebook Login app, simply type this command.

yarn start

The browser will automatically open, and you will see this page if there's no Facebook login session.

Click the `Login with Facebook` button, then it will be a Facebook login dialog will pop up.

Fill in the username and password that you use for your Facebook Developers account, because in the previous Facebook App setup, we used development mode. Then click the login button.

Click the Continue as "your_name" button, and it will take you back to the previous page with this data.

That it's, React.js Tutorial: Facebook Login Example. You can find the full source code on our GitHub.

That's just the basics. If you need more deep learning about MERN Stack, React.js, or React Native you can take the following cheap course:

• Mastering React JS
• Master React Native Animations
• React: React Native Mobile Development: 3-in-1
• MERN Stack Front To Back: Full Stack React, Redux & Node. js
• Learning React Native Development

Thanks!