fix: social login popup blocked by safari

.changeset/early-radios-begin.md

@@ -0,0 +1,23 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Fixed an issue where social popup window was blocked by safari

packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts

@@ -237,34 +237,36 @@ export class W3mSocialLoginWidget extends LitElement {
 
       try {
         if (authConnector && socialProvider) {
+          this.popupWindow = CoreHelperUtil.returnOpenHref(
+            '',
+            'popupWindow',
+            'width=600,height=800,scrollbars=yes'
+          )
+
+          if (this.popupWindow) {
+            AccountController.setSocialWindow(this.popupWindow, ChainController.state.activeChain)
+          } else {
+            throw new Error('Something went wrong')
+          }
+
           const { uri } = await authConnector.provider.getSocialRedirectUri({
             provider: socialProvider
           })
 
           if (!uri) {
+            this.popupWindow.close()
             throw new Error('Something went wrong')
           }
 
+          this.popupWindow.location.href = uri
+
           if (CoreHelperUtil.isTelegram()) {
             SafeLocalStorage.setItem(SafeLocalStorageKeys.SOCIAL_PROVIDER, socialProvider)
             const parsedUri = CoreHelperUtil.formatTelegramSocialLoginUrl(uri)
 
             // eslint-disable-next-line consistent-return
             return CoreHelperUtil.openHref(parsedUri, '_top')
           }
-
-          this.popupWindow = CoreHelperUtil.returnOpenHref(
-            '',
-            'popupWindow',
-            'width=600,height=800,scrollbars=yes'
-          )
-
-          if (this.popupWindow) {
-            AccountController.setSocialWindow(this.popupWindow, ChainController.state.activeChain)
-            this.popupWindow.location.href = uri
-          } else {
-            throw new Error('Something went wrong')
-          }
         }
       } catch (error) {
         this.popupWindow?.close()

packages/scaffold-ui/test/partials/w3m-social-login-widget.test.ts

@@ -0,0 +1,64 @@
+import { fixture } from '@open-wc/testing'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { html } from 'lit'
+
+import {
+  AccountController,
+  type AuthConnector,
+  ChainController,
+  ConnectorController,
+  CoreHelperUtil,
+  EventsController,
+  OptionsController,
+  RouterController
+} from '@reown/appkit-core'
+
+import { W3mSocialLoginWidget } from '../../src/partials/w3m-social-login-widget'
+import { HelpersUtil } from '../utils/HelpersUtil'
+
+describe('W3mSocialLoginWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should handle standard social login flow when clicking Google button', async () => {
+    const mockWindow = { location: { href: '' } }
+    const mockUri = 'https://auth.example.com/login'
+
+    vi.spyOn(OptionsController.state, 'features', 'get').mockReturnValue({
+      ...OptionsController.state.features,
+      socials: ['google']
+    })
+    vi.spyOn(AccountController, 'setSocialProvider')
+    vi.spyOn(EventsController, 'sendEvent')
+    vi.spyOn(RouterController, 'push')
+    vi.spyOn(CoreHelperUtil, 'returnOpenHref').mockReturnValue(mockWindow as Window)
+    vi.spyOn(ChainController.state, 'activeChain', 'get').mockReturnValue('eip155')
+    vi.spyOn(ConnectorController, 'getAuthConnector').mockReturnValue({
+      provider: {
+        getSocialRedirectUri: vi.fn().mockResolvedValue({ uri: mockUri })
+      }
+    } as unknown as AuthConnector)
+    vi.spyOn(AccountController, 'setSocialWindow')
+
+    const element: W3mSocialLoginWidget = await fixture(
+      html`<w3m-social-login-widget></w3m-social-login-widget>`
+    )
+
+    const googleButton = HelpersUtil.getByTestId(element, 'social-selector-google')
+    await googleButton.click()
+
+    expect(CoreHelperUtil.returnOpenHref).toHaveBeenCalledWith(
+      '',
+      'popupWindow',
+      'width=600,height=800,scrollbars=yes'
+    )
+    expect(AccountController.setSocialWindow).toHaveBeenCalledWith(mockWindow, 'eip155')
+    expect(mockWindow.location.href).toBe(mockUri)
+  })
+})