react-login-buttons
v0.2.0
Published
In this library you can find two button that support you login using Google or Facebook.
Downloads
32
Readme
In this library you find two buttons that let you login using
- facebook account
- google account
gapi does not work in chrome (most of all if chrome is managed by the organization) by default, t make it works:
- chrome://flags/ and set 'SameSite by default cookies' disabled
Usage
Create credentials on
- Facebook: https://developers.facebook.com/apps
- Google: https://console.developers.google.com/apis/credentials https://developers.google.com/identity/sign-in/web/reference
Installation
npm i react-login-buttons
- Import
import { FacebookButton, GoogleButton } from 'react-login-buttons';
- Add buttons to the page
<GoogleButton clientId='Your OAuth 2.0 Client IDs' onFailure={googleOnFailure} onSuccess={googleOnSuccess} />
<FacebookButton appId='Your Facebook App ID' onFailure={facebookOnFailure} onSuccess={facebookOnSuccess} />
- Define the function to manage the callbacks
/**
* Call this api and get the token, save it in your state
* @param {data from Facebook} googleProfile
*/
const googleOnSuccess = (googleProfile) => {
console.log('Google success', googleProfile);
}
/**
* @param {error from Google} error
*/
const googleOnFailure = (error) => {
console.log(error);
}
/**
* Call this api and get the token, save it in your state
* @param {data from facebook} facebookProfile
*/
const facebookOnSuccess = (facebookProfile) => {
console.log('Facebook success', facebookProfile);
}
/**
* @param {error from facebook} error
*/
const facebookOnFailure = (error) => {
console.log(error);
}
Available Scripts
In the project directory, you can run:
npm start
Runs the Demo app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
npm run distribute
Builds (made for windows) the app for production to the dist
folder.
It correctly bundles the React component.
npm publish
Publish the dist on npmjs.