feat(expo-native-components): move native components into @clerk/expo-native-components

.changeset/expo-native-components-moved.md

@@ -0,0 +1,25 @@
+---
+'@clerk/expo': minor
+---
+
+The native components (`AuthView`, `UserButton`, `UserProfileView`) and native client sync have moved to the new `@clerk/expo-native-components` package. Apps that don't install it no longer include the Clerk iOS and Android SDKs and no longer require iOS 17.
+
+If you use the native components, install the new package:
+
+```sh
+npx expo install @clerk/expo-native-components
+```
+
+add its config plugin alongside `@clerk/expo` in your app config:
+
+```json
+{
+  "expo": {
+    "plugins": ["@clerk/expo", "@clerk/expo-native-components"]
+  }
+}
+```
+
+then rebuild your native app. `@clerk/expo/native` keeps working and re-exports the components from `@clerk/expo-native-components`, which you can also import from directly. Without `@clerk/expo-native-components` installed, rendering a component from `@clerk/expo/native` throws an error explaining how to install it.
+
+The `keychainService` and `theme` config plugin options now belong to the `@clerk/expo-native-components` plugin. The `@clerk/expo` plugin forwards them when `@clerk/expo-native-components` is installed, and warns otherwise.

.changeset/introduce-expo-native.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo-native-components': minor
+---
+
+Add `@clerk/expo-native-components`, the optional companion package to `@clerk/expo` that contains Clerk's prebuilt native components (`AuthView`, `UserButton`, `UserProfileView`) and the native module built on the Clerk iOS and Android SDKs. It includes a config plugin that accepts the `keychainService` and `theme` options.

.github/labeler.yml

@@ -28,6 +28,10 @@ expo:
   - changed-files:
       - any-glob-to-any-file: packages/expo/**
 
+expo-native-components:
+  - changed-files:
+      - any-glob-to-any-file: packages/expo-native-components/**
+
 express:
   - changed-files:
       - any-glob-to-any-file: packages/express/**

.github/workflows/api-changes.yml

@@ -19,6 +19,7 @@ on:
       - 'packages/clerk-js/**'
       - 'packages/expo/**'
       - 'packages/expo-google-signin/**'
+      - 'packages/expo-native-components/**'
       - 'packages/expo-passkeys/**'
       - 'packages/express/**'
       - 'packages/fastify/**'
@@ -56,6 +57,7 @@ env:
     --filter=@clerk/clerk-js
     --filter=@clerk/expo
     --filter=@clerk/expo-google-signin
+    --filter=@clerk/expo-native-components
     --filter=@clerk/expo-passkeys
     --filter=@clerk/express
     --filter=@clerk/fastify

.github/workflows/expo-native-build.yml

@@ -11,6 +11,7 @@ on:
       - 'integration/tests/expo-native/**'
       - 'packages/expo/**'
       - 'packages/expo-google-signin/**'
+      - 'packages/expo-native-components/**'
   workflow_dispatch:
 
 permissions:
@@ -85,6 +86,7 @@ jobs:
               packages/clerk-js \
               packages/expo \
               packages/expo-google-signin \
+              packages/expo-native-components \
               packages/react \
               packages/shared \
               "$FIXTURE_DIR" |
@@ -125,6 +127,7 @@ jobs:
           mkdir -p "$SDK_PACK_DIR"
           pnpm --filter @clerk/expo pack --pack-destination "$SDK_PACK_DIR"
           pnpm --filter @clerk/expo-google-signin pack --pack-destination "$SDK_PACK_DIR"
+          pnpm --filter @clerk/expo-native-components pack --pack-destination "$SDK_PACK_DIR"
 
       - name: Install fixture dependencies
         if: steps.native-build-cache.outputs.cache-hit != 'true'
@@ -135,10 +138,11 @@ jobs:
         run: |
           cp "package.sdk-$EXPO_SDK.json" package.json
           pnpm install --no-frozen-lockfile
-          # [0-9] keeps this glob off the clerk-expo-google-signin tarball.
+          # [0-9] keeps this glob off the clerk-expo-google-signin and clerk-expo-native tarballs.
           SDK_TARBALL="$(ls "$SDK_PACK_DIR"/clerk-expo-[0-9]*.tgz)"
           GOOGLE_SIGNIN_TARBALL="$(ls "$SDK_PACK_DIR"/clerk-expo-google-signin-*.tgz)"
-          pnpm add "$SDK_TARBALL" "$GOOGLE_SIGNIN_TARBALL" -w
+          NATIVE_TARBALL="$(ls "$SDK_PACK_DIR"/clerk-expo-native-components-*.tgz)"
+          pnpm add "$SDK_TARBALL" "$GOOGLE_SIGNIN_TARBALL" "$NATIVE_TARBALL" -w
           # expo-dev-client makes even release builds boot into the dev
           # launcher (unreachable Metro in CI), which stalls every Maestro
           # flow on a blank screen. Skip it on e2e jobs only.

integration/templates/expo-native/app.json

@@ -12,6 +12,6 @@
     "android": {
       "package": "com.clerk.exponativebuildfixture"
     },
-    "plugins": ["expo-secure-store", "@clerk/expo", "expo-web-browser"]
+    "plugins": ["expo-secure-store", "@clerk/expo", "@clerk/expo-native", "expo-web-browser"]
   }
 }

package.json

@@ -10,7 +10,7 @@
     "changeset": "changeset",
     "changeset:empty": "pnpm changeset --empty",
     "clean": "turbo run clean",
-    "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/expo --filter=!@clerk/tanstack-react-start --filter=!@clerk/chrome-extension",
+    "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/expo --filter=!@clerk/expo-native-components --filter=!@clerk/tanstack-react-start --filter=!@clerk/chrome-extension",
     "dev:fe-libs": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/clerk-js --filter=@clerk/ui --filter=@clerk/shared",
     "dev:js": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:current --filter=@clerk/clerk-js",
     "dev:sandbox": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:sandbox:serve",

packages/expo-native-components/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Clerk, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/expo-native-components/README.md

@@ -0,0 +1,107 @@
+<p align="center">
+  <a href="https://clerk.com?utm_source=github&utm_medium=clerk_expo_native_components" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://images.clerk.com/static/logo-dark-mode-400x400.png">
+      <img src="https://images.clerk.com/static/logo-light-mode-400x400.png" height="64">
+    </picture>
+  </a>
+  <br />
+  <h1 align="center">@clerk/expo-native-components</h1>
+</p>
+
+<div align="center">
+
+[![Chat on Discord](https://img.shields.io/discord/856971667393609759.svg?logo=discord)](https://clerk.com/discord)
+[![Clerk documentation](https://img.shields.io/badge/documentation-clerk-green.svg)](https://clerk.com/docs?utm_source=github&utm_medium=clerk_expo_native_components)
+[![Follow on X](https://img.shields.io/twitter/follow/clerk?style=social)](https://x.com/intent/follow?screen_name=clerk)
+
+[Changelog](https://github.com/clerk/javascript/blob/main/packages/expo-native-components/CHANGELOG.md)
+·
+[Report a Bug](https://github.com/clerk/javascript/issues/new?assignees=&labels=needs-triage&projects=&template=BUG_REPORT.yml)
+·
+[Request a Feature](https://feedback.clerk.com/roadmap)
+·
+[Get help](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_expo_native_components)
+
+</div>
+
+## Getting Started
+
+`@clerk/expo-native-components` adds Clerk's prebuilt native components to an Expo app that uses [`@clerk/expo`](https://github.com/clerk/javascript/tree/main/packages/expo). It contains the native modules built on the Clerk iOS and Android SDKs:
+
+- **iOS**: [clerk-ios](https://github.com/clerk/clerk-ios) (SwiftUI)
+- **Android**: [clerk-android](https://github.com/clerk/clerk-android) (Jetpack Compose)
+
+Install it only if you use `AuthView`, `UserProfileView`, `UserButton`, or biometric credentials. Apps that only use `@clerk/expo` do not include the Clerk native SDKs.
+
+### Prerequisites
+
+- `@clerk/expo`
+- Expo 54 or later, with a [development build](https://docs.expo.dev/develop/development-builds/introduction/) (Expo Go is not supported)
+- iOS 17 or later
+
+### Installation
+
+```sh
+npx expo install @clerk/expo @clerk/expo-native-components
+```
+
+Add the config plugin alongside `@clerk/expo` in your app config, then rebuild your native app:
+
+```json
+{
+  "expo": {
+    "plugins": ["@clerk/expo", "@clerk/expo-native-components"]
+  }
+}
+```
+
+The plugin accepts the following options:
+
+- `keychainService`: keychain service identifier to share the session with app extensions.
+- `theme`: path to a JSON file with `colors`, `darkColors`, and `design` keys that styles the native components.
+
+## Usage
+
+```tsx
+import { useAuth } from '@clerk/expo';
+import { AuthView } from '@clerk/expo-native-components';
+
+export default function SignInScreen() {
+  const { isSignedIn } = useAuth();
+
+  if (isSignedIn) {
+    return null;
+  }
+
+  return <AuthView />;
+}
+```
+
+For further information, guides, and examples visit the [Expo reference documentation](https://clerk.com/docs/references/expo/overview?utm_source=github&utm_medium=clerk_expo_native_components).
+
+## Support
+
+For help, visit our [support page](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_expo_native_components).
+
+## Community
+
+Join our [Discord community](https://clerk.com/discord) to connect with other developers.
+
+## Contributing
+
+We're open to all community contributions! If you'd like to contribute in any way, please read [our contribution guidelines](https://github.com/clerk/javascript/blob/main/docs/CONTRIBUTING.md) and [code of conduct](https://github.com/clerk/javascript/blob/main/docs/CODE_OF_CONDUCT.md).
+
+## Security
+
+`@clerk/expo-native-components` follows good practices of security, but 100% security cannot be assured.
+
+`@clerk/expo-native-components` is provided **"as is"** without any **warranty**. Use at your own risk.
+
+_For more information and to report security issues, please refer to our [security documentation](https://github.com/clerk/javascript/blob/main/docs/SECURITY.md)._
+
+## License
+
+This project is licensed under the **MIT license**.
+
+See [LICENSE](https://github.com/clerk/javascript/blob/main/packages/expo-native-components/LICENSE) for more information.

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

@@ -13,8 +13,9 @@ applyKotlinExpoModulesCorePlugin()
 group = 'com.clerk.expo'
 version = '1.0.0'
 
-def clerkExpoPackageJson = new JsonSlurper().parse(new File(projectDir, "../package.json"))
-def clerkExpoVersion = clerkExpoPackageJson.version.toString()
+// Set by the @clerk/expo-native-components config plugin to the installed @clerk/expo version.
+def clerkExpoVersion = rootProject.findProperty("clerkExpo.hostSdkVersion")?.toString() ?:
+  new JsonSlurper().parse(new File(projectDir, "../package.json")).version.toString()
 
 // Dependency versions - centralized for easier updates
 // See: https://docs.gradle.org/current/userguide/version_catalogs.html for app-level version catalogs
@@ -97,7 +98,7 @@ try {
   }
 } catch (Exception ignored) {
   // Future Gradle versions with Isolated Projects may block cross-project configuration.
-  // In that case, users should add '@clerk/expo' to their app.json plugins array instead,
+  // In that case, users should add '@clerk/expo-native-components' to their app.json plugins array instead,
   // which applies the flag via the config plugin's withClerkAndroid.
 }
 

packages/expo-native-components/app.plugin.d.ts

@@ -0,0 +1,5 @@
+import type { ConfigPlugin } from '@expo/config-plugins';
+
+declare const withClerkExpoNativeComponents: ConfigPlugin<{ keychainService?: string; theme?: string } | void>;
+
+export = withClerkExpoNativeComponents;