Login with Facebook and Google in React App

    Apr 10, 2017       by Suraj Roy
login-with-facebook-google-reacta-pp.jpg

Hi Coders, Today we will proceed to create a demo for login with Facebook and Google+ in the nodejs application. In my previous demo, I have explained to setup react application with simple steps

I will use create-react-app for every new react project. And it’s very easy and good.  Have a look on the folder structure for a basic react app.

login with facebook

 

Once basic app is created, now the next task is to install some dependencies in our react application.

npm install react-facebook-login react-google-login

After installing all these dependencies, edit the App.src component which is in the src folder of your react project to see the code below and edit it.

 

 
import React, { Component } from 'react';
import './App.css';
 
import FacebookLogin from 'react-facebook-login';
 
import GoogleLogin from 'react-google-login';
 
class App extends Component {
 
render() {
 
const responseFacebook = (response) => {
console.log(response);
}
 
const responseGoogle = (response) => {
console.log(response);
}
 
return (
<div className="App">
<h1>LOGIN WITH FACEBOOK AND GOOGLE</h1>
 
<FacebookLogin
appId="" //APP ID NOT CREATED YET
fields="name,email,picture"
callback={responseFacebook}
/>
<br />
<br />
 
<GoogleLogin
clientId="" //CLIENTID NOT CREATED YET
buttonText="LOGIN WITH GOOGLE"
onSuccess={responseGoogle}
onFailure={responseGoogle}
/>
 
</div>
);
}
}
 
export default App;
 

 

In the above file, We can see the code above where I comment the APP ID and CLIENT ID not created yet. Now, the next step is to create facebook app id and google client id. So for creating facebook id go to the link and follow the steps to create the new app id. For creating google client id go to link.

After getting the App id and Client id,  Our steps are completed to create a react app for login with google plus and facebook. Now start your react app with npm start and see the output below like this :

login with facebook

 

Pretty cool! Finally, our task completes here.

That’s all for now. Thank you for reading and I hope this post will be very helpful for implementation of social login in reactjs application.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

 

You can download complete code from here. Download Code

Reactjs facebookLogin googleLogin

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS