fix(connect): backport reliable Google WaaS sign-in to v5

.changeset/bright-mice-connect.md

@@ -0,0 +1,5 @@
+---
+'@0xsequence/connect': patch
+---
+
+Fix Google WaaS v2 sign-in clicks failing in Chromium by replacing the hidden, transformed iframe with a directly interactive Google button.

examples/react/src/App.tsx

@@ -1,6 +1,7 @@
 import { SequenceCheckoutProvider } from '@0xsequence/checkout'
 import { SequenceConnect } from '@0xsequence/connect'
 import { SequenceWalletProvider } from '@0xsequence/wallet-widget'
+import { useMemo, useState } from 'react'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
 import { Homepage } from './components/Homepage'
@@ -10,13 +11,33 @@ import { XAuthCallback } from './components/XAuthCallback'
 import { checkoutConfig, config } from './config'
 
 export const App = () => {
+  const [useFullWidthSocials, setUseFullWidthSocials] = useState(config.connectConfig.signIn?.descriptiveSocials ?? false)
+  const demoConfig = useMemo(
+    () => ({
+      ...config,
+      connectConfig: {
+        ...config.connectConfig,
+        signIn: {
+          ...config.connectConfig.signIn,
+          descriptiveSocials: useFullWidthSocials
+        }
+      }
+    }),
+    [useFullWidthSocials]
+  )
+
   return (
-    <SequenceConnect config={config}>
+    <SequenceConnect config={demoConfig}>
       <SequenceWalletProvider>
         <SequenceCheckoutProvider config={checkoutConfig}>
           <BrowserRouter>
             <Routes>
-              <Route path="/" element={<Homepage />} />
+              <Route
+                path="/"
+                element={
+                  <Homepage useFullWidthSocials={useFullWidthSocials} onUseFullWidthSocialsChange={setUseFullWidthSocials} />
+                }
+              />
               <Route path="/inline" element={<InlineDemo />} />
               <Route path="/auth-callback" element={<ImmutableCallback />} />
               <Route path="/auth-callback-X" element={<XAuthCallback />} />

examples/react/src/components/Homepage.tsx

@@ -1,5 +1,5 @@
 import { useOpenConnectModal, useWallets, WalletType } from '@0xsequence/connect'
-import { Button, Card, CheckmarkIcon, Image, Text } from '@0xsequence/design-system'
+import { Button, Card, CheckmarkIcon, Image, Switch, Text } from '@0xsequence/design-system'
 import { clsx } from 'clsx'
 import { Footer } from 'example-shared-components'
 import { Link } from 'react-router-dom'
@@ -10,7 +10,12 @@ import { Connected } from './Connected'
 const searchParams = new URLSearchParams(location.search)
 const walletType: WalletType = searchParams.get('type') === 'universal' ? 'universal' : 'waas'
 
-export const Homepage = () => {
+interface HomepageProps {
+  useFullWidthSocials: boolean
+  onUseFullWidthSocialsChange: (useFullWidthSocials: boolean) => void
+}
+
+export const Homepage = ({ useFullWidthSocials, onUseFullWidthSocialsChange }: HomepageProps) => {
   const { wallets } = useWallets()
   const { setOpenConnectModal } = useOpenConnectModal()
 
@@ -40,6 +45,21 @@ export const Homepage = () => {
             </Link>
           </div>
 
+          <label className="flex items-center gap-3">
+            <Text variant="small" color={useFullWidthSocials ? 'muted' : 'primary'}>
+              Compact
+            </Text>
+            <Switch
+              name="social-button-layout"
+              checked={useFullWidthSocials}
+              onCheckedChange={onUseFullWidthSocialsChange}
+              aria-label="Use full width social buttons"
+            />
+            <Text variant="small" color={useFullWidthSocials ? 'primary' : 'muted'}>
+              Full width
+            </Text>
+          </label>
+
           <div className="flex gap-2 flex-col px-4 mt-10 w-full max-w-[480px]">
             <WalletTypeSelect
               type="waas"

packages/connect/src/components/Connect/Connect.tsx

@@ -29,13 +29,14 @@ import {
   GoogleWaasConnectButton,
   ShowAllWalletsButton
 } from '../ConnectButton/index.js'
-import type { SequenceConnectProviderProps } from '../SequenceConnectProvider/index.js'
 import { PoweredByPolygon } from '../PolygonBrand/index.js'
+import type { SequenceConnectProviderProps } from '../SequenceConnectProvider/index.js'
 
 import { Banner } from './Banner.js'
 import { ConnectedWallets } from './ConnectedWallets.js'
 import { EmailWaasVerify } from './EmailWaasVerify.js'
 import { ExtendedWalletList } from './ExtendedWalletList.js'
+import { isGoogleWaasConnector, SocialConnectorsSection, type SocialConnectorButtonOptions } from './SocialConnectorsSection.js'
 
 const MAX_ITEM_PER_ROW = 4
 export const SEQUENCE_UNIVERSAL_CONNECTOR_NAME = 'Sequence'
@@ -380,10 +381,36 @@ export const Connect = (props: ConnectProps) => {
   const showSocialConnectorSection = socialAuthConnectors.length > 0
   const showEmailInputSection = !!emailConnector
 
-  const showMoreSocialOptions = socialAuthConnectors.length > MAX_ITEM_PER_ROW
   const showMoreWalletOptions = walletConnectors.length > MAX_ITEM_PER_ROW
-  const socialConnectorsPerRow = showMoreSocialOptions && !descriptiveSocials ? MAX_ITEM_PER_ROW - 1 : socialAuthConnectors.length
   const walletConnectorsPerRow = showMoreWalletOptions ? MAX_ITEM_PER_ROW - 1 : walletConnectors.length
+  const showCompactGoogleButton =
+    !hideSocialConnectOptions &&
+    showSocialConnectorSection &&
+    !descriptiveSocials &&
+    socialAuthConnectors.some(isGoogleWaasConnector)
+
+  const renderSocialConnectorButton = (connector: ExtendedConnector, options: SocialConnectorButtonOptions) => {
+    const commonProps = {
+      connector,
+      onConnect,
+      isDescriptive: options.isDescriptive
+    }
+
+    switch (connector._wallet.id) {
+      case 'guest-waas':
+        return <GuestWaasConnectButton {...commonProps} setIsLoading={setIsLoading} />
+      case 'google-waas':
+        return <GoogleWaasConnectButton {...commonProps} buttonTheme={options.googleButtonTheme} />
+      case 'apple-waas':
+        return <AppleWaasConnectButton {...commonProps} />
+      case 'epic-waas':
+        return <EpicWaasConnectButton {...commonProps} />
+      case 'X-waas':
+        return <XWaasConnectButton {...commonProps} />
+      default:
+        return <ConnectButton {...commonProps} disableTooltip={config?.signIn?.disableTooltipForDescriptiveSocials} />
+    }
+  }
 
   const WalletConnectorsSection = () => {
     return (
@@ -398,7 +425,10 @@ export const Connect = (props: ConnectProps) => {
 
   if (showExtendedList) {
     const SEARCHABLE_TRESHOLD = 8
-    const connectors = showExtendedList === 'social' ? socialAuthConnectors : walletConnectors
+    const connectors =
+      showExtendedList === 'social'
+        ? socialAuthConnectors.filter(connector => !isGoogleWaasConnector(connector))
+        : walletConnectors
     const searchable = connectors.length > SEARCHABLE_TRESHOLD
 
     return (
@@ -522,61 +552,15 @@ export const Connect = (props: ConnectProps) => {
                   {showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && (
                     <WalletConnectorsSection />
                   )}
-                  <div className="flex mt-6 gap-6 flex-col">
+                  <div className={clsx('flex mt-6 flex-col', showCompactGoogleButton ? 'gap-3' : 'gap-6')}>
                     <>
                       {!hideSocialConnectOptions && showSocialConnectorSection && (
-                        <div className={`flex gap-2 justify-center items-center ${descriptiveSocials ? 'flex-col' : 'flex-row'}`}>
-                          {socialAuthConnectors.slice(0, socialConnectorsPerRow).map(connector => {
-                            return (
-                              <div className="w-full" key={connector.uid}>
-                                {connector._wallet.id === 'guest-waas' ? (
-                                  <GuestWaasConnectButton
-                                    isDescriptive={descriptiveSocials}
-                                    connector={connector}
-                                    onConnect={onConnect}
-                                    setIsLoading={setIsLoading}
-                                  />
-                                ) : connector._wallet.id === 'google-waas' ? (
-                                  <GoogleWaasConnectButton
-                                    isDescriptive={descriptiveSocials}
-                                    connector={connector}
-                                    onConnect={onConnect}
-                                  />
-                                ) : connector._wallet.id === 'apple-waas' ? (
-                                  <AppleWaasConnectButton
-                                    isDescriptive={descriptiveSocials}
-                                    connector={connector}
-                                    onConnect={onConnect}
-                                  />
-                                ) : connector._wallet.id === 'epic-waas' ? (
-                                  <EpicWaasConnectButton
-                                    isDescriptive={descriptiveSocials}
-                                    connector={connector}
-                                    onConnect={onConnect}
-                                  />
-                                ) : connector._wallet.id === 'X-waas' ? (
-                                  <XWaasConnectButton
-                                    isDescriptive={descriptiveSocials}
-                                    connector={connector}
-                                    onConnect={onConnect}
-                                  />
-                                ) : (
-                                  <ConnectButton
-                                    disableTooltip={config?.signIn?.disableTooltipForDescriptiveSocials}
-                                    isDescriptive={descriptiveSocials}
-                                    connector={connector}
-                                    onConnect={onConnect}
-                                  />
-                                )}
-                              </div>
-                            )
-                          })}
-                          {showMoreSocialOptions && (
-                            <div className="w-full">
-                              <ShowAllWalletsButton onClick={() => setShowExtendedList('social')} />
-                            </div>
-                          )}
-                        </div>
+                        <SocialConnectorsSection
+                          connectors={socialAuthConnectors}
+                          descriptive={descriptiveSocials}
+                          onShowMore={() => setShowExtendedList('social')}
+                          renderConnector={renderSocialConnectorButton}
+                        />
                       )}
                       {!hideSocialConnectOptions && showSocialConnectorSection && showEmailInputSection && (
                         <div className="flex gap-4 flex-row justify-center items-center">

packages/connect/src/components/Connect/SocialConnectorsSection.tsx

@@ -0,0 +1,81 @@
+import { Divider } from '@0xsequence/design-system'
+import type { ReactNode } from 'react'
+
+import type { ExtendedConnector } from '../../types.js'
+import { ShowAllWalletsButton } from '../ConnectButton/index.js'
+
+const MAX_ITEMS_PER_ROW = 4
+const GOOGLE_WAAS_CONNECTOR_ID = 'google-waas'
+
+export interface SocialConnectorButtonOptions {
+  isDescriptive: boolean
+  googleButtonTheme?: 'filled_blue' | 'outline'
+}
+
+interface SocialConnectorsSectionProps {
+  connectors: ExtendedConnector[]
+  descriptive: boolean
+  onShowMore: () => void
+  renderConnector: (connector: ExtendedConnector, options: SocialConnectorButtonOptions) => ReactNode
+}
+
+export const isGoogleWaasConnector = (connector: ExtendedConnector) => connector._wallet?.id === GOOGLE_WAAS_CONNECTOR_ID
+
+export const SocialConnectorsSection = ({
+  connectors,
+  descriptive,
+  onShowMore,
+  renderConnector
+}: SocialConnectorsSectionProps) => {
+  const hasMoreConnectors = connectors.length > MAX_ITEMS_PER_ROW
+  const visibleConnectorCount = hasMoreConnectors && !descriptive ? MAX_ITEMS_PER_ROW - 1 : connectors.length
+  const visibleConnectors = connectors.slice(0, visibleConnectorCount)
+  const googleConnector = connectors.find(isGoogleWaasConnector)
+  const otherConnectors = visibleConnectors.filter(connector => !isGoogleWaasConnector(connector))
+
+  const renderConnectorGroup = (groupConnectors: ExtendedConnector[]) => (
+    <div className={`flex gap-2 justify-center items-center ${descriptive ? 'flex-col' : 'flex-row'}`}>
+      {groupConnectors.map(connector => (
+        <div className="w-full" key={connector.uid}>
+          {renderConnector(connector, { isDescriptive: descriptive })}
+        </div>
+      ))}
+      {hasMoreConnectors && (
+        <div className="w-full">
+          <ShowAllWalletsButton onClick={onShowMore} />
+        </div>
+      )}
+    </div>
+  )
+
+  if (!googleConnector) {
+    return renderConnectorGroup(visibleConnectors)
+  }
+
+  if (descriptive) {
+    return (
+      <div className="flex w-full flex-col gap-3">
+        <Divider className="mx-0 my-0 text-background-secondary w-full" />
+        <div className="rounded-xl border border-border-card bg-background-secondary p-2">
+          {renderConnector(googleConnector, {
+            isDescriptive: true,
+            googleButtonTheme: 'filled_blue'
+          })}
+        </div>
+        <Divider className="mx-0 my-0 text-background-secondary w-full" />
+        {renderConnectorGroup(otherConnectors)}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-3">
+      {renderConnectorGroup(otherConnectors)}
+      <Divider className="mx-0 my-0 text-background-secondary w-full" />
+      {renderConnector(googleConnector, {
+        isDescriptive: true,
+        googleButtonTheme: 'outline'
+      })}
+    </div>
+  )
+}