Install

$ pnpm add google-oauth-gsi@latest

Seamless sign-in and sign-up flows

User authorization for Google APIs (with custom button)

How to use

import{GoogleOAuthProvider}from'google-oauth-gsi';exportconstgoogleProvider=newGoogleOAuthProvider({clientId:process.env.PUBLIC_GOOGLE_CLIENT_ID,onScriptLoadError:()=>console.log('onScriptLoadError'),onScriptLoadSuccess:()=>console.log('onScriptLoadSuccess'),});

Sign In With Google

import{googleProvider}from'./services';constlogin=googleProvider.useGoogleLogin({flow:'auth-code',onSuccess:(res)=>console.log('Logged in with google',res),onError:(err)=>console.error('Failed to login with google',err),});// Call login() on button click

One-tap

import{googleProvider}from'./services';constoneTap=googleProvider.useGoogleOneTapLogin({cancel_on_tap_outside:true,onSuccess:(res)=>console.log('Logged in with google',res),});// Call oneTap() on onMount or onScriptLoadSuccess

import{buttonEl}from'./somewhere';import{googleProvider}from'./services';constrenderButton=googleProvider.useRenderButton({useOneTap:true,element:buttonElasHTMLElement,onError:()=>console.error('Failed to render button'),onSuccess:(res)=>console.log('Logged in with google (render button)',res),});// Call renderButton() onMount or onScriptLoadSuccess

import{googleLogout}from'google-oauth-gsi';googleLogout();

Custom login button (implicit & authorization code flow)

Implicit flow

import{googleProvider}from'./services';constlogin=googleProvider.useGoogleLogin({flow:'implicit',onSuccess:(tokenResponse)=>console.log(tokenResponse),});// Call login() when you need

Authorization code flow

import{googleProvider}from'./services';constlogin=googleProvider.useGoogleLogin({flow:'auth-code',onSuccess:(codeResponse)=>console.log(codeResponse),});// Call login() when you need

Checks if the user granted all the specified scope or scopes

import{hasGrantedAllScopesGoogle}from'google-oauth-gsi';consthasAccess=hasGrantedAllScopesGoogle(tokenResponse,'google-scope-1','google-scope-2',);

Checks if the user granted any of the specified scope or scopes

import{hasGrantedAnyScopeGoogle}from'google-oauth-gsi';consthasAccess=hasGrantedAnyScopeGoogle(tokenResponse,'google-scope-1','google-scope-2',);

API

GoogleOAuthProvider

useGoogleLogin (Both implicit & authorization code flow)

useGoogleLogin (Extra implicit flow props)

useGoogleLogin (Extra authorization code flow props)

useGoogleOneTapLogin

useRenderButton

How to develop?