Cannot read properties of undefined (reading 'init')

[suresh-webonise]

[gonzae]

Getting the same! 😢

[gonzae]

Looks like this is getting deprecated: https://developers.googleblog.com/2021/08/gsi-jsweb-deprecation.html

[justacoding]

Then how to solve this problem? who has a good code example?

[devteamnau]

i am also getting the above error any help will be greatly appreciated

[vishnuprasadkv55]

Getting the same issue @naumansigma added.

[emadel1990]

Guys, please take a look of the google oauth doc

https://developers.google.com/identity/sign-in/web/sign-in?hl=es-419

[hyperparameters]

I also faced this issue as this method is deprecated. I have re wrote my code with new flow

1. Add google identity script in your index.html

   <script src="https://accounts.google.com/gsi/client" defer></script>

2. Add an element,this is where a google sigin button will appear. The identity script will insert a sigin button no need to add any button manually Keep in mind the id use this id in step 4

   <div id="googleSignInButton"></div>

3. Create an callback function to take response from google, pass this callback in step 4

   const handleCredentialResponse = (response) => {
   console.log(response)
   // you will get credential, response.credential
   // you can use jwt-decoder to decode the credential and get user details
   // pass this credentials to firebase to get firebase credentials and use it to signin
   const firebaseCredential = firebase.auth.GoogleAuthProvider.credential(response.credential);
   firebase
        .auth()
        .signInWithCredential(firebaseCredential)
        .then((user) => {console.log(user)}
   };

   more about google credential https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse

4. On your login page add this code in your react component

   useEffect(() => {
   const init = () => {
    // pass the callback function created in step 3
     window.google.accounts.id.initialize({
       client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID_LOGIN,
       callback: handleCredentialResponse,
     });
   };
   init();
   
   // initiate a pop up to login
   window.google.accounts.id.prompt();
   
   // render login button
   // use the element ID created in step 2
   window.google.accounts.id.renderButton(
     document.getElementById("googleSignInButton"),
     { theme: "outline", size: "large", width: "310px" }
   );
   }, []);

   more render button options https://developers.google.com/identity/gsi/web/reference/js-reference#GsiButtonConfiguration

[suresh-webonise]

M getting error - > Property 'accounts' does not exist on type 'typeof google' Any idea at this line window.google.accounts @hyperparameters

[hyperparameters]

@suresh-webonise did you load the <script src="https://accounts.google.com/gsi/client" defer></script> in index.html can you console.log(window.google) and check what does it shows

[uzairsaddique]

[uzairsaddique]

any help here

[uzairsaddique]

Not fixed Its a defer error Removed in the script file

On Thu, 2 Mar 2023, 4:18 pm Myke Miroshnikov, @.***> wrote:

@uzairsaddique https://github.com/uzairsaddique it is a TypeScript error. You can use @ts-ignore to fix it for now.

— Reply to this email directly, view it on GitHub https://github.com/partnerhero/gapi-script/issues/29#issuecomment-1451707540, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGLZQHYSEDYIO2VGJ3AYPJDW2B6Z7ANCNFSM6AAAAAAVFUUFYM . You are receiving this because you were mentioned.Message ID: @.***>

[krubot-sky]

Hey this is an issue for us too, did anyone find a package version which works here or found a pin that would fix the above error?

[hyperparameters]

@uzairsaddique @krubot-sky try remove defer and async make sure script is loaded <script src="https://accounts.google.com/gsi/client"></script> or you can check if the script is loaded

useEffect(() => {
    const init = () => {
     // pass the callback function created in step 3
      window.google.accounts.id.initialize({
        client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID_LOGIN,
        callback: handleCredentialResponse,
      });
    };

    // add a check here          
    if(window.google){   <<<<--------- add this condition
      init();

      // initiate a pop up to login
      window.google.accounts.id.prompt();

      // render login button
     // use the element ID created in step 2
      window.google.accounts.id.renderButton(
        document.getElementById("googleSignInButton"),
        { theme: "outline", size: "large", width: "310px" }
      );
    }  
  }, [window.google]);                    <<<<--------- add this dependency

[uzairsaddique]

Got it, thanks!

On Thu, 2 Mar 2023, 6:37 pm Tushar Kolhe, @.***> wrote:

@uzairsaddique https://github.com/uzairsaddique @krubot-sky https://github.com/krubot-sky try remove defer and async make sure script is loaded or you can check if the script is loaded

useEffect(() => { const init = () => { // pass the callback function created in step 3 window.google.accounts.id.initialize({ client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID_LOGIN, callback: handleCredentialResponse, }); };

// add a check here
if(window.google){   <<<<--------- add this condition
  init();

  // initiate a pop up to login
  window.google.accounts.id.prompt();

  // render login button
 // use the element ID created in step 2
  window.google.accounts.id.renderButton(
    document.getElementById("googleSignInButton"),
    { theme: "outline", size: "large", width: "310px" }
  );
}

}, [window.google]); <<<<--------- add this dependency

— Reply to this email directly, view it on GitHub https://github.com/partnerhero/gapi-script/issues/29#issuecomment-1451877961, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGLZQH4VB2GBL4EIWML2DDDW2CPBPANCNFSM6AAAAAAVFUUFYM . You are receiving this because you were mentioned.Message ID: @.***>

[blue-eyed-devil]

I used this package instead: https://github.com/i7N3/google-oauth-gsi and it works perfect for my needs

[azabraao]

@hyperparameters useEffect will not work for everybody because window.google shouldn't trigger the useEffect. On his case, probably it has worked because there's something else causing the component rerender that gets window.google ready to use.

Instead of a if(window.google) use window.onload:

useEffect(() => {
    const init = () => {
     // pass the callback function created in step 3
      window.google.accounts.id.initialize({
        client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID_LOGIN,
        callback: handleCredentialResponse,
      });

      // initiate a pop up to login
      window.google.accounts.id.prompt();

      // render login button
     // use the element ID created in step 2
      window.google.accounts.id.renderButton(
        document.getElementById("googleSignInButton"),
        { theme: "outline", size: "large", width: "310px" }
      );
    };

    //in case google is already in `window` we load it. Might happen if your app is a SPA.
    if (window.google) {
      init();
    } else {
      window.onload = function () {
        init();
      };
    }
  }, []);   

Taken from Google on this part of their docs: https://developers.google.com/identity/gsi/web/guides/display-button?authuser=3&hl=pt#button_rendering