Skip to content

fix(connect): make Google WaaS sign-in directly interactive#606

Merged
taylanpince merged 7 commits into
masterfrom
fix/google-waas-button
Jul 13, 2026
Merged

fix(connect): make Google WaaS sign-in directly interactive#606
taylanpince merged 7 commits into
masterfrom
fix/google-waas-button

Conversation

@AlexanderKolberg

@AlexanderKolberg AlexanderKolberg commented Jul 11, 2026

Copy link
Copy Markdown
Member

Ticket link:

API breaking changes:

  • Yes
  • No

Manual testing required:

  • Yes
  • No

Docs changes required:

  • Yes
  • No

Description

It looks like Google login broke following Chromium's coordinate-spoofing protection for async hit-testing, affecting users on Android and Windows running Chromium 149 and newer.

The previous implementation placed a nearly transparent Google Identity Services iframe behind a custom button and enlarged it with transform: scale(100). It also started the connection loader from the parent card's click handler. This depended on fragile cross-origin iframe hit-testing: when the click remained in the parent document, the UI showed “Continue on the popup” even though Google never received the interaction and no popup opened.

This PR removes that click-proxying approach and keeps Google's official control visible and directly interactive.

Unfortunately, this makes the Google button look a little less polished than the previous custom facade. Google's cross-origin iframe controls its own typography, logo, and spacing, so matching the previous UI exactly would require returning to the fragile click-proxying approach.

Before

Google login UI before

After

Google login UI after

UI and loading refinements

The implementation has since been refined while keeping Google's official control directly interactive:

  • Added a polished Full width layout with Google's filled-blue personalized button shown first in its own bordered container, clearly separated from the remaining full-width social options.
  • Added a balanced Compact layout where Guest, Apple, and X stay as compact icon options while Google's outlined personalized button appears below as a distinct full-width option.
  • Added a shimmer loading state with a 600 ms minimum display and a soft cover-reveal transition, preventing the Google control from flashing or visibly changing while personalized account details resolve.
  • Reused the direct Google Identity Services renderer in the account-linking flow and route responses using Google's supported per-button state value.
  • Improved separator spacing and the vertical alignment of the or row above the email input.
  • Added a Compact / Full width toggle to the React WaaS demo for quick visual comparison of both supported layouts.

The result keeps Google's button directly interactive and policy-compliant while fitting more naturally into the surrounding Sequence UI.

Latest version screen recording:

Screen.Recording.2026-07-12.at.14.46.10.mov

@AlexanderKolberg AlexanderKolberg requested a review from a team as a code owner July 11, 2026 11:53
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 11, 2026

Copy link
Copy Markdown

Deploying web-sdk-react-example with  Cloudflare Pages  Cloudflare Pages

Latest commit: 5642fe9
Status: ✅  Deploy successful!
Preview URL: https://708b4299.web-sdk-react-example.pages.dev
Branch Preview URL: https://fix-google-waas-button.web-sdk-react-example.pages.dev

View logs

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c255aeb91f

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread packages/connect/src/components/ConnectButton/ConnectButton.tsx
Comment thread packages/connect/src/components/ConnectButton/ConnectButton.tsx Outdated
@taylanpince taylanpince merged commit a95f233 into master Jul 13, 2026
5 checks passed
@taylanpince taylanpince deleted the fix/google-waas-button branch July 13, 2026 08:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants