One of the ways to attract new users to register is that users can easily register. By utilizing the large number of active users on Facebook and integrating Facebook login API into our website, it will increase the probability of increasing users on our website by simply doing one tap on sign up that are already integrated with existing accounts on Facebook.
Today, we're going to learn how to integrate Facebook login API into your React app. Why do we need that? According to data from oberlo, Facebook is one of the social media which has more than 2.8 billion active users every day. Where this number is spread across Facebook's main business, namely Facebook, WhatsApp, Instagram, and Messenger.
One of the ways to attract new users to register is that users can easily register. By utilizing the large number of active users on Facebook and integrating Facebook login API into our website, it will increase the probability of increasing users on our website by simply doing one tap on sign up that are already integrated with existing accounts on Facebook.
In this tutorial, we will show you how to:
In this tutorial, we will use several frameworks, tools and modules as below.
After all the requirement are available, we need to register as a Facebook Developer Apps. To register, we need to log in using your existing Facebook account at https://developers.facebook.com/apps/ . If you haven't logged in to Facebook, you will be asked to enter your email or mobile number and password.
After that, you will redirect to https://developers.facebook.com and click “Get Started” if the first you register at Facebook Developer Apps.
You will be taken to the registration dashboard , and click “Continue”
Fill container of Primary Email with your email other than the Facebook account email that has been registered
You will get an email code from Facebook. Fill that container with the code you got earlier.
Choose as “Developer” and the press button “Complete and Registration”
We will be redirected to Facebook for the Developer dashboard
Press button “Create App” for create app in Facebook Developer.
Choose “Build Connected Experiences” and the press button “Continue”
Fill the App Display Name with what you want to name this app and your email that was previously registered. In this tutorial we use the name “React_Login”. After that, press the button “Create App”.
After checking the captcha dialog and click submit button, we will be redirected to the Facebook Application Dashboard.
To create a React project we use the command line or CLI. Referring to the https://reactjs.org/docs/create-a-new-react-app.html#gatsby-focus-wrapper, we can create a React project with the command
npx create-react-app react-fb_login
This command works by downloading the latest React Js template from the repository. Or we can also download the React Js template and place it globally on our computer, so that every time we create a new React project we don't need to download it from the repository. The command line is as follows.
npm install -g create-react-app
create-react-app react-fb_login
Next, go to “ react-fb_login ” folder and open the project in your IDE or Text Editor. Below is the template structure for our React application
You can also see "package.json" in our React project folder to see what packages are installed by default and the versions of the packages.
We can run our React project which is the default design template for create-react-app. To run, we only need to call this command in the terminal, where previously we have directed our terminal into our React project folder (react_fb_login).
npm start
By default the React app runs on localhost with port 3000.
In this tutorial we will be using the "react-facebook-login" package / modules / library which we will be installed in our React application project. To install this library we just need to use the command below in the terminal from our project directory.
npm install react-facebook-login
After the install is complete, we will see the “ react-facebook-login ” package has been added to the package.json file.
We need to set up our React app project to running with HTTPS. This is because currently Facebook Login need to use HTTPS. To set this up, we need to replace the script of "start" in our packagae.json file with the start script below. The packagae.json file is in the directory "react-fb_login/package.json "
"start": "HTTPS=true react-scripts start",