Google currently is discontiuing their old "sign in with google" and I am now using their new stuff which I followed by this guide on their documentation https://developers.google.com/identity/gsi/web/reference/js-reference

so in order to render their button you need to do this

import their cdn in public index.html

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

Then you should call it like this with React

  useEffect(() => {
  google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
   google.accounts.id.renderButton(document.getElementById('google-login-button'), {
      theme: 'outline',
      size: 'large',
    });
  }, []);

and then render the button out on a div like so (and no you can stand on your head with CSS and try all the palor tricks to target this div it will apply certain styling but then the switch to this other button happens and you cant style that at all)

  <div id="google-login-button" className="customGPlusSignIn" />

then it displays this button

so if you want to make change to it you need to style it with this

   google.accounts.id.renderButton(document.getElementById('google-login-button'), {
      theme: 'outline',
      size: 'large',
    });

BUT here comes the annoying part - it jumps from the above PRE styled button to

(in this picture its bigger than the actual one, the actual one is WAAAY smaller than the first one it switches from)

And you can stand on your head with CSS and pull out all the tricks under the hood to make it stay the same size but it doesn't. IT ALWAYS STICKS TO THIS STYLING.

I really want to use my own button and I cant find a way to set the google.accounts.id.initialize({ to work with my own button.

do any of you have any idea how I can achieve WITHOUT USING A NPM package and staying vanilla google CDN (Reason why I DONT want to use an NPM package is because the NPM packages out there are using the OLD sign in with google api calls and its going to get depreciated next year March 30th (March 30th 2023)