Help needed to implement Google One Tap with Ory Hydra and Katros

[b-barry]

Hello everyone,

We are currently using Ory Hydra and Katros in our project, and we'd like to implement Google One Tap to enhance our users' login experience.

We're looking for assistance or advice on the following points:

1. Integrating Google One Tap with Ory Hydra
2. Necessary configuration in Katros to support this feature
3. Best practices for secure implementation
4. Relevant code examples or tutorials

If anyone has experience with a similar integration or knowledge on this topic, we would greatly appreciate your help or suggestions.

[vinckr]

Hello @b-barry

Here is what I had to add to my Ory Kratos/Ory Network powered React project to make Google One Tap available:

    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      window.callbackOneTap = function (otp) {
        fetch("https://<your-custom-domain>/self-service/login/browser", {
          headers: {
            Accept: "application/json",
          },
        })
          .then((response) => response.json())
          .then((flow) => {
            fetch("https://<your-custom-domain>/self-service/login?flow=" + flow.id, {
              credentials: "include",
              method: "POST",
              headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                method: "oidc",
                provider: "google",
                id_token: otp.credential,
                csrf_token: flow.ui.nodes[2].attributes.value,
              }),
            }).then((response) => {window.location.reload();});
          });
      };
    </script>
    <div
      id="g_id_onload"
      data-client_id="<some-long-id>.apps.googleusercontent.com"
      data-context="signin"
      data-callback="callbackOneTap"
      data-itp_support="true"
      data-use_fedcm_for_prompt="true"
      data-ux_mode="redirect"
      data-login_uri="https://<your-custom-domain>/self-service/login"
    ></div>
    <!-- data-use_fedcm_for_prompt="true" -->