Integration Of Facebook,Google and Twitter to React Web Application

12-02-2019    Hari Kondlapudi    Views 46

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




 

Add Comments

Submit Comments

More Blogs


What is Trade Finance Transaction?

Blockchain Technology In Trade Finance Transactions

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

BLOCKCHAIN TO TRANSFORM YOUR BUSINESS

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

LOCALIZATION WITH REACT

Hari Kondlapudi        Views 68

Contact Us

Address:

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

Email: sales@dosystems.com
 
Copyright © Do Systems Inc. All rights reserved.