Login with Facebook and Google using ReactJS and RESTful APIs

Login with Facebook and Google using #ReactJS and RESTful APIs

  • There are a number of advantages to implementing social login in your web applications.
  • First of all, it best secures the user credentials, the user can use a single login for accessing multiple sites, this can automatically access the user details for further use, and many such.
  • This article is about how to implement the social login with Facebook and Google using ReactJS and RESTful API.
  • This social login helps to store social data of the logged in user into the database.
  • So that it provides you valid user data like email, name, and others.

How to implement Login with Facebook and Google using ReactJS and RESTful APIs

To build the user social login system, you have to create a user table.

User table contains all the users social details.

Open your terminal or command prompt and execute the following command, this will install create-react-app globally. Before that you must setup your machine with latest Node.js software.

React project default port is 3000. Open your browser and launch the URL http://localhost:3000

Follow this React Welcome Page and Routing tutorial for setting up pages like Welcome and Home.

Go to Facebook developer page and create anapplication.

Dashboard scroll page down and choose platform as Web.

Enter your website URL.

It will turn on app login permissions.

App dashboard your will find the client ID.

Select web application and enter your website url.

It will generate client ID.

Page routing component, here Welcome component is the default page and * refers to 404 page.

Import Facebook and Google login compoments and modify application ids. Once API connection is successful, it will store the user data in session storage and redirects to the home page.

import GoogleLogin from ‘react-google-login’;

import {PostData} from ‘../../services/PostData’;

import {Redirect} from ‘react-router-dom’;

import ‘./Welcome.css’;

       loginError: false,

          name: res.name,

          provider: type,

 …

Login with Facebook and Google using ReactJS and RESTful APIs