New Google Login for React

The Google Sign-In JavaScript Platform Library for web has been deprecated and will not work for existing uses after Mar 31, 2023 nor for newly created Google Cloud projects.

This React component creates a Google Login button using the new Google Identity Service for Web introduced in early 2022 and on successful login generates a JWT that can be used to authenticate other Google or custom services.

Installation

npm install --save react-new-google-login

Usage

import {useState} from 'react';
import GoogleLogin from 'react-new-google-login';

const App = () => {

  const [token, setToken] = useState('');
  const signin = (token) => setToken(token);
  const error = (err) => console.log(err);
  const CLIENT_ID = 'google-client-id-abc123'
  
  return (
    <div className="login-button">
        <GoogleLogin
          clientId={CLIENT_ID}
          signinCallback={signin}
          errorCallback={error}
          options={options}
          className={className}
        />
      <div>{token}</div>
    </div>
  )
}

Properties

clientId (string)

The Client ID obtained from Google Cloud Console.

1. Select the project
2. Select APIs & Services
3. Select Credentials
4. Create an OAuth2 Client
5. Copy the Client ID string
6. Be sure to add all URL origins that will be using the Google Signin Button. Include http://localhost:PORT AND http://localhost

className

Class to be added to the Google button outside wrapper. To center the login button in a use the following CSS in the enclosing :

.login-button {
  height: 45px;
  width: fit-content;
  margin: 0 auto;
}

signinCallback

Signature: signinCallback(token: string) => void

Callback function fired with a successful login. The function receives one string parameter representing the JWT returned from the Google Authentication.

errorCallback

Signature: (err: any) => void

Error function is fired on a login error. The error object is passed as the only function parameter.

options

See full reference for GsiButtonConfiguration type

Button configuration options (see full documentation)

• type: standard for full-size button or icon for a Google icon only (required)

• theme: outline | filled_blue | filled_black

• size: large | medium | small

• text: signin_with | signup_with | continue_with | signup_with

• shape: rectangular | pill | circle | square

• logo_alignment: left | center

• width: maximum width of the button

• locale: for button localization