Google Sign in Prompt fails to trigger again after clicking on cancel

Question

So I've been trying to find a way to call the google prompt by using my own button in React, and not googles, cause it doesn't fit with the styles of the platform that I am busy building

So, I followed this wonderful persons idea https://stackoverflow.com/a/71431475/5413196 (the second part of it and created the functions as he states and a button that calls google.accounts.id.prompt(); onClick and it worked! I was very pleased with the result, but after testing it a few times I realized that the google prompt will only show when you sign in with an account but when you click on the cancel button or X in the prompt the prompt goes away and if you click the custom (my button) button again it doesnt bring up the prompt.

I had a look in my console for any errors, investigated local storage and saw that there's a cookie g_state:"{"i_l":1,"i_p":1234567890}" deleted it and tried again, magically the prompt pops up and I can select an account, checked the localstorage and saw that there is a cookie g_state:"{"i_l":0}" when a google account has been selected.

so I tested and clicked cancel X on the prompt and the cookie is set to g_state:"{"i_l":1,"i_p":1234567890}" and tried triggering the promt again - nothing...

so I want to create a if statement that checks if the cookie exist g_state:"{"i_l":1,"i_p":1234567890}" and if it does then delete it and trigger the google.accounts.id.prompt();

but this feels a bit hacky & messy, do any of you know how I can get the prompt to pop up every time the user clicks the button without doing the if statement check and deleting the cookie, etc ?

the code:

  const googleCallBack = (response) => {
    const token = response.credential;
    console.log('token: ', token);

  };

  const googlePrompt = () => {
    /* global google */
    google.accounts.id.initialize({
      client_id: process.env.GOOGLE_CLIENT_ID,
      callback: googleCallBack,
    });
    google.accounts.id.prompt();
  };

    <button
      onClick={googlePrompt}
      value="Log in with Google"
    />

score 1 · Accepted Answer · answered Jan 11 '23 at 14:39

Hey I got the temporary solution, I don't know if it's proper solution or not but it worked in my case.

Just remove the cookie with cookie name = 'g_state', everytime you call for the google prompt. Here is my code :

import './Auth.css';
import React, { useEffect, useState } from 'react'
import jwtDecode from 'jwt-decode';
import { CookiesProvider } from 'react-cookie';
import { useCookies } from 'react-cookie';

function Auth(){

const [cookie,  removeCookie] = useCookies(['valueName']);



/* global google*/



function handleCallbackResponse (response){
        console.log("i am callback");
        var userObject = (jwtDecode(response?.credential));


        console.log(userObject);
}


window.onGoogleLibraryLoad = ()=>{  
    console.log("initilized");
    google.accounts.id.initialize (
            {
            client_id :<fill your id> ,
            callback  : handleCallbackResponse
            }
    )   
    
    
}
 function googlePrompt(){

    removeCookie('g_state');
    google.accounts.id.prompt();
       
}

return (
<div>
    <div className="login">
        <img src={logo} alt="coming soon..."/>
        <button className="loginCard" onClick={googlePrompt}>  
            Login with email!
        </button>
    </div>
   
</div>
);
}
export default Auth;

Google Sign in Prompt fails to trigger again after clicking on cancel

1 Answers1