Integration Of Facebook,Google and Twitter to React Web Application

12-02-2019    Hari Kondlapudi    Views 1895

It is much safer signing with Facebook, Google or Twitter into any standalone application instead of creating a new account and password. The more passwords you create for every website you use, they should be unique passwords. If one of the websites gets hacked hackers will be able to describe your password patterns.

If the application is more secure than Facebook, Google or Twitter with a strong password manager and two factor authentication

Step 1:Dependencies needed to install react-facebook-login.
Step 2:Create Facebook app id using your Facebook developers account if you don't have an account create developers account https://developers/facebook/apps

Note: Add your website URL in Facebook developers account while creating application id Ex:https://localhost:3000

<  FacebookLogin
appId=''" //application id
/ >

Use the above code to pass the application id created in the Facebook developers account to capture the response using response facebook callback.

Step 1:Dependencies needed to install react-google-login.

Step 2:Create google App id using your google developers account if you don't have an account create a developers account
Note: Add your website URL to google developers account while creating application id Ex:https://localhost:3000

< GoogleLogin
buttontext="Log in with Gmail"
onsuccess="{this.responseGoogle}" / >


Use the above code to pass the client id created in google developer's account to capture the response using responseGoogle callback. Icon attribute is boolean type it will display google icon,buttonText attribute displays text on button type is a string.

Step 1: Dependencies needed to install react-twitter-login.
Step 2:Create Twitter API key and API secret key using your Twitter developers account if you don't have an account create a developers account

< TwitterLogin
buttonTheme='dark' //theme
className='twitterButton'//custom class
consumerKey=''//api key
consumerSecret=''//api secret key
callbackUrl=''//callback url
/ >

Use the above code to pass the API key and API secret key created in the twitter developers account to capture the response using authCallback callback. Based on the callback URL attribute after login, the page is redirected to that particular page.


The authHandler arrow function has two parameters err and auth data. Data will be received to these parameters.

Note: Add your callback URL in Twitter developers account while creating project Ex:https://localhost:3000


Subscribe to Email Updates


Add Comments

Submit Comments

More Blogs

What is Trade Finance Transaction?

Blockchain Technology In Trade Finance Transactions

Hari Kondlapudi        Views 3044

Blockchain to transform your business

Hari Kondlapudi        Views 2448

Localization with React

Hari Kondlapudi        Views 1600

Contact Us

US Address:

Do Systems Inc,
433 Plaza Real, Suite 275
Boca Raton, FL 33432 

India Address:

Jayeesha Software Pvt Ltd
Hitech City Rd, VIP Hills,
Silicon Valley, Madhapur,
Hyderabad, TS 500081



Copyright © 2023 Do Systems Inc. All rights reserved. Privacy Policy