@nightowl-developers/use-google-auth
v0.0.1
Published
A single React Hook that loads the google api script in the head of your application and provides login and logout with Google functionality.
Downloads
5
Readme
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