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
