@nightowl-developers/use-google-auth

Use-Google-Auth

A single React Hook that loads the google api script in the head of your application and provides login and logout with Google functionality.

Installation

npm install @nightowl-developers/use-google-auth

or

yarn add @nightowl-developers/use-google-auth

Usage

Usage is pretty straight-forward. The hook returns two functions that can be attached to a button element.

import * as React from 'react'

import useGoogleAuth from '@nightowl-developers/use-google-auth'

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false)
  
  const {
    signIn,
    signOut,
  } = useGoogleAuth({
    clientId: 'your-google-client-id',
    onLoginChange: (loggedIn) => {
      setIsLoggedIn(loggedIn)
    },
    onLoginSuccess: (response) => {
      setIsLoggedIn(true)
      console.log('logged in success', response)
    },
    onLoginFailure: (error) => {
      setIsLoggedIn(false)
      console.log('logged in failure', error)
    },
  })
  
  return <>
    {isLoggedIn && <button onClick={signIn}>Sign In</button>}
    
    {!isLoggedIn && <button onClick={signOut}>Sign Out</button>}
  </>
}

Hook API

The useGoogleAuth hook takes an object with the following properties.

Property	Default Value	Values	Description
clientId			The Google Client Id from your Google Developer Console.
cookiePolicy	'single_host_origin'	'single_host_origin', 'none', string
hostedDomains			The G Suite domain in which users must belong to sign in.
fetchBasicProfile			Adds 'profile email and openid' to scopes.
onLoginChange			Callback function when auth changes without interaction.
onLoginSuccess			Callback function when a user authenticates successfully.
onLoginFailure			Callback function when a user fails to authenticate.
onLogoutFailure			Callback function when a user logs out successfully.
onLogoutSuccess			Callback function when a user fails to log out.
prompt	'select_account'	'consent', 'select_account', 'none'	The consent flow mode (consent, select_account, or none).
redirectUrl			The uri to redirect to when uxMode is 'redirect'.
scope	['profile']		An arry of permission scopes.
src	'https://apis.google.com/js/platform.js		The URL to the Google API javascript script.
stayLoggedIn	false	true, false	When true, the user will stay logged in between visites to your site.
uxMode	'popup'	'popup', 'redirect'	Determines if the user will be redirected away from the site or if a prompt will be displayed.

important: The only required property is clientId.

Callback Signatures

Below are all of the Typescript callback signature definitions.

onLoadFailure

  onLoadFailure: (error: any) => void

onLoginChange

(loggedIn: boolean) => void

onLoginFailure

(error: GoogleFailureObject) => void

onLoginSuccess

(response: GoogleSuccessObject) => void

onLogoutFailure

(error: GoogleFailureObject) => void

onLogoutSuccess

() => void

Google Object Definitions

GoogleSuccessObject

GoogleSuccessObject {

}

GoogleFailureObject

GoogleFailureObject {

}

Credit to Original Author

This package is a moderately refactored version of React Google Login. Below are the changes that have been made to fit my own needs.

• code simplified to a single React Hook
• improved Hook prop names to better describe their use-case
• appens the google api script to the element
• added onLoginChange callback prop to listen to revoked permissions or expired tokens
• added onLogoutSuccess callback prop to execute code when a user successfully logs out