fix(expo): Load SSO deps via require to fix Metro async-chunk failure (#8720)

Author: wobsoriano

.changeset/expo-sso-sync-require.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Fix `useSSO()` in Expo apps that hit module loading failures when starting an SSO flow under Metro.

packages/expo/src/hooks/__tests__/useSSO.test.ts

@@ -0,0 +1,99 @@
+import { renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+import { useSSO } from '../useSSO';
+
+const mocks = vi.hoisted(() => {
+  return {
+    useSignIn: vi.fn(),
+    useSignUp: vi.fn(),
+    openAuthSessionAsync: vi.fn(),
+  };
+});
+
+vi.mock('@clerk/react/legacy', () => {
+  return {
+    useSignIn: mocks.useSignIn,
+    useSignUp: mocks.useSignUp,
+  };
+});
+
+vi.mock('react-native', () => {
+  return {
+    Platform: {
+      OS: 'ios',
+    },
+  };
+});
+
+vi.mock('expo-web-browser', () => {
+  return {
+    openAuthSessionAsync: mocks.openAuthSessionAsync,
+  };
+});
+
+// expo-auth-session is intentionally left unmocked: it cannot be require()'d in this environment,
+// which exercises the dependency-load failure path (the bug behind #8288). Only the error-path
+// test reaches that require(); the other tests return before it, so they are unaffected.
+
+describe('useSSO', () => {
+  const mockSignIn = {
+    create: vi.fn(),
+  };
+
+  const mockSignUp = {
+    create: vi.fn(),
+    createdSessionId: null,
+  };
+
+  const mockSetActive = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mocks.useSignIn.mockReturnValue({
+      signIn: mockSignIn,
+      setActive: mockSetActive,
+      isLoaded: true,
+    });
+
+    mocks.useSignUp.mockReturnValue({
+      signUp: mockSignUp,
+      isLoaded: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('returns the startSSOFlow function', () => {
+    const { result } = renderHook(() => useSSO());
+
+    expect(typeof result.current.startSSOFlow).toBe('function');
+  });
+
+  test('returns early without starting the flow when Clerk is not loaded', async () => {
+    mocks.useSignIn.mockReturnValue({
+      signIn: mockSignIn,
+      setActive: mockSetActive,
+      isLoaded: false,
+    });
+
+    const { result } = renderHook(() => useSSO());
+
+    const response = await result.current.startSSOFlow({ strategy: 'oauth_google' });
+
+    expect(mockSignIn.create).not.toHaveBeenCalled();
+    expect(mocks.openAuthSessionAsync).not.toHaveBeenCalled();
+    expect(response.createdSessionId).toBe(null);
+  });
+
+  test('surfaces the underlying error when an auth-session dependency fails to load', async () => {
+    const { result } = renderHook(() => useSSO());
+
+    await expect(result.current.startSSOFlow({ strategy: 'oauth_google' })).rejects.toThrow(
+      /required for SSO: .+\. If they are not installed/s,
+    );
+  });
+});

packages/expo/src/hooks/useSSO.ts

@@ -47,17 +47,22 @@ export function useSSO() {
       };
     }
 
-    // Dynamically import expo-auth-session and expo-web-browser only when needed
-    // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- dynamic import of optional dependency
+    // Load via synchronous require() instead of import(): Metro inlines require() into the main
+    // bundle, while import() emits an async chunk that fails to resolve without @expo/metro-runtime.
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- type-only annotation for optional dependency
     let AuthSession: typeof import('expo-auth-session');
-    // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- dynamic import of optional dependency
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- type-only annotation for optional dependency
     let WebBrowserModule: typeof import('expo-web-browser');
     try {
-      [AuthSession, WebBrowserModule] = await Promise.all([import('expo-auth-session'), import('expo-web-browser')]);
-    } catch {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      AuthSession = require('expo-auth-session');
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      WebBrowserModule = require('expo-web-browser');
+    } catch (err) {
       return errorThrower.throw(
-        'expo-auth-session and expo-web-browser are required for SSO. ' +
-          'Install them: npx expo install expo-auth-session expo-web-browser',
+        `Unable to load expo-auth-session and expo-web-browser, which are required for SSO: ${
+          err instanceof Error ? err.message : 'Unknown error'
+        }. If they are not installed, run: npx expo install expo-auth-session expo-web-browser`,
       );
     }