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
autoLoad={false}
fields="name,email,picture"
callback={this.responseFacebook}
/ >

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 
https://console.developers.google.com/
Note: Add your website URL to google developers account while creating application id Ex:https://localhost:3000

< GoogleLogin
clientid=""//id
buttontext="Log in with Gmail"
cookiepolicy="{'single_host_origin'}"
icon="{true}"
id=""
onfailure="{this.responseGoogle}"
onsuccess="{this.responseGoogle}" / >

responseGoogle=async(response)=>{
      console.log(response)


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 https://developer.twitter.com/

< TwitterLogin
buttonTheme='dark' //theme
className='twitterButton'//custom class
authCallback={this.authHandler}
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.

authHandler=(err,authData)=>{
     console.log(err,authData)
}

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

Subscribe


Add Comments

Submit Comments

More Blogs


What is Trade Finance Transaction?

Blockchain Technology In Trade Finance Transactions

Hari Kondlapudi        Views 3044
block-chain-transform-your-business

Blockchain to transform your business

Hari Kondlapudi        Views 2448
block-chain-transform-your-business

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


Email: sales@dosystemsinc.com
 

Navigation

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