Facebook Login Implementation in React and Node.js

Use Facebook Login with React and Node.js to provide secure one-click social sign-on and simplify user registration.

Key Points

Social logins such as Facebook decrease signup time by 3x and boost user acquisition.
Get access to authenticated user profiles (email, name, picture) using Facebook Graph API.
Utilize access tokens and backend validation for secure and scalable login through Facebook OAuth 2.0.

Co-Founder

Vandana Abrol

3 min read

With Over 14 years of Experience in the IT Field, Helping Companies Optimise there Products for more Conversions

One of the most seamless ways to improve user authentication is through social media platforms such as Facebook, it gives a smooth user experience while providing sufficient levels of security. The very advantage of Facebook authentication is that it allows users to sign in at one click from their Facebook account, without having to add yet one more password.

I have put together an extensive article to walk you through the entire process of Facebook Login implementation using React for frontend and Node.js for backend, from setting up Facebook Developer App to saving the authenticated user data in your database.

Step 1: Set Up Your Facebook Developer App

Before you can integrate Facebook Login into your app, you must first configure a Facebook App using the Facebook Developers portal.

Create a Facebook Developers Account and App

Go to Facebook Developers and log in with your Facebook credentials.
Click on "My Apps" at the top right corner, then click "Create App".
Choose "For Business" or another type based on your use case.
Enter the necessary information like app name and email, and click "Create App".

Enable Facebook Login Product

Once your app is created, navigate to the dashboard.
On the left sidebar, go to Products > Facebook Login and click "Set Up".
Choose "Web" as the platform.

Configure Web Settings

Under Facebook Login > Settings, input your site’s domain in the Valid OAuth Redirect URIs field (e.g., https://yourdomain.com/auth/facebook/callback).
Go to Settings > Basic, and copy your App ID and App Secret. You’ll need them in both the frontend and backend.

Get the SDK Script

After setting up the Facebook Login, Facebook will provide you a JavaScript SDK script.
Copy this and paste it into your HTML file (typically public/index.html in a React project).
Replace appId with your actual Facebook App ID and specify the API version.

Step 2: React Frontend Implementation

Now that the Facebook SDK is set up, let’s implement the login logic in your React application.

Add SDK Script

Ensure that the above Facebook SDK script is present in your index.html. And make sure to change app-id with your appID

                                        const handleFacebookLogin = async () => {
   try {
     window.FB.login(
       function (response) {
         if (response.authResponse) {
           //Here it will provide USERID and ACCESSTOKEN 
         }
       },
       {
         scope: "email, pages_show_list,public_profile",
       }
     );
   } catch (error) {
     console.log(error);
   }
 };

Create the Facebook Login Button and Handler

After calling this API it will return UserID and accessToken in return which will help us get user details
You can now build the Facebook Login logic inside your component.

Step 3: Node.js Backend Integration

Once the React frontend sends the userId and accessToken, your backend will verify and fetch the user’s details.

Set Up Express Route

In your Node app (e.g., using Express) , create a endpoint to get and save userdetails which will require userId and accessToken which we have sent from the client
Call a Facebook API which will get user details

                                          let urlGraphFacebook = `https://graph.facebook.com/v20.0/${userId}?fields=id,name,email&access_token=${accessToken}`;
   let result = await axios.get(urlGraphFacebook);

After getting the user details save it in database as you want

Benefits of Facebook Login

From the developer and user perspective, Facebook-based authentication provides a wealth of benefits.

Easy User Authentication

Users do not have to remember extra credentials; having Facebook Login with just one click helps reduce friction at signup.

Quick Onboarding

User information, such as name and email, gets imported from Facebook to fill and ease registration.

Secure

Facebook grants OAuth 2.0 protocol, which is very secure in protecting users' data; you need not even worry about password storage and hashing.

High Conversion Rates

Social login provides more engagement and produces greater signup rates than the conventional email and password approach.

Works Both On Mobile & Web

An implementation could be distinguished between web and mobile apps since the latter uses Facebook's own mobile SDKs, thus ensuring added flexibility.

Final Words

React and Node.js-based Facebook login integration offers a modern and convenient way of authentication. It increases the user satisfaction while cutting back the time spent on building an entirely new, secure authentication system.

The given system works for both your web and mobile app development, making it a versatile authentication solution.

Do you want help implementing this?