diff --git a/frontend/web/components/GoogleButton.tsx b/frontend/web/components/GoogleButton.tsx index 2c3eab18e5ee..33c3a98b2f9d 100644 --- a/frontend/web/components/GoogleButton.tsx +++ b/frontend/web/components/GoogleButton.tsx @@ -5,6 +5,7 @@ import { Icon } from './icons' type GoogleButtonProps = { className?: string + ready: boolean onSuccess?: ( tokenResponse: Omit< TokenResponse, @@ -12,7 +13,11 @@ type GoogleButtonProps = { >, ) => void } -const GoogleButton: FC = ({ className, onSuccess }) => { +const GoogleButton: FC = ({ + className, + onSuccess, + ready, +}) => { const login = useGoogleLogin({ onSuccess: (tokenResponse) => { onSuccess?.(tokenResponse) @@ -24,7 +29,8 @@ const GoogleButton: FC = ({ className, onSuccess }) => { className={className} theme='secondary' key='google' - onClick={() => login()} + disabled={!ready} + onClick={() => ready && login()} > Google diff --git a/frontend/web/components/pages/HomePage.tsx b/frontend/web/components/pages/HomePage.tsx index c5ac2a28b4c8..d6b19592cc38 100644 --- a/frontend/web/components/pages/HomePage.tsx +++ b/frontend/web/components/pages/HomePage.tsx @@ -36,6 +36,7 @@ import useSignupExperiment from 'common/useSignupExperiment' const HomePage: React.FC = () => { const history = useHistory() const location = useLocation() + const [googleReady, setGoogleReady] = useState(false) const [allRequirementsMet, setAllRequirementsMet] = useState(false) const [email, setEmail] = useState('') const [firstName, setFirstName] = useState('') @@ -231,9 +232,12 @@ const HomePage: React.FC = () => { clientId={ JSON.parse(Utils.getFlagsmithValue('oauth_google')).clientId } + onScriptLoadSuccess={() => setGoogleReady(true)} + onScriptLoadError={() => setGoogleReady(false)} > { document.location.href = `${ document.location.origin