1. Create a React App
First, we need to create a React app. To do this, open up a terminal window and run the following command:
npx create-react-app react-facebook-login
2. Install the Facebook SDK
Next, we need to install the Facebook SDK for JavaScript. To do this, open up a terminal window and run the following command:
npm install –save facebook-sdk
3. Create a Facebook App
Now we need to create a Facebook App. To do this, go to the Facebook Developer Portal and click on the “Create App” button.
4. Configure the Facebook App
Once you have created the app, you need to configure it. To do this, go to the “Settings” tab and click on the “Basic” link.
5. Add the Facebook SDK to the React App
Now we need to add the Facebook SDK to our React app. To do this, open up the src/index.js file and add the following code:
import { FacebookSDK } from ‘facebook-sdk’;
6. Create a Login Component
Next, we need to create a Login component. To do this, open up the src/App.js file and add the following code:
import React, { useState } from ‘react’;
import { FacebookSDK } from ‘facebook-sdk’;
const Login = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLogin = () => {
FacebookSDK.login(response => {
if (response.status === ‘connected’) {
setIsLoggedIn(true);
}
});
};
const handleLogout = () => {
FacebookSDK.logout(() => {
setIsLoggedIn(false);
});
};
return (
) : (
)}
);
};
export default Login;
7. Render the Login Component
Finally, we need to render the Login component. To do this, open up the src/App.js file and add the following code:
import React from ‘react’;
import Login from ‘./Login’;
function App() {
return (
);
}
export default App;
And that’s it! You now have a working React Facebook Login example.
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.
