Integrate Facebook Login For A Website

Introduction

Authentication is playing an important role in software development to prevent unauthorized user access. For midlevel rapid developments, it will take almost 20% of the spending time and work. Due to this kind of work and time, we could have gone for social logins. Social logins are the single sign-in for end users and can able to do within a short period by existing login information such as Gmail, Apple, and Facebook. 

In this post, we are going to explore one of the popular social logins that Facebook login and how we can integrate it into our react website by the npm package. Integrating a Facebook login for your website is one of the cool features. We can achieve this easily in react website by facebook login API and npm package.

For google login authentication. Click here

Prerequisites

• Facebook account.
• Facebook app Id
• Npm package - react-facebook-login
• Knowledge  of react developments

Several steps are to be followed,

1. Login to your Facebook developer account and create an App.
2. Enable login with the javascript SDK and add a domain for the test.
3. Create a react app and implement a simple login form.
4. Configure Facebook login by Npm package
5. Configure localhost on HTTPS protocol
6. Run the app, sign in and get user details.

Let's get started,

Integrating Facebook login in your application can be done either manually or help of third-party plugins. Here, we will use one of the popular NPM packages named “react-facebook-login” on the react website. 

Here are the step-by-step guides on how to create the Facebook app and React app to integrate by Facebook login API. 

1. Login to your facebooks developer account and create an App

Go to the Facebook developer and log in with your Gmail. Make sure this email has been logged in to Facebook.

Once logged in, you will redirect to the “Meta for Developers” dashboard. 

Click on the "Create App" button available on the top right of the window. 

Under the Type, select your application type (For testing purposes, selected as a consumer) and hit Next.

Under the Details, add an application name that will show on the MyApp page that we can change the settings later. 

Add contact email: It will use contact you about your app related to policy, recovery, and restrictions. 

You may be forced to verify with Gmail. So re-enter your password and submit. 

Once created an App, you will be redirected to the app dashboard. There, you should select/set up the Facebook login product under the product list. 

Under the quick start, select the platform for your app. As you know, our demo is React website. So I will go for the web platform. 

Enter your site URL. For testing purposes, I am using my local host >> Click on Save to create the app.

Once done with the above-mentioned steps, we will get the app rate limit card including the app name and an app ID.

Copy the App Id. We will be using this in our react project. 

Check the below screenshot.

2. Enable login with the Javascript SDK and add a domain for the test

Note: Doggel “Login with the JavaScript SDK”. open your created app >> Under products Click on the Facebook Login >> settings >>Client OAuth settings >> Login with the JavaScript SDK

Under the Allowed Domains for the JavaScript SDK, add your domain because the Login and signed-in functionality of the JavaScript SDK will only be available on these mentioned domains. For our testing purpose, I have given the domain as localhost.

Once done above changes, Click on Save Changes to complete the app creation. 

3. Create react app and implement a simple login form

Let's dive into creating react website. 

From your project path run the command to create a fresh new app. 

create-react-app fb-login –template typescript

4. Configure Facebook login by Npm package

Open the app and run the below-mentioned command to install the package. 

npm i @greatsumini/react-facebook-login

Open the App.js file to implement a simple login form.

Import the package as given below.

import FacebookLogin from '@greatsumini/react-facebook-login

Use FacebookLogin as a tag after the login button. We can modify the Facebook login button with a prebuilt custom style. 

Add the appId props and give a value copied from the Facebook app. 

Here, we are going to use three prebuilt functions named onSuccess, onFail, and onProfileSuccess.

• OnSuccess(): We will get a response once user authentication has been done. 
• onFail(): Will trigger If the authentication got rejected or any other fails. 
• onProfileSuccess(): We will get a set of responses including email, useId, name, and Picture(profile picture) 

See the complete source code.

App.tsx

import React from 'react';
import './App.css';

import FacebookLogin from '@greatsumini/react-facebook-login';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <form className='form'>
        <div className="flex-container">
          <div className='input'>
            <input className='name' placeholder='UserName' />
          </div>
          <div className='input'>
            <input className='password' placeholder='Password' />
          </div>
          <div className='login-btn'>
            <button className='btn'>Log In</button>
          </div>
          <div className='or'>Or</div> 
          <div className='facebook-btn'>
            <FacebookLogin
              appId='618272883341221'
              onSuccess={(response) => {
                console.log('Login Success!', response);
              }}
              onFail={(error) => {
                console.log('Login Failed!', error);
              }}
              onProfileSuccess={(response) => {
                console.log('Get Profile Success!', response);
              }}

              style={{
                backgroundColor: '#4267b2',
                color: '#fff',
                fontSize: '16px',
                padding: '12px 24px',
                border: 'none',
                borderRadius: '4px',
                width: '60%',
                height: '5vh'
              }}
            />  
          </div>  
        </div>
        </form>
        
      </header>
    </div>
  );
}

export default App;

App.css

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.form{
  height: 70vh;
  width: 30vw;
  background-color: aliceblue;
}

.flex-container{
  display: flex;
  flex-direction: column;
}

.input{
  color: #282c34;
  font-size: 20px;
  color: #282c34;
  
}
.name{
  margin-top: 10vh;
  height: 4vh;
  width: 18vw;
  border-radius: 10px;
  font-size: 20px;
}

.password{
  margin-top: 3vh;
  height: 4vh;
  width: 18vw;
  border-radius: 10px;
  font-size: 20px;
}

.login-btn{
  margin-top: 4vh;
}

.btn{
  background-color: aqua;
  height: 4vh;
  width: 18vw;
  border-radius: 10px;
  font-size: 20px;
}

.or{
  margin-top: 2vh;
  color: #282c34;
}

.facebook-btn{
  margin-top: 3vh;
}

5. Configure localhost on HTTPS protocol

Make sure your localhost is running with SSL (HTTPS) mode because Facebook does not allow nonsecure protocol sites. 

As we know, the react app can run by “npm run start” or “npm start” because we have to run script in the package.json file as "start: react-scripts start" so just change this to as below 

start: HTTPS=true react-scripts start

It will run our react localhost in HTTPS protocol instead of HTTP. 

You probably see that the site is not secure. Just leave it. Because it currently runs React self-service SSL certificate.

6. Run the app, sign in and get user details.

Now, it's time to fetch user data from Facebook. Run the app by “npm start” and click on the “Login Facebook” button It will ask for your Gmail authentication through a popup. 

Just complete authentication >> open the console by inspecting on the chrome >>  you will get responses like onSuccess and onPrfileSuccess. 

In the onProfileSuccess, you will get the set details of the user. 

Check the video for a detailed view. 

Conclusion

In this article, we have learned how to create a Facebook app, Facebook login API, and a simple react login form to integrate social authentication into our website. 

I hope, you understood very well. Feel free to comment in the below comments section if you have any queries or doubts. Stay tuned for more interesting upcoming articles.