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

Required	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

Required	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

Learn More

For more information about Google autentication service, visit the follow GSI link

For more information about Google Configuration params, visit the follow GSI Config props link

---