0.0.1 • Published 3 years ago
@nightowl-developers/use-google-auth v0.0.1
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