Uh oh!
There was an error while loading. Please reload this page.
feat(expo): add two-way JS/native session sync for expo native components - #8032
Conversation
…ents When users authenticate via the JS SDK (custom sign-in forms, useSignIn, etc.) instead of through native AuthView, the native SDK doesn't know about the session. This causes native components like UserButton and UserProfileView to show empty/error states. Changes: - ClerkProvider: skip native configure when no bearer token to prevent creating anonymous native clients that conflict with later token sync - ClerkProvider: add NativeSessionSync component that pushes JS SDK bearer token to native when user signs in via JS - ClerkViewFactory (iOS): clear stale cached client/environment from keychain when device token changes, preventing 400 API errors from mismatched client IDs - ClerkViewFactory (iOS): add readNativeDeviceToken and clearCachedClerkData helpers for safe keychain management - ClerkViewFactory (iOS): track configure state with static flag to avoid accessing Clerk.shared before SDK initialization - UserButton: sync JS bearer token to native before presenting profile modal - useUserProfileModal: sync JS bearer token to native before presenting
🦋 Changeset detectedLatest commit: bc0d928 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@clerk/agent-toolkit@clerk/astro@clerk/backend@clerk/chrome-extension@clerk/clerk-js@clerk/dev-cli@clerk/expo@clerk/expo-passkeys@clerk/express@clerk/fastify@clerk/hono@clerk/localizations@clerk/nextjs@clerk/nuxt@clerk/react@clerk/react-router@clerk/shared@clerk/tanstack-react-start@clerk/testing@clerk/ui@clerk/upgrade@clerk/vuecommit: |
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughiOS: Added JS: Android: Added reflection-based 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip You can customize the high-level summary generated by CodeRabbit.Configure the |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/expo/src/provider/ClerkProvider.tsx`:
- Around line 66-67: NativeSessionSync reads from defaultTokenCache instead of
using the tokenCache configured on ClerkProvider, causing native configure to be
skipped when a custom cache is used; change NativeSessionSync (and the other
occurrences around the 100-103 and 367 spots) to obtain the tokenCache provided
by ClerkProvider (via props or context) and use that tokenCache for
getCachedSessionToken, subscriptions, and when deciding to call native
configure; ensure all calls referencing defaultTokenCache (in NativeSessionSync,
its subscription/cleanup logic, and the similar blocks at the other mentioned
locations) are replaced to reference the injected tokenCache so custom caches
are honored.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: c0ae8b83-a7fb-422c-8cac-f6acdae7f86c
📒 Files selected for processing (5)
packages/expo/ios/ClerkExpoModule.swiftpackages/expo/ios/ClerkViewFactory.swiftpackages/expo/src/hooks/useUserProfileModal.tspackages/expo/src/native/UserButton.tsxpackages/expo/src/provider/ClerkProvider.tsx
💤 Files with no reviewable changes (1)
- packages/expo/ios/ClerkExpoModule.swift
Uh oh!
There was an error while loading. Please reload this page.
…nents When users authenticate via the JS SDK (custom sign-in forms) instead of native <AuthView />, the native Android SDK doesn't have the session. This causes <UserButton /> and useUserProfileModal to show broken/empty profile modals. Changes: - ClerkExpoModule.kt: getSession() and signOut() now resolve gracefully when SDK is not initialized (matches iOS behavior), enabling NativeSessionSync to detect the missing session and call configure() - ClerkExpoModule.kt: configure() handles re-initialization when SDK is already initialized by writing bearer token to SharedPreferences and using type-based reflection to trigger a client refresh via reinitialize() - UserButton.tsx & useUserProfileModal.ts: Track whether native had a session before the profile modal opens, only sign out JS SDK if the session was actually lost during the modal (prevents false sign-out when native never had a session) - ClerkProvider.tsx (NativeSessionSync): Added debug logging for sync flow
Strip excessive console.log/debugLog statements added during Android session sync development. Keep only essential error/warn logs for production debugging. No behavioral changes.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/expo/src/hooks/useUserProfileModal.ts`:
- Around line 72-89: The post-configure re-check can still see no native session
on iOS; update useUserProfileModal so that after calling ClerkExpo.configure
(inside the branch that sets bearerToken) you poll ClerkExpo.getSession with a
short delay (e.g. 200-500ms) and a timeout (matching the existing ClerkProvider
3s behavior) until a sessionId/session is present before setting
hadNativeSessionBefore, ensuring the modal won't open prematurely; apply the
same polling change in the native UserButton component (UserButton.tsx) where
you currently only do a single post-configure getSession, and add a regression
test that performs a JS sign-in then asserts the native session becomes
available before the profile modal opens (covering the JS-sign-in →
native-profile flow).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: f601df34-6ef3-4412-9f28-d4d2ccb116cb
📒 Files selected for processing (3)
packages/expo/android/src/main/java/expo/modules/clerk/ClerkExpoModule.ktpackages/expo/src/hooks/useUserProfileModal.tspackages/expo/src/native/UserButton.tsx
Uh oh!
There was an error while loading. Please reload this page.
NativeSessionSync and configureNativeClerk were reading from the default SecureStore-based tokenCache rather than honoring the custom tokenCache prop passed to ClerkProvider. This caused native configure to be skipped when a custom cache was used, since the bearer token would be stored in the custom cache but read from the default one. Pass the tokenCache prop through to NativeSessionSync and use the effective cache (user-provided or default) in both sync paths.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/expo/src/provider/ClerkProvider.tsx`:
- Around line 84-112: hasSyncedRef.current is set before the async token read so
the effect can mark sync complete even when no token was pushed; move the
assignment so the flag is only set after we've confirmed native already has a
session or after a successful push to native. Concretely: remove the early
hasSyncedRef.current = true, run syncToNative() async, and inside syncToNative
set hasSyncedRef.current = true only after detecting hasNativeSession is true OR
after await ClerkExpo.configure(publishableKey, bearerToken) completes (or after
confirming there's no bearerToken and native already has a session). Update
references: hasSyncedRef, syncToNative, NativeClerkModule/ClerkExpo,
effectiveTokenCache.getToken, CLERK_CLIENT_JWT_KEY, and ClerkExpo.configure.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 09c4623a-5762-45bd-941f-67d46a077feb
📒 Files selected for processing (1)
packages/expo/src/provider/ClerkProvider.tsx
Uh oh!
There was an error while loading. Please reload this page.
…n-sync-for-expo-components
Move hasSyncedRef assignment into syncToNative so the guard flag is only set after confirming native already has a session or after successfully pushing the bearer token. Previously the flag was set synchronously before the async work, preventing retries on failure.
…n-sync-for-expo-components
| * but the SDK was already initialized (so Clerk.initialize() is a no-op). | ||
| * | ||
| * Uses reflection to find the ConfigurationManager instance by type (field name | ||
| * may vary across SDK versions), then sets _isInitialized to false so |
There was a problem hiding this comment.
I'm curious about the use of reflection here. Generally considered an anti pattern in Java world
There was a problem hiding this comment.
Clerk.initialize() is a no-op if the SDK is already initialized, and the Clerk Android SDK doesn't expose any public API to force a re-initialization or swap the device token post-init. We need to trigger a fresh client/environment fetch after writing a new bearer token to SharedPreferences, and there's no way to do that (as far as I can tell) from the android SDK.
The reflection approach finds ConfigurationManager by type (to be resilient to field name changes across SDK versions), then finds the _isInitialized MutableStateFlow and flips it to false so reinitialize() will proceed.
Let me know if you can think of a cleaner way to do it, and I'll put it in!
There was a problem hiding this comment.
We can add those hooks for you in the Android SDK to avoid it if you'd like?
There was a problem hiding this comment.
I've pushed a commit that drops the entire reflection hack and uses updateDeviceToken() instead. It saves the token via StorageHelper and triggers refreshClientAndEnvironment() internally.
There was a problem hiding this comment.
Things are working well. I am going to approve the PR here: clerk/clerk-android#564 (review)
If you can publish to maven, that would be amazing!
| } | ||
| @MainActor | ||
| public func configure(publishableKey: String, bearerToken: String? = nil) async throws { |
There was a problem hiding this comment.
If this function doesn't take in the keychain service as a parameter, I'm not sure how it would ever match the service used by the iOS SDK if they wanted to use a custom service. It looks like the Clerk.configure is always just called with a pub key, and never keychain config.
There was a problem hiding this comment.
I think for the v1 of this its fine to not support custom keychain services, but you might get asked to eventually implement many of the configuration options offered by the ios sdk.
There was a problem hiding this comment.
ClerkViewFactory now resolves the keychain service internally via a computed property that checks Info.plist for a ClerkKeychainService key first, then falls back to Bundle.main.bundleIdentifier. That resolved service gets passed to Clerk.configure(publishableKey:options:) as Clerk.Options(keychainConfig: .init(service: service)). So it matches whatever the iOS SDK uses without needing to pipe it through the bridge method signature.
I can start working towards including configuration options as a followup after the theming (and possibly testing, but can discuss the testing later in the week / monday). It will be important to include these.
mikepitre
commented
Mar 11, 2026
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit:bdd15bdd3f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if (!bearerToken) { | ||
| return; |
There was a problem hiding this comment.
This early return skips ClerkExpo.configure() whenever the token cache is empty (the normal signed-out cold-start case), and initStartedRef has already been set, so the provider never retries initialization later in the same mount. That leaves the native SDK uninitialized for signed-out users, which breaks native auth entry points that require initialization (for example Android presentAuth/presentUserProfile reject with E_NOT_INITIALIZED).
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
👍
A fix has been provided for this. The current code in ClerkProvider.tsx calls ClerkExpo.configure(pk, bearerToken) unconditionally on mount regardless of whether bearerToken is null. There's no early return based on token presence.
| // MARK: - signOut | ||
| @objc func signOut(_ resolve: @escaping RCTPromiseResolveBlock, |
There was a problem hiding this comment.
getClientToken was removed from the Swift module, but it is still part of the exported bridge contract (ios/ClerkExpoModule.m) and is still used by JS native-auth sync paths (AuthView/InlineAuthView). On iOS this creates a runtime contract mismatch, so calling ClerkExpo.getClientToken() can fail at runtime and prevents JS from receiving the native client token after native sign-in.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
👍
A fix has been provided for this now as well. getClientToken exists in both ClerkExpoModule.swift (as @objc func getClientToken) and the bridge file ClerkExpoModule.m (as RCT_EXTERN_METHOD). It's also defined in ClerkViewFactoryProtocol and implemented in ClerkViewFactory where it delegates to readNativeDeviceToken().
…fig to Clerk.configure Restore the getClientToken bridge method on iOS so native-to-JS session sync works after native sign-in (AuthView/InlineAuthView). Pass the resolved keychainService to Clerk.configure() via options so the native SDK uses the same keychain service as our helpers, supporting custom keychain services via ClerkKeychainService in Info.plist.
Co-authored-by: Christopher Canin <chris@clerk.dev>
chriscanin
commented
Mar 11, 2026
!snapshot |
| const effectiveTokenCache = tokenCache ?? defaultTokenCache; | ||
| useEffect(() => { | ||
| if (!isSignedIn) { |
There was a problem hiding this comment.
[P1] Clear the native session when JS auth signs out
When isSignedIn becomes false this effect only resets hasSyncedRef and returns, so the native Clerk SDK keeps the previously mirrored session/device token. Any JS-side sign-out path (clerk.signOut(), session expiry, custom auth UI) will therefore leave ClerkExpo.getSession() non-null; components like UserButton immediately read that native session back and continue showing/opening the signed-in profile even though the JS SDK is signed out.
There was a problem hiding this comment.
This has been fixed. The NativeSessionSync effect now calls ClerkExpo.signOut() when isSignedIn becomes false (lines 84-91 in ClerkProvider.tsx). This clears the native SDK's session so getSession() returns null and native components like UserButton won't show stale signed-in state.
Note: in the typical quickstart pattern where UserButton is only rendered inside an if (isSignedIn) guard, the stale native session was invisible since the component unmounts. But this fix makes it correct regardless of how the consumer structures their component tree.
Call ClerkExpo.signOut() in NativeSessionSync when isSignedIn becomes false so native components don't retain a stale session after JS-side sign out.
chriscanin
commented
Mar 11, 2026
!snapshot |
…n iOS The iOS inline AuthView relied on Clerk.shared.auth.events async sequence which may not emit for inline sign-ins. Switch to direct session observation via .onChange(of: Clerk.shared.session?.id) matching Android's sessionFlow approach. Also emit onAuthStateChange module events from inline views and sync the native client token in ClerkProvider's syncNativeAuthToJs handler.
…n-sync-for-expo-components
Uh oh!
There was an error while loading. Please reload this page.
Re-applies the changes from #8032 which was reverted in #8065. This PR exists for visibility and review before re-merging. Original changes: - Two-way JS/native token sync for expo native components - Native session cleared on sign-out - Improved initialization error handling with timeout/failure messages - Additional debug logging in development
Summary
configure()when no bearer token exists, preventing creation of anonymous native clients that conflict with later JS→native token syncNativeSessionSynccomponent that automatically pushes JS SDK bearer token to native when user signs in via JS custom formsrefreshClient()Root cause
When users sign in via JS SDK (custom forms,
useSignIn, etc.) rather than native<AuthView />, the native Clerk SDK has no session. The native SDK'sCacheManagermay load a stale anonymous client from keychain (created by a previous launch), and whenrefreshClient()runs, it sends both the new device token (Authorizationheader) and the stale client ID (x-clerk-client-idheader) — causing a 400 API error.Test plan
useAuth()updates reactively🤖 Generated with Claude Code
Summary by CodeRabbit
Bug Fixes
New Features
Chores