React Tutorial- How To Implement Facebook Login In A React App

How To Implement Facebook Login In A React App

In this React guide, we will get to understand how to integrate Facebook Login Button in React apps. We will be learning it from scratch using the react-facebook plugin.

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

 

If you do not know how to make apps on Facebook Developer Console, then follow the below-given steps for doing so:

Step 1- Visit the following URL http://developers.facebook.com/apps/ and create a new Facebook app.

 

Step 2- Create a Facebook app with email and app name.

 

Step 3- Then, navigate to setting->advanced and add redirect URL.

 

Step 4- Now, add a valid auth redirect URL. So, click Facebook login->setting and add a valid auth redirect URL.

 

Step 5- Finally, navigate to the Facebook developers dashboard and copy the following App ID and App SECRET.

 

Further, we need to save Facebook secret ID and secret key which is found in the Facebook Developer Console App.

 

How To Integrate Facebook Login In A React Application Tutorial And Example

Follow the below steps for implementing the above-mentioned:

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

If you are a novice in creating the React app, then you have to follow this step by simply installing a new React app by using the below command in the terminal:

npx create-react-app react-axios-tutorial

Then, we have to execute the following command for running the app:

npm start

Step 2- Install Bootstrap 4 Library

In this step, we would install the bootstrap 4 library in our React app by using the below command:

npm install bootstrap --save

 

Next, we need to add the 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 the third step, we will be executing the following command in order to install the Facebook Login Plugin in our React app:

npm install react-facebook-login

Step 4- Create Facebook Login Component

Afterward, we open the /src/ directory and create a component named FacebookLoginComponent.js. Then, we need to add the given code to 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

Here, we will be adding the FacebookLoginComponent.js file in the 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

So, friends, hope that this tutorial seemed quite easy and smooth to you. In a few steps only, we have tried to explain how to implement Facebook Login in React apps using the react-facebook plugin.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *