React 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 to your React Apps

• 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