# Facebook Login API integration in React with example

You might have signed up with Facebook on multiple platforms like Spotify, Netflix, Instagram, Airbnb, and a lot more. It is the simplest and most reliable way that saves time and makes your life easy. All these platforms are built on React and use the same API provided by Facebook that can be integrated into your local app as well.

To integrate Facebook authentication and login in React application, there are multiple libraries available, so we are going to use the 'react-facebook-login' one.

First, you need to have a Facebook account and then you can go to the Developer console here- [https://developers.facebook.com/apps](https://developers.facebook.com/apps)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673482417408/02c0c5de-0f26-41cd-bd29-db3be5176926.png align="center")

Now, you can create a new app from the button

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673482511901/7237da6d-7fb6-4a64-8384-db265a1c587e.png align="center")

After that, you can start with any of the options which provide a different range of data, but for our scope as of now, you can select "Business".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673482666755/6705b6f1-3a70-4375-a677-f53df821238a.png align="center")

Now, you can select the app name as per your convenience like 'react-login-app', and proceed further to create app.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673482811907/9e5bd24c-bca4-4c47-9c6c-53cb2d13d05b.png align="center")

Now your app is ready with the APP ID as shown on the menu bar.

Again you have to click settings > basic > add platform at the bottom of the page. Then you'll able to see this popup and select the web option.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673483017372/d21f3b74-a65c-4ec1-b6f1-57b13dc491ca.png align="center")

Once you select the web option, select the 'add platform' at the bottom and add the url as shown.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673653535200/6a887b2b-953d-45a3-89db-d8e97dfc93ae.png align="center")

now, we can start with the integration of the same with React app.

1. First, create React app
    
    ```javascript
    npx create-react-app react-facebook-login-app
    ```
    
2. Then move inside the app folder with the command:
    
    `cd react-facebook-login-app`
    
3. Install bootstrap library package
    
    `npm install bootstrap --save`
    
4. Now, install the react-facebook-login package
    
    `npm install react-facebook-login`
    
5. Create Facebook login component as FacebookLoginComponent.js
    
    ```javascript
    import React, { useState } from "react";
    import FacebookLogin from "react-facebook-login";
    import "./App.css";
    
    function FacebookLoginComponent() {
      const [login, setLogin] = useState(false);
      const [data, setData] = useState({});
      const [picture, setPicture] = useState("");
    
      const responseFacebook = (response) => {
        console.log(response);
        // Login failed
        if (response.status === "unknown") {
          alert("Login failed!");
          setLogin(false);
          return false;
        }
        setData(response);
        setPicture(response.picture.data.url);
        if (response.accessToken) {
          setLogin(true);
        } else {
          setLogin(false);
        }
      };
      const logout = () => {
        setLogin(false);
        setData({});
        setPicture("");
      };
    
      return (
        <div className="container">
          {!login && (
            <FacebookLogin
              appId="569720507786195"
              autoLoad={false}
              fields="name,email,picture"
              scope="public_profile,email,user_friends"
              callback={responseFacebook}
              icon="fa-facebook"
            />
          )}
    
          {login && (
            <div className="card">
              <div className="card-body">
                <img className="rounded" src={picture} alt="Profile" />
                <h5 className="card-title">{data.name}</h5>
                <p className="card-text">Email ID: {data.email}</p>
                <a href="#" className="btn btn-danger btn-sm" onClick={logout}>
                  Logout
                </a>
              </div>
            </div>
          )}
        </div>
      );
    }
    
    export default FacebookLoginComponent;
    ```
    
    Now, you have to replace the appId with yours one.
    
6. Add the selector to this component in app.js file.
    
    ```javascript
    import './App.css';
    import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
    import FacebookLoginComponent from './facebooklogin.component';
    
    function App() {
      return (
        <div className="App">
           <h1>Facebook Login Tutorial in React App</h1> 
           
           <FacebookLoginComponent />
    
        </div>
      );
    }
    
    export default App;
    ```
    
    1. Run the application with `npm start`
        
        and check on [http://localhost:3000](http://localhost:3000)
        
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673654978696/eb13afa5-05c5-4cb9-ad50-43222df066fc.png align="center")
    
    That's it. you can check out the example here-
    
    %[https://codesandbox.io/s/react-facebook-login-example-6369em?file=/src/FacebookLoginComponent.js] 
    

[https://codesandbox.io/s/react-facebook-login-example-6369em?file=/src/FacebookLoginComponent.js](https://codesandbox.io/s/react-facebook-login-example-6369em?file=/src/FacebookLoginComponent.js)

Happy coding, Thank you!