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.
Facebook Login in React Application Tutorial & Example
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.