In this library you can find two button that support you login using Google or Facebook.

Usage no npm install needed!

<script type="module">
  import reactLoginButtons from '';


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


  1. Create credentials on

  2. Installation

npm i react-login-buttons
  1. Import
import { FacebookButton, GoogleButton } from 'react-login-buttons';
  1. 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} />
  1. 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) => {


   * 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) => {

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.