fix(expo): make expo-auth-session and expo-web-browser optional dependencies

Convert top-level imports to dynamic imports so users who don't use
SSO/OAuth don't need these packages installed. Follows the same pattern
as useSignInWithApple.ios.ts.

Author: chriscanin

packages/expo/package.json

@@ -153,6 +153,9 @@
     "expo-apple-authentication": {
       "optional": true
     },
+    "expo-auth-session": {
+      "optional": true
+    },
     "expo-constants": {
       "optional": true
     },
@@ -164,6 +167,9 @@
     },
     "expo-secure-store": {
       "optional": true
+    },
+    "expo-web-browser": {
+      "optional": true
     }
   },
   "engines": {

packages/expo/src/hooks/useOAuth.ts

@@ -1,7 +1,6 @@
 import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/shared/types';
-import * as AuthSession from 'expo-auth-session';
-import * as WebBrowser from 'expo-web-browser';
+import type * as WebBrowser from 'expo-web-browser';
 
 import { errorThrower } from '../utils/errors';
 
@@ -46,6 +45,18 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
       };
     }
 
+    // Dynamically import expo-auth-session and expo-web-browser only when needed
+    let AuthSession: typeof import('expo-auth-session');
+    let WebBrowserModule: typeof import('expo-web-browser');
+    try {
+      [AuthSession, WebBrowserModule] = await Promise.all([import('expo-auth-session'), import('expo-web-browser')]);
+    } catch {
+      return errorThrower.throw(
+        'expo-auth-session and expo-web-browser are required for OAuth. ' +
+          'Install them: npx expo install expo-auth-session expo-web-browser',
+      );
+    }
+
     // Create a redirect url for the current platform and environment.
     //
     // This redirect URL needs to be whitelisted for your Clerk production instance via
@@ -64,7 +75,7 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
 
     const { externalVerificationRedirectURL } = signIn.firstFactorVerification;
 
-    const authSessionResult = await WebBrowser.openAuthSessionAsync(
+    const authSessionResult = await WebBrowserModule.openAuthSessionAsync(
       // @ts-ignore
       externalVerificationRedirectURL.toString(),
       oauthRedirectUrl,

packages/expo/src/hooks/useSSO.ts

@@ -6,8 +6,7 @@ import type {
   SignInResource,
   SignUpResource,
 } from '@clerk/shared/types';
-import * as AuthSession from 'expo-auth-session';
-import * as WebBrowser from 'expo-web-browser';
+import type * as WebBrowser from 'expo-web-browser';
 
 import { errorThrower } from '../utils/errors';
 
@@ -48,6 +47,18 @@ export function useSSO() {
       };
     }
 
+    // Dynamically import expo-auth-session and expo-web-browser only when needed
+    let AuthSession: typeof import('expo-auth-session');
+    let WebBrowserModule: typeof import('expo-web-browser');
+    try {
+      [AuthSession, WebBrowserModule] = await Promise.all([import('expo-auth-session'), import('expo-web-browser')]);
+    } catch {
+      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',
+      );
+    }
+
     const { strategy, unsafeMetadata, authSessionOptions } = startSSOFlowParams ?? {};
 
     /**
@@ -73,7 +84,7 @@ export function useSSO() {
       return errorThrower.throw('Missing external verification redirect URL for SSO flow');
     }
 
-    const authSessionResult = await WebBrowser.openAuthSessionAsync(
+    const authSessionResult = await WebBrowserModule.openAuthSessionAsync(
       externalVerificationRedirectURL.toString(),
       redirectUrl,
       authSessionOptions,

packages/expo/src/provider/ClerkProvider.tsx

@@ -3,7 +3,6 @@ import '../polyfills';
 import type { ClerkProviderProps as ReactClerkProviderProps } from '@clerk/react';
 import { InternalClerkProvider as ClerkReactProvider, type Ui } from '@clerk/react/internal';
 import * as SecureStore from 'expo-secure-store';
-import * as WebBrowser from 'expo-web-browser';
 import { useEffect, useRef } from 'react';
 import { Platform } from 'react-native';
 
@@ -263,7 +262,13 @@ export function ClerkProvider<TUi extends Ui = Ui>(props: ClerkProviderProps<TUi
 
   if (isWeb()) {
     // This is needed in order for useOAuth to work correctly on web.
-    WebBrowser.maybeCompleteAuthSession();
+    // Must stay synchronous during render to catch the redirect URL before children mount.
+    try {
+      const WebBrowser = require('expo-web-browser');
+      WebBrowser.maybeCompleteAuthSession();
+    } catch {
+      // expo-web-browser not installed — SSO/OAuth on web won't work
+    }
   }
 
   return (