Google will discontinue sign in Javascript plataform

[tcelestino]

This notice will to affects the library?

Google's blog post about that: https://developers.googleblog.com/2021/08/gsi-jsweb-deprecation.html

[ariccio]

Yeah, I got this email too! I'm trying to figure out what this is going to mean for us library-users. Someone needs to look into what exactly can be transparently patched and what it is that we will need to change.

[ariccio]

Oh, and the ONE thing I'm concerned about, getAuthResponse, has a blank field in their migration docs 😂😭

It's the only one that's blank.

[neural9]

Hoping for an update to the new approach :-)

[ml242]

It looks like we have till March 2023 to come up with a solution, but I am curious about how this should be tackled.

[pmckee11]

Google eliminated many of the interfaces needed by this library so that they could force more consistency in how the sign in button gets rendered 😞

It's pretty wild that, in this day and age, Google's docs don't give any hints / help on how to use the sign in button in react. Hopefully something more will come out between now and 2023.

Until then, we pieced together a bunch of tips found around the web and ended up replacing our use of this library with this small wrapper component. Sharing here in case it's helpful https://gist.github.com/pmckee11/13b1dffbf1d271a782ed7f65480b978f

[paularah]

Looking forward to an update on the new approach too

[connectdotz]

@pmckee11 thanks for sharing the code, does the solution work in Google Chrome incognito mode, i.e. when "blocking third-party cookies" is turned on?

[pmckee11]

@pmckee11 thanks for sharing the code, does the solution work in Google Chrome incognito mode, i.e. when "blocking third-party cookies" is turned on?

Yep, the code in the gist I shared works fine in a chrome incognito tab (though you won't see the personalized sign in button with your Google profile pic - it just says "continue with Google")

[adammo94]

This new sign in method is a nightmare. I can confirm that given gist is working just fine, however there's literraly no way to modify looks of the new button programmatically :(

[zilpe]

Google eliminated many of the interfaces needed by this library so that they could force more consistency in how the sign in button gets rendered 😞

It's pretty wild that, in this day and age, Google's docs don't give any hints / help on how to use the sign in button in react. Hopefully something more will come out between now and 2023.

Until then, we pieced together a bunch of tips found around the web and ended up replacing our use of this library with this small wrapper component. Sharing here in case it's helpful https://gist.github.com/pmckee11/13b1dffbf1d271a782ed7f65480b978f

Thanks for this. Will this work with OAuth2 scopes? This current library includes the 'scope' prop which works perfectly. However, upon further inspection, the authorisation aspect of Google Identity Services still hasn't been released.

[seanr9191]

An additional reference making use of the new login method, while still maintaining a custom button design for consistency across multiple "Sign in with x" buttons. A little hacky, but the idea is to hide their button and pass-through a click to it:

https://gist.github.com/seanr9191/dcc27fc494712722453f3e8970455cbf

[toluolatubosun]

I came up with a small component that can be used to replace this library. Hope this helps someone out

import React from "react";

declare global {
    interface Window {
        GoogleAuthSuccess?: any;
    }
}

const GoogleLogin = () => {
    
    const GoogleAuthSuccess = (response: any) => {
        const token = response.credential;
        // Logic to log user in
        // Handle on server: https://developers.google.com/identity/gsi/web/guides/verify-google-id-token
        // Handle on client: https://developers.google.com/identity/gsi/web/guides/handle-credential-responses-js-functions
    };

    if (typeof window !== "undefined") {
        window.GoogleAuthSuccess = GoogleAuthSuccess;
    }

    const scriptRef = React.useRef<HTMLDivElement>(null);
    React.useEffect(() => {
        const script = document.createElement("script");

        script.src = "https://accounts.google.com/gsi/client";
        script.async = true;
        script.defer = true;

        if (scriptRef.current) {
            scriptRef.current.appendChild(script);
        }

        return () => {
            scriptRef.current?.removeChild(script);
        };
    }, [scriptRef]);

    return (
        <>
            <div ref={scriptRef}></div>

            <div 
                 id="g_id_onload" 
                 data-client_id={process.env.GOOGLE_CLIENT_ID} 
                 data-text="Continue with google" 
                 data-auto_prompt="false" 
                 data-callback="GoogleAuthSuccess"
             ></div>

            <div className="flex flex-col items-center">
                <div
                    className="g_id_signin"
                    data-type="standard"
                    data-size="large"
                    data-theme="outline"
                    data-text="continue_with"
                    data-shape="rectangular"
                    data-logo_alignment="center"
                ></div>
            </div>
        </>
    );
};

export default GoogleLogin;

[tbantle22]

I wrote a blog about migrating our React app to the new library for our sign in button if in case it's helpful for anyone: https://www.dolthub.com/blog/2022-05-04-google-signin-migration/

[MomenSherif]

@react-oauth/google is using the new google service identity SDK