@clerk/expo-native-components 0.0.0-stage → 0.0.1

package/ios/Tests/ClerkUserProfileCustomPageStateTests.swift

@@ -0,0 +1,311 @@
+@testable import ClerkExpo
+import SwiftUI
+import XCTest
+
+final class ClerkUserProfileCustomPageStateTests: XCTestCase {
+  @MainActor
+  func testNavigationPathCanBeRestoredIntoANewLiveHost() {
+    let state = ClerkUserProfileCustomPageState()
+    let navigationPath = makeNavigationPath("billing")
+
+    state.navigationPathDidChange(navigationPath)
+
+    XCTAssertEqual(state.navigationPathForRestoration().count, 1)
+  }
+
+  @MainActor
+  func testKeepingTheSameNavigationDepthDoesNotDismissThePage() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+    state.navigationDepthDidChange(1)
+
+    XCTAssertEqual(events, ["presented:billing"])
+  }
+
+  @MainActor
+  func testIncreasingTheNavigationDepthDoesNotDismissThePage() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+    state.navigationDepthDidChange(2)
+
+    XCTAssertEqual(events, ["presented:billing"])
+  }
+
+  @MainActor
+  func testDecreasingTheNavigationDepthDismissesThePageOnce() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+    state.navigationDepthDidChange(0)
+    state.navigationDepthDidChange(0)
+
+    XCTAssertEqual(events, ["presented:billing", "dismissed:billing"])
+  }
+
+  @MainActor
+  func testInitialUserObservationKeepsTheRetainedPath() {
+    let state = ClerkUserProfileCustomPageState()
+    state.navigationPathDidChange(makeNavigationPath("billing"))
+
+    state.userDidChange(to: "user_1")
+
+    XCTAssertEqual(state.navigationPathForRestoration().count, 1)
+  }
+
+  @MainActor
+  func testUserIdentityChangeInvalidatesNavigationAndDismissesThePageOnce() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+    state.userDidChange(to: "user_1")
+    state.navigationPathDidChange(makeNavigationPath("billing"))
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+
+    state.userDidChange(to: nil)
+    state.userDidChange(to: nil)
+
+    XCTAssertEqual(state.navigationPathForRestoration().count, 0)
+    XCTAssertEqual(events, ["presented:billing", "dismissed:billing"])
+  }
+
+  @MainActor
+  func testKeepingTheSameUserPreservesNavigation() {
+    let state = ClerkUserProfileCustomPageState()
+    state.userDidChange(to: "user_1")
+    state.navigationPathDidChange(makeNavigationPath("billing"))
+
+    state.userDidChange(to: "user_1")
+
+    XCTAssertEqual(state.navigationPathForRestoration().count, 1)
+  }
+
+  @MainActor
+  func testUserIdentityChangeInvalidatesTheEntireUserButtonStack() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+    state.userDidChange(to: "user_1")
+    state.pageDidPresent(path: "billing")
+    state.navigate(action: "push", routeKey: "preferences")
+    state.pageDidDismiss(path: "billing")
+    state.pageDidPresent(path: "preferences")
+    events.removeAll()
+
+    state.userDidChange(to: "user_2")
+    state.userDidChange(to: "user_2")
+
+    XCTAssertEqual(events, ["dismissed:preferences", "dismissed:billing"])
+  }
+
+  @MainActor
+  func testRemovingThePresentedCustomPageInvalidatesNavigation() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+    state.navigationPathDidChange(makeNavigationPath("billing"))
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+
+    state.reconcileCustomPagePaths(["preferences"])
+
+    XCTAssertEqual(state.navigationPathForRestoration().count, 0)
+    XCTAssertEqual(events, ["presented:billing", "dismissed:billing"])
+  }
+
+  @MainActor
+  func testRemovingAnEarlierCustomPageInvalidatesTheRetainedStack() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+    state.navigationPathDidChange(makeNavigationPath("billing", "preferences"))
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+    state.pageDidPresent(path: "preferences", navigationDepth: 2)
+
+    state.reconcileCustomPagePaths(["preferences"])
+
+    XCTAssertEqual(state.navigationPathForRestoration().count, 0)
+    XCTAssertEqual(
+      events,
+      ["presented:billing", "presented:preferences", "dismissed:preferences", "dismissed:billing"]
+    )
+  }
+
+  @MainActor
+  func testRemovingAnEarlierUserButtonPageInvalidatesTheRetainedStack() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+    state.pageDidPresent(path: "billing")
+    state.navigate(action: "push", routeKey: "preferences")
+    state.pageDidDismiss(path: "billing")
+    state.pageDidPresent(path: "preferences")
+    events.removeAll()
+
+    state.reconcileCustomPagePaths(["preferences"])
+
+    XCTAssertEqual(events, ["dismissed:preferences", "dismissed:billing"])
+  }
+
+  @MainActor
+  func testClosingUserButtonProfileDismissesCoveredPages() {
+    var pendingResets: [ClerkUserProfileCustomPageState.InactiveResetAction] = []
+    let state = ClerkUserProfileCustomPageState { pendingResets.append($0) }
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+    state.pageDidPresent(path: "billing")
+    state.navigate(action: "push", routeKey: "preferences")
+    state.pageDidDismiss(path: "billing")
+    state.pageDidPresent(path: "preferences")
+    events.removeAll()
+
+    state.pageDidDismiss(path: "preferences")
+    XCTAssertEqual(pendingResets.count, 1)
+    pendingResets.removeFirst()()
+
+    XCTAssertEqual(events, ["dismissed:preferences", "dismissed:billing"])
+  }
+
+  @MainActor
+  func testReturningToCoveredUserButtonPageKeepsItRetained() {
+    var pendingResets: [ClerkUserProfileCustomPageState.InactiveResetAction] = []
+    let state = ClerkUserProfileCustomPageState { pendingResets.append($0) }
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+    state.pageDidPresent(path: "billing")
+    state.navigate(action: "push", routeKey: "preferences")
+    state.pageDidDismiss(path: "billing")
+    state.pageDidPresent(path: "preferences")
+    events.removeAll()
+
+    state.pageDidDismiss(path: "preferences")
+    state.pageDidPresent(path: "billing")
+    XCTAssertEqual(pendingResets.count, 1)
+    pendingResets.removeFirst()()
+    state.reconcileCustomPagePaths(["billing"])
+
+    XCTAssertEqual(events, ["dismissed:preferences", "presented:billing"])
+  }
+
+  @MainActor
+  func testPushingAUserButtonPathAlreadyInTheStackDoesNotCollapseLaterPaths() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+    state.pageDidPresent(path: "billing")
+    state.navigate(action: "push", routeKey: "preferences")
+    state.pageDidDismiss(path: "billing")
+    state.pageDidPresent(path: "preferences")
+    events.removeAll()
+
+    state.navigate(action: "push", routeKey: "billing")
+    state.reconcileCustomPagePaths(["billing", "preferences"])
+
+    XCTAssertEqual(events, [])
+  }
+
+  @MainActor
+  func testPoppingMultipleCustomPagesDismissesEachRetainedPage() {
+    let state = ClerkUserProfileCustomPageState()
+    var events: [String] = []
+    state.setPageEventHandler { type, path in
+      events.append("\(type):\(path)")
+    }
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+    state.pageDidPresent(path: "preferences", navigationDepth: 2)
+
+    state.navigationDepthDidChange(0)
+
+    XCTAssertEqual(
+      events,
+      ["presented:billing", "presented:preferences", "dismissed:preferences", "dismissed:billing"]
+    )
+  }
+
+  @MainActor
+  func testPoppedCustomPagesAreNotIncludedInLaterReconciliation() {
+    let state = ClerkUserProfileCustomPageState()
+    state.navigationPathDidChange(makeNavigationPath("billing", "preferences"))
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+    state.pageDidPresent(path: "preferences", navigationDepth: 2)
+
+    state.navigationPathDidChange(makeNavigationPath("billing"))
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+    state.reconcileCustomPagePaths(["billing"])
+
+    XCTAssertEqual(state.navigationPathForRestoration().count, 1)
+  }
+
+  @MainActor
+  func testKeepingThePresentedCustomPagePreservesNavigation() {
+    let state = ClerkUserProfileCustomPageState()
+    state.navigationPathDidChange(makeNavigationPath("billing"))
+    state.pageDidPresent(path: "billing", navigationDepth: 1)
+
+    state.reconcileCustomPagePaths(["billing", "preferences"])
+
+    XCTAssertEqual(state.navigationPathForRestoration().count, 1)
+  }
+
+  func testCustomPageLabelComesFromTheMatchingRow() {
+    let rows = parseUserProfileCustomPages(
+      """
+      [{"path":"billing","label":"Billing details","icon":"billing","placement":{"type":"sectionEnd","section":"profile"}}]
+      """,
+      pageCount: 1
+    )
+
+    XCTAssertEqual(userProfileCustomPageLabel(for: "billing", rows: rows), "Billing details")
+  }
+
+  func testPushOnlyDestinationsKeepTheirTitleWithoutCreatingRows() {
+    let pages = parseUserProfileCustomPages(
+      """
+      [
+        {"path":"billing","label":"Billing","icon":"billing","placement":{"type":"sectionEnd","section":"profile"}},
+        {"path":"invoice-details","label":"Invoice details","icon":"settings","placement":{"type":"sectionEnd","section":"profile"},"showAsRow":false}
+      ]
+      """,
+      pageCount: 2
+    )
+
+    XCTAssertEqual(pages.filter(\.shouldShowAsRow).map(\.path), ["billing"])
+    XCTAssertEqual(userProfileCustomPageLabel(for: "invoice-details", rows: pages), "Invoice details")
+  }
+
+  private func makeNavigationPath(_ routes: String...) -> NavigationPath {
+    var navigationPath = NavigationPath()
+    for route in routes {
+      navigationPath.append(route)
+    }
+    return navigationPath
+  }
+}

package/package.json

@@ -1,6 +1,82 @@
 {
   "name": "@clerk/expo-native-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1",
+  "description": "Native Clerk components and native SDK integration for Expo, powered by clerk-ios and clerk-android",
+  "keywords": [
+    "react",
+    "react-native",
+    "expo",
+    "clerk",
+    "auth",
+    "authentication",
+    "native"
+  ],
+  "homepage": "https://clerk.com/",
+  "bugs": {
+    "url": "https://github.com/clerk/javascript/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clerk/javascript.git",
+    "directory": "packages/expo-native-components"
+  },
+  "license": "MIT",
+  "author": "Clerk",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./app.plugin.js": "./app.plugin.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "android",
+    "ios",
+    "src/specs",
+    "expo-module.config.json",
+    "react-native.config.js",
+    "app.plugin.js",
+    "app.plugin.d.ts"
+  ],
+  "dependencies": {
+    "tslib": "2.8.1",
+    "@clerk/react": "^6.17.7"
+  },
+  "devDependencies": {
+    "@expo/config-plugins": "^54.0.4",
+    "react-native": "^0.86.0"
+  },
+  "peerDependencies": {
+    "expo": ">=54 <58",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.75"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "codegenConfig": {
+    "name": "ClerkExpoSpec",
+    "type": "all",
+    "jsSrcsDir": "src/specs"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "build:declarations": "tsc -p tsconfig.declarations.json",
+    "clean": "rimraf ./dist",
+    "dev": "tsdown --watch",
+    "dev:pub": "pnpm dev -- --env.publish",
+    "format": "node ../../scripts/format-package.mjs",
+    "format:check": "node ../../scripts/format-package.mjs --check",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
+  }
 }

package/react-native.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      ios: {},
+      android: null,
+    },
+  },
+};

package/src/specs/NativeClerkAuthView.android.ts

@@ -0,0 +1,15 @@
+import { requireNativeView } from 'expo';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+
+type AuthEvent = Readonly<{ type: string }>;
+
+interface NativeProps extends ViewProps {
+  mode?: string;
+  isDismissible?: boolean;
+  logoMaxHeight?: number;
+  hostBackButton?: boolean;
+  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
+  onHostBack?: (event: NativeSyntheticEvent<object>) => void;
+}
+
+export default requireNativeView<NativeProps>('ClerkAuthView');

package/src/specs/NativeClerkAuthView.ts

@@ -0,0 +1,19 @@
+import { requireNativeView } from 'expo';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import { Platform } from 'react-native';
+
+type AuthEvent = Readonly<{ type: string }>;
+
+interface NativeProps extends ViewProps {
+  mode?: string;
+  isDismissible?: boolean;
+  logoMaxHeight?: number;
+  hostBackButton?: boolean;
+  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
+  onHostBack?: (event: NativeSyntheticEvent<object>) => void;
+}
+
+const NativeClerkAuthView =
+  Platform.OS === 'ios' || Platform.OS === 'android' ? requireNativeView<NativeProps>('ClerkAuthView') : null;
+
+export default NativeClerkAuthView;

package/src/specs/NativeClerkModule.ts

@@ -0,0 +1,6 @@
+import { requireOptionalNativeModule } from 'expo';
+
+import type { Spec } from './NativeClerkModule.types';
+
+// Optional so it resolves to null in Expo Go instead of throwing at import time.
+export default requireOptionalNativeModule<Spec>('ClerkExpo');

package/src/specs/NativeClerkModule.types.ts

@@ -0,0 +1,9 @@
+export type NativeAuthFlowState = {
+  isLoaded: boolean;
+  isAuthFlowComplete: boolean;
+};
+
+export interface Spec {
+  addListener?(eventName: string, listener?: (...args: unknown[]) => void): { remove: () => void };
+  getAuthFlowState?(): Promise<NativeAuthFlowState>;
+}

package/src/specs/NativeClerkModule.web.ts

@@ -0,0 +1,3 @@
+import type { Spec } from './NativeClerkModule.types';
+
+export default null as Spec | null;

package/src/specs/NativeClerkUserButtonView.android.ts

@@ -0,0 +1,9 @@
+import { requireNativeView } from 'expo';
+import type { ViewProps } from 'react-native';
+
+// Codegen requires an interface declaration in the iOS spec; keep the Android
+// view prop shape identical for the shared React wrapper.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface NativeProps extends ViewProps {}
+
+export default requireNativeView<NativeProps>('ClerkUserButtonView');

package/src/specs/NativeClerkUserButtonView.ts

@@ -0,0 +1,11 @@
+import { requireNativeView } from 'expo';
+import type { ViewProps } from 'react-native';
+import { Platform } from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface NativeProps extends ViewProps {}
+
+const NativeClerkUserButtonView =
+  Platform.OS === 'ios' || Platform.OS === 'android' ? requireNativeView<NativeProps>('ClerkUserButtonView') : null;
+
+export default NativeClerkUserButtonView;

package/src/specs/NativeClerkUserProfileView.android.ts

@@ -0,0 +1,13 @@
+import { requireNativeView } from 'expo';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+
+type ProfileEvent = Readonly<{ type: string }>;
+
+interface NativeProps extends ViewProps {
+  isDismissible?: boolean;
+  hostBackButton?: boolean;
+  onProfileEvent?: (event: NativeSyntheticEvent<ProfileEvent>) => void;
+  onHostBack?: (event: NativeSyntheticEvent<object>) => void;
+}
+
+export default requireNativeView<NativeProps>('ClerkUserProfileView');

package/src/specs/NativeClerkUserProfileView.ts

@@ -0,0 +1,17 @@
+import { requireNativeView } from 'expo';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import { Platform } from 'react-native';
+
+type ProfileEvent = Readonly<{ type: string }>;
+
+interface NativeProps extends ViewProps {
+  isDismissible?: boolean;
+  hostBackButton?: boolean;
+  onProfileEvent?: (event: NativeSyntheticEvent<ProfileEvent>) => void;
+  onHostBack?: (event: NativeSyntheticEvent<object>) => void;
+}
+
+const NativeClerkUserProfileView =
+  Platform.OS === 'ios' || Platform.OS === 'android' ? requireNativeView<NativeProps>('ClerkUserProfileView') : null;
+
+export default NativeClerkUserProfileView;

package/src/specs/__tests__/native-view.web.test.ts

@@ -0,0 +1,43 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+  requireNativeView: vi.fn(() => {
+    throw new Error('requireNativeView should not be called on web');
+  }),
+}));
+
+vi.mock('expo', () => ({
+  requireNativeView: mocks.requireNativeView,
+}));
+
+vi.mock('react-native', () => ({
+  Platform: {
+    OS: 'web',
+  },
+}));
+
+async function importNativeViews() {
+  const [authView, userProfileView, userButtonView] = await Promise.all([
+    import('../NativeClerkAuthView'),
+    import('../NativeClerkUserProfileView'),
+    import('../NativeClerkUserButtonView'),
+  ]);
+
+  return [authView.default, userProfileView.default, userButtonView.default] as const;
+}
+
+describe('native view specs on web', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.clearAllMocks();
+  });
+
+  test('do not require native views at import time', async () => {
+    const [authView, userProfileView, userButtonView] = await importNativeViews();
+
+    expect(authView).toBeNull();
+    expect(userProfileView).toBeNull();
+    expect(userButtonView).toBeNull();
+    expect(mocks.requireNativeView).not.toHaveBeenCalled();
+  });
+});