import { FC, useEffect, useRef, useCallback, useState } from "react"; import Script from "next/script"; export interface IGoogleLoginButton { handleSignIn: React.Dispatch; clientId: string; } export const GoogleLoginButton: FC = (props) => { const { handleSignIn, clientId } = props; // refs const googleSignInButton = useRef(null); // states const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false); const loadScript = useCallback(() => { if (!googleSignInButton.current || gsiScriptLoaded) return; window?.google?.accounts.id.initialize({ client_id: clientId, callback: handleSignIn, }); try { window?.google?.accounts.id.renderButton( googleSignInButton.current, { type: "standard", theme: "outline", size: "large", logo_alignment: "center", text: "signin_with", } as GsiButtonConfiguration // customization attributes ); } catch (err) { console.log(err); } window?.google?.accounts.id.prompt(); // also display the One Tap dialog setGsiScriptLoaded(true); }, [handleSignIn, gsiScriptLoaded, clientId]); useEffect(() => { if (window?.google?.accounts?.id) { loadScript(); } return () => { window?.google?.accounts.id.cancel(); }; }, [loadScript]); return ( <>