feat(expo): add useUserProfileModal hook, remove callback props, pin iOS SDK

chriscanin · chriscanin · commit e238e499e024 · 2026-03-02T10:29:22.000-08:00
- Add useUserProfileModal() imperative hook for native modal presentation
- Remove onDismiss from UserProfileView (now purely inline component)
- Remove onPress, onSignOut, style from UserButton (fills parent shape)
- Pin clerk-ios SPM dependency to exact version (matches Android approach)
diff --git a/packages/expo/app.plugin.js b/packages/expo/app.plugin.js
@@ -104,8 +104,8 @@ const withClerkIOS = config => {
         isa: 'XCRemoteSwiftPackageReference',
         repositoryURL: CLERK_IOS_REPO,
         requirement: {
-          kind: 'upToNextMajorVersion',
-          minimumVersion: CLERK_IOS_VERSION,
+          kind: 'exactVersion',
+          version: CLERK_IOS_VERSION,
         },
       };
 
@@ -553,10 +553,28 @@ const withClerkGoogleSignIn = config => {
  * Native modules are registered via react-native.config.js and standard
  * React Native autolinking (RCTViewManager / ReactPackage).
  */
-const withClerkExpo = config => {
+/**
+ * Write ClerkKeychainService to Info.plist when keychainService is provided.
+ * This allows extension apps (watch, widget, app clip) to share the same
+ * keychain entry as the main app by using a custom service identifier.
+ */
+const withClerkKeychainService = (config, { keychainService } = {}) => {
+  if (!keychainService) {
+    return config;
+  }
+
+  return withInfoPlist(config, modConfig => {
+    modConfig.modResults.ClerkKeychainService = keychainService;
+    console.log(`✅ Set ClerkKeychainService in Info.plist: ${keychainService}`);
+    return modConfig;
+  });
+};
+
+const withClerkExpo = (config, props = {}) => {
   config = withClerkIOS(config);
   config = withClerkGoogleSignIn(config);
   config = withClerkAndroid(config);
+  config = withClerkKeychainService(config, props);
   return config;
 };
 
diff --git a/packages/expo/src/hooks/index.ts b/packages/expo/src/hooks/index.ts
@@ -18,3 +18,4 @@ export * from './useOAuth';
 export * from './useAuth';
 export * from './useNativeSession';
 export * from './useNativeAuthEvents';
+export * from './useUserProfileModal';
diff --git a/packages/expo/src/hooks/useUserProfileModal.ts b/packages/expo/src/hooks/useUserProfileModal.ts
@@ -0,0 +1,120 @@
+import { useClerk } from '@clerk/react';
+import { useCallback, useRef } from 'react';
+import { Platform } from 'react-native';
+
+import NativeClerkModule from '../specs/NativeClerkModule';
+
+// Check if native module is supported on this platform
+const isNativeSupported = Platform.OS === 'ios' || Platform.OS === 'android';
+
+// Raw result from the native module (may vary by platform)
+type NativeSessionResult = {
+  sessionId?: string;
+  session?: { id: string };
+};
+
+// Safely get the native module
+let ClerkExpo: typeof NativeClerkModule | null = null;
+if (isNativeSupported) {
+  try {
+    ClerkExpo = NativeClerkModule;
+  } catch {
+    ClerkExpo = null;
+  }
+}
+
+export interface UseUserProfileModalReturn {
+  /**
+   * Present the native user profile modal.
+   *
+   * The returned promise resolves when the modal is dismissed.
+   * If the user signed out from within the profile modal,
+   * the JS SDK session is automatically cleared.
+   */
+  presentUserProfile: () => Promise<void>;
+
+  /**
+   * Whether the native module supports presenting the profile modal.
+   */
+  isAvailable: boolean;
+}
+
+/**
+ * Imperative hook for presenting the native user profile modal.
+ *
+ * Call `presentUserProfile()` from a button's `onPress` to show the native
+ * profile management screen (SwiftUI on iOS, Jetpack Compose on Android).
+ * The promise resolves when the modal is dismissed.
+ *
+ * Sign-out is detected automatically — if the user signs out from within
+ * the profile modal, the JS SDK session is cleared so `useAuth()` updates
+ * reactively.
+ *
+ * @example
+ * ```tsx
+ * import { useUserProfileModal } from '@clerk/expo';
+ *
+ * function MyScreen() {
+ *   const { presentUserProfile } = useUserProfileModal();
+ *
+ *   return (
+ *     <TouchableOpacity onPress={presentUserProfile}>
+ *       <Text>Manage Profile</Text>
+ *     </TouchableOpacity>
+ *   );
+ * }
+ * ```
+ */
+export function useUserProfileModal(): UseUserProfileModalReturn {
+  const clerk = useClerk();
+  const presentingRef = useRef(false);
+
+  const presentUserProfile = useCallback(async () => {
+    if (presentingRef.current) {
+      return;
+    }
+
+    if (!isNativeSupported || !ClerkExpo?.presentUserProfile) {
+      return;
+    }
+
+    presentingRef.current = true;
+    try {
+      await ClerkExpo.presentUserProfile({
+        dismissable: true,
+      });
+
+      // Check if native session still exists after modal closes
+      // If session is null, user signed out from the native UI
+      const sessionCheck = (await ClerkExpo.getSession?.()) as NativeSessionResult | null;
+      const hasNativeSession = !!(sessionCheck?.sessionId || sessionCheck?.session?.id);
+
+      if (!hasNativeSession) {
+        // Clear native session explicitly (may already be cleared, but ensure it)
+        try {
+          await ClerkExpo.signOut?.();
+        } catch {
+          // May already be signed out
+        }
+
+        // Sign out from JS SDK to update isSignedIn state
+        if (clerk?.signOut) {
+          try {
+            await clerk.signOut();
+          } catch {
+            // Best effort
+          }
+        }
+      }
+    } catch {
+      // Modal was dismissed by the user — not an error
+    } finally {
+      presentingRef.current = false;
+    }
+  }, [clerk]);
+
+  return {
+    presentUserProfile,
+    isAvailable: isNativeSupported && !!ClerkExpo?.presentUserProfile,
+  };
+}
diff --git a/packages/expo/src/native/UserButton.tsx b/packages/expo/src/native/UserButton.tsx
@@ -1,6 +1,5 @@
 import { useClerk, useUser } from '@clerk/react';
 import { useEffect, useRef, useState } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
 import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import NativeClerkModule from '../specs/NativeClerkModule';
@@ -36,65 +35,16 @@ interface NativeUser {
 /**
  * Props for the UserButton component.
  */
-export interface UserButtonProps {
-  /**
-   * Custom style for the button container.
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Callback fired when the user button is pressed.
-   *
-   * This is called immediately when the button is tapped, before the
-   * profile modal is presented. Use this for analytics or custom behavior.
-   */
-  onPress?: () => void;
-
-  /**
-   * Callback fired when the user signs out from the profile modal.
-   *
-   * This is called after:
-   * 1. The native session is cleared
-   * 2. The JS SDK session is cleared
-   *
-   * After this callback, `useAuth()` will return `isSignedIn: false`.
-   */
-  onSignOut?: () => void;
-}
+export interface UserButtonProps {}
 
 /**
  * A pre-built native button component that displays the user's avatar and opens their profile.
  *
  * `UserButton` renders a circular button showing the user's profile image (or initials if
- * no image is available). When tapped, it presents the {@link UserProfileView} modal for
- * account management.
- *
- * This component is powered by:
- * - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios
- * - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android
- *
- * ## Features
- *
- * - **Profile Image**: Displays the user's profile photo from their Clerk account
- * - **Initials Fallback**: Shows user's initials when no profile image is set
- * - **Profile Modal**: Opens {@link UserProfileView} with full account management
- * - **Sign Out Handling**: Properly syncs sign-out between native and JS SDKs
+ * no image is available). When tapped, it presents the native profile management modal.
  *
- * ## Avatar Display
- *
- * The button displays the user's avatar in this order of preference:
- * 1. User's profile image from Clerk (if available)
- * 2. First letter of first name + first letter of last name
- * 3. "U" as a fallback
- *
- * ## Styling
- *
- * The button is 36x36 pixels by default with circular border radius.
- * You can customize the size using the `style` prop:
- *
- * ```tsx
- * <UserButton style={{ width: 44, height: 44 }} />
- * ```
+ * Sign-out is detected automatically and synced with the JS SDK, causing `useAuth()` to
+ * update reactively. Use `useAuth()` in a `useEffect` to react to sign-out.
  *
  * @example Basic usage in a header
  * ```tsx
@@ -110,29 +60,26 @@ export interface UserButtonProps {
  * }
  * ```
  *
- * @example With sign-out handling
+ * @example Reacting to sign-out
  * ```tsx
- * <UserButton
- *   onSignOut={() => router.replace('/sign-in')}
- *   style={{ width: 40, height: 40 }}
- * />
- * ```
+ * import { UserButton } from '@clerk/expo/native';
+ * import { useAuth } from '@clerk/expo';
  *
- * @example With press tracking
- * ```tsx
- * <UserButton
- *   onPress={() => analytics.track('profile_opened')}
- *   onSignOut={() => {
- *     analytics.track('signed_out');
- *     router.replace('/sign-in');
- *   }}
- * />
+ * export default function Header() {
+ *   const { isSignedIn } = useAuth();
+ *
+ *   useEffect(() => {
+ *     if (!isSignedIn) router.replace('/sign-in');
+ *   }, [isSignedIn]);
+ *
+ *   return <UserButton style={{ width: 40, height: 40 }} />;
+ * }
  * ```
  *
  * @see {@link UserProfileView} The profile view that opens when tapped
  * @see {@link https://clerk.com/docs/components/user/user-button} Clerk UserButton Documentation
  */
-export function UserButton({ onPress, onSignOut, style }: UserButtonProps) {
+export function UserButton(_props: UserButtonProps) {
   const [nativeUser, setNativeUser] = useState<NativeUser | null>(null);
   const presentingRef = useRef(false);
   const clerk = useClerk();
@@ -181,8 +128,6 @@ export function UserButton({ onPress, onSignOut, style }: UserButtonProps) {
       return;
     }
 
-    onPress?.();
-
     if (!isNativeSupported || !ClerkExpo?.presentUserProfile) {
       return;
     }
@@ -225,8 +170,6 @@ export function UserButton({ onPress, onSignOut, style }: UserButtonProps) {
             }
           }
         }
-
-        onSignOut?.();
       }
     } catch {
       // Modal was dismissed by the user — not an error
@@ -248,7 +191,7 @@ export function UserButton({ onPress, onSignOut, style }: UserButtonProps) {
   // Show fallback when native modules aren't available
   if (!isNativeSupported || !ClerkExpo) {
     return (
-      <View style={[styles.button, style]}>
+      <View style={styles.button}>
         <Text style={styles.text}>?</Text>
       </View>
     );
@@ -257,7 +200,7 @@ export function UserButton({ onPress, onSignOut, style }: UserButtonProps) {
   return (
     <TouchableOpacity
       onPress={handlePress}
-      style={[styles.button, style]}
+      style={styles.button}
     >
       {user?.imageUrl ? (
         <Image
@@ -275,9 +218,8 @@ export function UserButton({ onPress, onSignOut, style }: UserButtonProps) {
 
 const styles = StyleSheet.create({
   button: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
+    width: '100%',
+    height: '100%',
     overflow: 'hidden',
   },
   avatar: {
@@ -289,7 +231,6 @@ const styles = StyleSheet.create({
   avatarImage: {
     width: '100%',
     height: '100%',
-    borderRadius: 18,
   },
   avatarText: {
     color: 'white',
diff --git a/packages/expo/src/native/UserProfileView.tsx b/packages/expo/src/native/UserProfileView.tsx
