import { FC, useEffect, useRef, useCallback, useState } from "react"; import Script from "next/script"; type Props = { handleSignIn: React.Dispatch; clientId: string; type: "sign_in" | "sign_up"; }; export const GoogleSignInButton: FC = (props) => { const { handleSignIn, clientId, type } = 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: type === "sign_in" ? "signin_with" : "signup_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, type]); useEffect(() => { if (window?.google?.accounts?.id) { loadScript(); } return () => { window?.google?.accounts.id.cancel(); }; }, [loadScript]); return ( <>