React-google-login-ng NPM

React Google Login NG

This is a simple package for use the Google autentication. You can use the Google Button and/or Google One Tap.

Use the most recent GSI library

Install

npm install --save react-google-login-ng

Usage

Import the Google Login Component from react-google-login-ng package

  import GoogleLogin from 'react-google-login-ng'

Then use it in your component like this:

   <GoogleLogin
      client_id='your_client_id_here'
      successCallback={({ credential, select_by }) => {
        console.log(credential, select_by);
      }}
    />

Props

`ComponentProps` (Extended with `T_GoogleConfig` type)

Required	Prop	Type	Description
✓	client_id	string	Google client ID
✓	successCallback	(resp: T_ResponseData)=>void	Funtion after google login response
	disabled	boolean	To disable login
	script	string	For load another Google Script
	method	"one_tap" \| "button"	If method is not specified, will show One tap and button to do login
	config	T_ButtonConfig
	oneTapListener	(Notification)=>void	Event listener on One Tap Propmpt

`T_ResponseData`

Prop	Type	Description
credential	string	Google credential response (JWT)
select_by	'auto' \| 'user' \| "user_1tap" \| 'user_1tap' \| 'btn' \| 'btn_confirm' \| 'btn_add_session' \| 'btn_confirm_add_session'	Type of action of user to login
token_info_url	string	Url to fetch user data

`T_ButtonConfig`

Prop	Type	Description
width	number	Button width
type	'standard' \| 'icon'
theme	'filled_black' \| 'outline' \| 'filled_blue'
size	'large' \| 'medium' \| 'small'
shape	'pill' \| 'rectangular'
text	'signup_with' \| 'signup_with' \| 'continue_with' \| 'signin'
logo_alignment	'center' \| 'left'
locale	string	Button text language
click_listener	() => void	Function when button is clicked

`T_ButtonConfig`

Prop	Type	Description
auto_select	boolean	This field determines if an ID token is automatically returned without any user interaction when there's only one Google session that has approved your app before. The default value is false
login_uri	string
native_callback	T_ResponseHandler
cancel_on_tap_outside	boolean	This field sets whether or not to cancel the One Tap request if a user clicks outside the prompt. The default value is true
prompt_parent_id	string	This attribute sets the DOM ID of the container element. If it's not set, the One Tap prompt is displayed in the top-right corner of the window
nonce	string	This field is a random string used by the ID token to prevent replay attacks. See the following table for further information
context	'use' \| 'signup' \| 'signin'	This field changes the text of the title and messages in the One Tap promp
state_cookie_domain	boolean	If you need to display One Tap in the parent domain and its subdomains, pass the parent domain to this field so that a single shared-state cookie is used
ux_mode	'popup' \| 'redirect'	Use this field to set the UX flow used by the Sign In With Google button. The default value is popup. This attribute has no impact on the OneTap UX
allowed_parent_origin	string \| string[]	The origins that are allowed to embed the intermediate iframe. One Tap will run in the intermediate iframe mode if this field presents
intermediate_iframe_close_callback	string
itp_support	boolean
use_fedcm_for_prompt	boolean	Default: TRUE - It allows the browser to control user sign-in messages and mediates the access flow between your website and Google
login_hint	string	To skip account selection, provide a suggestion for the user. An email address, or the value of an ID token field.sub
hd	string	Limit the selection of accounts per domain