Adopting FedCM regarding Chrome blocking third party cookies in future. Seeing warnings: Chrome will block third party cookies

[rjtbansal]

Firstly thanks for this awesome library! I am using it for Google SSO on our web app.

Do we plan to make tweaks to the library for adopting FedCM https://developers.google.com/identity/gsi/web/guides/fedcm-migration?

Here's the Google docs that talk about third party cookies https://developers.google.com/identity/gsi/web/guides/supported-browsers#third-party_cookies

Here's the migration guide: https://developers.google.com/identity/gsi/web/guides/fedcm-migration#migrate_your_web_app

As an example below the screenshot I see when Google icon loads using this library:

[MuhammadAakash]

I have also received an email from Google to migrate to the FedCM over my website. I am using this library for the Google sign-in, and One Tap Sign in feature.

[MuhammadAakash]

@MomenSherif I'm interested in contributing to this excellent library. Could you please guide me a little bit on how to address this current issue? And I'm unable to find any references on how to set up the project and contribute to it.

Thanks

[VaibhavTessell]

@rjtbansal @MuhammadAakash I think they have already integrated FedCM in the library in this PR: https://github.com/MomenSherif/react-oauth/pull/316

[VaibhavTessell]

<GoogleLogin
    clientId="CLIENT_ID"
    text="Sign in with Google"
    onSuccess={onSuccessHandler}
    onError={onFailureHandler}
    ux_mode="redirect"
    useOneTap
    auto_select

    // New Addition for FedCM integration
--> containerProps={{ allow: "identity-credentials-get" }}
--> use_fedcm_for_prompt

/>

After adding the containerProps and use_fedcm_for_prompt Google login started working with FedCM integration.

@rjtbansal @MuhammadAakash

[rjtbansal]

@VaibhavTessell This is great as I dont see those warnings anymore! Just for the knowledge if possible could you please share how did you identify containerProps to be the fix?

[ssteuteville]

how would i do this for the auth code flow, not seeing how to do that with GoogleLogin and don't see any props available for fedcm with useLogin

[ArturSha]

<GoogleLogin
    clientId="CLIENT_ID"
    text="Sign in with Google"
    onSuccess={onSuccessHandler}
    onError={onFailureHandler}
    ux_mode="redirect"
    useOneTap
    auto_select

    // New Addition for FedCM integration
--> containerProps={{ allow: "identity-credentials-get" }}
--> use_fedcm_for_prompt

/>

After adding the containerProps and use_fedcm_for_prompt Google login started working with FedCM integration.

@rjtbansal @MuhammadAakash

maybe you know what to do with useGoogleLogin there are no such parameters

[berghuis-rakuten]

@ssteuteville, @ArturSha any news on this ? I also use the useGoogleLogin function but see no option for use_fedCM on this function.

[ArturSha]

@ssteuteville, @ArturSha any news on this ? I also use the useGoogleLogin function but see no option for use_fedCM on this function.

There's no news on this yet. I started using the GoogleLogin component instead of useGoogleLogin for now.

[berghuis-rakuten]

@ArturSha I see, thank you for your confirmation. Hope they will soon add the parameter so we could actually test it. Could you perhaps tell me how it works differently from the custom useGoogleLogin function ? I am interested to see if i could use it instead as well.

[ArturSha]

@ArturSha I see, thank you for your confirmation. Hope they will soon add the parameter so we could actually test it. Could you perhaps tell me how it works differently from the custom useGoogleLogin function ? I am interested to see if i could use it instead as well.

https://chatgpt.com/share/682c0cae-b944-800f-9e48-c39077a98c2b

const [loginWithGoogle] = useLoginWithGoogleMutation(); //rtk query

 const onSubmitGoogle = async (response: CredentialResponse) => {
    try {
      await loginWithGoogle({
        token: response.credential || '',
       }).unwrap()
     some extra code
    } catch (error) {
     some code
    }
  }

return (
 <GoogleLogin
          ux_mode="popup"
          onSuccess={(response) => onSubmitGoogle(response)}
          use_fedcm_for_prompt
          use_fedcm_for_button
          cancel_on_tap_outside
          useOneTap
          shape="circle"
          locale={i18n.language}
        />
)