React JS Facebook Login Example Tutorial

Integrate Facebook login button in react apps; In this example tutorial, you will learn from scratch how to implement facebook login in react apps using react-facebook-plugin.

If you want to integrate facebook login authentication in your react app. So you will not need any react plugin for this. In this tutorial, you will learn how to add a facebook login button in react app with using react-facebook plugin.

Before you can integrate Facebook Sign-In into your react app, you must create a client ID, which you need to call the sign-in API.

If you do not know how to make apps on Facebook Developer Console. So you can make an app in the Facebook Developer Console by following the steps given below:

Step 1 – Visit the following url https://developers.facebook.com/apps/ and create a new facebook app.

Step 2 – Create facebook app with email and app name look like below picture:

Step 3 – Then, Navigate to setting->advanced and add redirect URL, looks like below picture:

Step 4 – Now, add valid auth redirect url. So, click facebook login->setting and add valid auth redirect URL, looks like below picture:

Step 5 – Finally, Navigate to facebook developers dashboard and copy the following App ID and App SECRET, looks like below picture:

Now, save Facebook secret id and secret key, Which is found from the Facebook Developer Console App.

How to integrate Facebook Login API into your React app

Use the following steps to integrate facebook login in react js applications; as follows:

• Step 1 – Create React App
• Step 2 – Install Bootstrap 4 Library
• Step 3 – Install and Configure react-facebook-login
• Step 4 – Create Facebook Login Component
• Step 5 – Import Facebook Login Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app react-axios-tutorial

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Bootstrap 4 Library

In this step, execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>React Facebook Login Example</h2>
    </div>
  );
}

export default App;

Step 3 – Install and Configure react-facebook-login

In this step, execute the following command to install Facebook login plugin into your react app:

npm install react-facebook-login

Step 4 – Create Facebook Login Component

In this step, /src/ directory and create a component, which names FacebookLoginComponent.js. Then add the following code into it:

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

class FacebookLoginComponent extends React.Component{
    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);
        }
    }
    render(){
        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 FacebookLoginComponent;

Step 5 – Import Facebook Login Component in App.js

In this step, you need to add the FacebookLoginComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import FacebookLoginComponent from './FacebookLoginComponent';

function App() {
  return (
    <div>
      
        <FacebookLoginComponent />

    </div>
  );
}

export default App;

Conclusion

Add Facebook login button in react apps; In this example tutorial, you have learned from scratch how to implement facebook login in react apps using react-facebook-plugin.

Recommended React Tutorials