feat(expo-native-components): add single-token client sync bridge

.changeset/expo-native-single-token-sync-bridge.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo-native-components': minor
+---
+
+Add native module support for the upcoming single-token client sync between `@clerk/expo` and the Clerk iOS and Android SDKs. The native SDK's stored device token becomes the one token both runtimes use, and each side is notified to reload its own client when the other changes it. Existing sync behavior is unchanged until `@clerk/expo` adopts it.

packages/expo-native-components/android/build.gradle

@@ -21,8 +21,8 @@ def clerkExpoVersion = rootProject.findProperty("clerkExpo.hostSdkVersion")?.toS
 // See: https://docs.gradle.org/current/userguide/version_catalogs.html for app-level version catalogs
 ext {
   kotlinxCoroutinesVersion = "1.7.3"
-  clerkAndroidApiVersion = "1.1.11"
-  clerkAndroidUiVersion = "1.1.11"
+  clerkAndroidApiVersion = "1.2.1"
+  clerkAndroidUiVersion = "1.2.1"
   okhttpVersion = "5.4.0"
   okhttpUrlConnectionVersion = "5.0.0-alpha.16"
   composeVersion = "1.7.0"

packages/expo-native-components/android/src/main/java/expo/modules/clerk/ClerkClientInvalidation.kt

@@ -0,0 +1,87 @@
+package expo.modules.clerk
+
+import com.clerk.api.network.model.client.Client
+
+/** The native client state that JS must refetch its own client for when it changes. */
+internal data class ClerkClientFingerprint(
+    val clientId: String?,
+    val lastActiveSessionId: String?,
+    val sessions: List<SessionState>,
+    val activeUserId: String?,
+    val activeUserUpdatedAt: Long?,
+    val deviceToken: String?
+) {
+    data class SessionState(val id: String, val status: String)
+
+    companion object {
+        fun from(client: Client?, deviceToken: String?): ClerkClientFingerprint {
+            val activeUser = client?.sessions?.firstOrNull { it.id == client.lastActiveSessionId }?.user
+            return ClerkClientFingerprint(
+                clientId = client?.id,
+                lastActiveSessionId = client?.lastActiveSessionId,
+                sessions = client?.sessions?.map { SessionState(it.id, it.status.name) }.orEmpty(),
+                activeUserId = activeUser?.id,
+                activeUserUpdatedAt = activeUser?.updatedAt,
+                deviceToken = deviceToken
+            )
+        }
+    }
+}
+
+/**
+ * Emits one payload-free invalidation per main-loop turn in which the fingerprint moved away from
+ * the last state JS was told about. Not thread-safe: call it from the main thread only.
+ */
+internal class ClerkClientInvalidationTracker(
+    private val schedule: (() -> Unit) -> Unit,
+    private val emit: () -> Unit
+) {
+    private var baseline: ClerkClientFingerprint? = null
+    private var latest: ClerkClientFingerprint? = null
+    private var isFlushScheduled = false
+
+    /** Sets the state JS already knows about without emitting. */
+    fun reset(fingerprint: ClerkClientFingerprint?) {
+        baseline = fingerprint
+        latest = fingerprint
+    }
+
+    fun observe(fingerprint: ClerkClientFingerprint) {
+        if (baseline == null) return
+        latest = fingerprint
+        if (fingerprint == baseline || isFlushScheduled) return
+        isFlushScheduled = true
+        schedule(::flush)
+    }
+
+    /** A token JS wrote itself is not news to JS, so it must not echo back as an invalidation. */
+    fun acknowledgeDeviceToken(token: String?, current: ClerkClientFingerprint) {
+        baseline = baseline?.copy(deviceToken = token)
+        observe(current)
+    }
+
+    private fun flush() {
+        isFlushScheduled = false
+        val current = latest ?: return
+        if (current == baseline) return
+        baseline = current
+        emit()
+    }
+}
+
+internal data class ClerkDeviceTokenBridgeError(val code: String, val message: String)
+
+internal fun clerkSetDeviceTokenBridgeError(throwable: Throwable): ClerkDeviceTokenBridgeError = when (throwable) {
+    is IllegalArgumentException -> ClerkDeviceTokenBridgeError(
+        "E_INVALID_DEVICE_TOKEN",
+        throwable.message ?: "Device token must not be blank"
+    )
+    is IllegalStateException -> ClerkDeviceTokenBridgeError(
+        "E_NOT_CONFIGURED",
+        throwable.message ?: "Clerk must be configured with configureNative before syncing client state."
+    )
+    else -> ClerkDeviceTokenBridgeError(
+        "E_SET_DEVICE_TOKEN_FAILED",
+        throwable.message ?: "Unable to set the device token"
+    )
+}

packages/expo-native-components/android/src/main/java/expo/modules/clerk/ClerkExpoModule.kt

@@ -3,6 +3,8 @@
 package expo.modules.clerk
 
 import android.content.Context
+import android.os.Handler
+import android.os.Looper
 import android.util.Log
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
@@ -39,12 +41,14 @@ import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
 import kotlinx.coroutines.withTimeout
 import org.json.JSONObject
 
 private const val TAG = "ClerkExpoModule"
 private const val NATIVE_AUTH_FLOW_CHANGED_EVENT = "clerkNativeAuthFlowChanged"
 private const val NATIVE_CLIENT_CHANGED_EVENT = "clerkNativeClientChanged"
+private const val NATIVE_CLIENT_INVALIDATED_EVENT = "clerkNativeClientInvalidated"
 private const val HOST_SDK_HEADER = "x-clerk-host-sdk"
 private const val HOST_SDK_VERSION_HEADER = "x-clerk-host-sdk-version"
 private const val HOST_SDK = "expo"
@@ -212,6 +216,12 @@ class ClerkExpoModule : Module() {
     private var lastObservedClientState: ClientStateSnapshot? = null
     private var jsOriginatedClientSyncDepth = 0
     private var configuredPublishableKey: String? = null
+    private val mainHandler = Handler(Looper.getMainLooper())
+    private var clientInvalidationObserverJob: Job? = null
+    private val clientInvalidationTracker = ClerkClientInvalidationTracker(
+        schedule = { flush -> mainHandler.post(flush) },
+        emit = { sendEvent(NATIVE_CLIENT_INVALIDATED_EVENT, emptyMap<String, Any?>()) }
+    )
     private var configuredProxyUrl: String? = null
 
     private data class AuthFlowStateSnapshot(
@@ -247,7 +257,7 @@ class ClerkExpoModule : Module() {
     override fun definition() = ModuleDefinition {
         Name("ClerkExpo")
 
-        Events(NATIVE_AUTH_FLOW_CHANGED_EVENT, NATIVE_CLIENT_CHANGED_EVENT)
+        Events(NATIVE_AUTH_FLOW_CHANGED_EVENT, NATIVE_CLIENT_CHANGED_EVENT, NATIVE_CLIENT_INVALIDATED_EVENT)
 
         OnCreate {
             sharedInstance = this@ClerkExpoModule
@@ -262,6 +272,9 @@ class ClerkExpoModule : Module() {
             authFlowStateObserverJob = null
             clientStateObserverJob?.cancel()
             clientStateObserverJob = null
+            clientInvalidationObserverJob?.cancel()
+            clientInvalidationObserverJob = null
+            mainHandler.removeCallbacksAndMessages(null)
         }
 
         AsyncFunction("configure") { pubKey: String, bearerToken: String?, promise: Promise ->
@@ -276,6 +289,22 @@ class ClerkExpoModule : Module() {
             getClientToken(promise)
         }
 
+        AsyncFunction("configureNative") { pubKey: String, seedDeviceToken: String?, proxyUrl: String?, promise: Promise ->
+            configureNative(pubKey, seedDeviceToken, proxyUrl, promise)
+        }
+
+        AsyncFunction("getDeviceToken") { promise: Promise ->
+            getDeviceToken(promise)
+        }
+
+        AsyncFunction("setDeviceToken") { token: String?, expected: String?, promise: Promise ->
+            setDeviceToken(token, expected, promise)
+        }
+
+        AsyncFunction("refreshClient") { promise: Promise ->
+            refreshClient(promise)
+        }
+
         AsyncFunction("getAuthFlowState") { promise: Promise ->
             promise.resolve(authFlowStatePayload())
         }
@@ -632,6 +661,143 @@ class ClerkExpoModule : Module() {
         }
     }
 
+    // MARK: - single-token client sync
+
+    private fun configureNative(pubKey: String, seedDeviceToken: String?, proxyUrl: String?, promise: Promise) {
+        val context = reactContext ?: run {
+            promise.reject("E_CONFIGURE_FAILED", "React context is not available", null)
+            return
+        }
+
+        coroutineScope.launch {
+            try {
+                val normalizedProxyUrl = proxyUrl?.trim()?.takeIf { it.isNotEmpty() }
+                val activePublishableKey = configuredPublishableKey ?: Clerk.publishableKey
+                val activeProxyUrl = configuredProxyUrl ?: Clerk.proxyUrl
+                val didConfigure = when {
+                    activePublishableKey == null -> {
+                        Clerk.initialize(context, pubKey, clerkConfigurationOptions(normalizedProxyUrl))
+                        true
+                    }
+                    activePublishableKey != pubKey || activeProxyUrl != normalizedProxyUrl -> {
+                        Clerk.switchConfiguration(context, pubKey, clerkConfigurationOptions(normalizedProxyUrl))
+                        true
+                    }
+                    else -> false
+                }
+                if (didConfigure) {
+                    configuredPublishableKey = pubKey
+                    configuredProxyUrl = normalizedProxyUrl
+                    appContext.currentActivity?.let { Clerk.attachActivity(it) }
+                    // Must follow initialize(), which resets customTheme.
+                    loadThemeFromAssets(context)
+                }
+                startClientStateObserver()
+
+                val didAdoptSeed = adoptSeedDeviceTokenIfNeeded(seedDeviceToken)
+                startClientInvalidationObserver()
+                lastObservedClientState = clientStateSnapshot()
+                if (didAdoptSeed) {
+                    // An initialization refresh started before the seed was stored is fenced off by the token change.
+                    launch {
+                        val result = Clerk.refreshClient()
+                        if (result is ClerkResult.Failure) {
+                            debugLog(TAG, "configureNative - refresh after seed adoption failed: ${result.error}")
+                        }
+                        clientInvalidationTracker.observe(clientFingerprint())
+                    }
+                }
+                promise.resolve(null)
+            } catch (e: Exception) {
+                promise.reject("E_CONFIGURE_FAILED", "Failed to configure Clerk SDK: ${e.message}", e)
+            }
+        }
+    }
+
+    private suspend fun adoptSeedDeviceTokenIfNeeded(seedDeviceToken: String?): Boolean {
+        val seed = seedDeviceToken?.trim()?.takeIf { it.isNotEmpty() } ?: return false
+        return withContext(Dispatchers.IO) {
+            Clerk.getDeviceToken() == null && Clerk.setDeviceToken(seed, null)
+        }
+    }
+
+    private fun startClientInvalidationObserver() {
+        clientInvalidationTracker.reset(clientFingerprint())
+        if (clientInvalidationObserverJob != null) {
+            return
+        }
+
+        clientInvalidationObserverJob = coroutineScope.launch {
+            Clerk.clientFlow.collect { client ->
+                clientInvalidationTracker.observe(clientFingerprint(client))
+            }
+        }
+    }
+
+    private fun clientFingerprint(client: Client? = Clerk.clientFlow.value): ClerkClientFingerprint {
+        return ClerkClientFingerprint.from(client, clientStateSnapshot(client).deviceToken)
+    }
+
+    private fun isClerkConfigured(): Boolean = Clerk.publishableKey != null
+
+    private fun getDeviceToken(promise: Promise) {
+        if (!isClerkConfigured()) {
+            promise.resolve(null)
+            return
+        }
+        try {
+            promise.resolve(Clerk.getDeviceToken())
+        } catch (e: Exception) {
+            promise.reject("E_GET_DEVICE_TOKEN_FAILED", e.message ?: "Unable to read the device token", e)
+        }
+    }
+
+    private fun setDeviceToken(token: String?, expected: String?, promise: Promise) {
+        coroutineScope.launch {
+            try {
+                val didSet = withContext(Dispatchers.IO) { Clerk.setDeviceToken(token, expected) }
+                val fingerprint = clientFingerprint()
+                if (didSet) {
+                    clientInvalidationTracker.acknowledgeDeviceToken(fingerprint.deviceToken, fingerprint)
+                } else {
+                    clientInvalidationTracker.observe(fingerprint)
+                }
+                promise.resolve(didSet)
+            } catch (e: Exception) {
+                val error = clerkSetDeviceTokenBridgeError(e)
+                promise.reject(error.code, error.message, e)
+            }
+        }
+    }
+
+    private fun refreshClient(promise: Promise) {
+        if (!isClerkConfigured()) {
+            promise.reject(
+                "E_NOT_CONFIGURED",
+                "Clerk must be configured with configureNative before syncing client state.",
+                null
+            )
+            return
+        }
+
+        coroutineScope.launch {
+            try {
+                val result = Clerk.refreshClient()
+                clientInvalidationTracker.observe(clientFingerprint())
+                when (result) {
+                    is ClerkResult.Success -> promise.resolve(null)
+                    is ClerkResult.Failure -> promise.reject(
+                        "E_REFRESH_CLIENT_FAILED",
+                        result.error?.firstMessage() ?: result.throwable?.message ?: "Client refresh failed",
+                        result.throwable
+                    )
+                }
+            } catch (e: Exception) {
+                promise.reject("E_REFRESH_CLIENT_FAILED", e.message ?: "Client refresh failed", e)
+            }
+        }
+    }
+
     // MARK: - getClientToken
 
     private fun getClientToken(promise: Promise) {