Cannot read properties of undefined (reading 'init')

[suresh-webonise]

No description provided.

[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 <#29 (comment)>, 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 <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 — Reply to this email directly, view it on GitHub <#29 (comment)>, 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