feat(expo): add hosted auth flow

.changeset/hosted-auth-expo.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': minor
+---
+
+Add `@clerk/expo/hosted-auth` for signing in or signing up through Account Portal from native Expo apps.

packages/expo/app.plugin.js

@@ -9,10 +9,12 @@
  * Native modules and views are registered via Expo Modules autolinking.
  */
 const {
+  AndroidConfig,
   withXcodeProject,
   withDangerousMod,
   withInfoPlist,
   withAppBuildGradle,
+  withAndroidManifest,
   withEntitlementsPlist,
 } = require('@expo/config-plugins');
 const path = require('path');
@@ -21,6 +23,35 @@ const packageJson = require('./package.json');
 
 const CLERK_MIN_IOS_VERSION = '17.0';
 
+const addHostedAuthIntentFilter = (mainActivity, packageName) => {
+  const callbackHost = `${packageName}.callback`;
+  const intentFilters = mainActivity['intent-filter'] || [];
+  const hasAndroidName = (entries, name) => entries?.some(entry => entry.$?.['android:name'] === name);
+  const callbackIsRegistered = intentFilters.some(
+    intentFilter =>
+      hasAndroidName(intentFilter.action, 'android.intent.action.VIEW') &&
+      hasAndroidName(intentFilter.category, 'android.intent.category.DEFAULT') &&
+      hasAndroidName(intentFilter.category, 'android.intent.category.BROWSABLE') &&
+      intentFilter.data?.some(
+        data => data.$?.['android:scheme'] === 'clerk' && data.$?.['android:host'] === callbackHost,
+      ),
+  );
+
+  if (callbackIsRegistered) {
+    return;
+  }
+
+  intentFilters.push({
+    action: [{ $: { 'android:name': 'android.intent.action.VIEW' } }],
+    category: [
+      { $: { 'android:name': 'android.intent.category.DEFAULT' } },
+      { $: { 'android:name': 'android.intent.category.BROWSABLE' } },
+    ],
+    data: [{ $: { 'android:scheme': 'clerk', 'android:host': callbackHost } }],
+  });
+  mainActivity['intent-filter'] = intentFilters;
+};
+
 const withClerkIOS = config => {
   console.log('✅ Clerk iOS plugin loaded');
 
@@ -94,6 +125,15 @@ const withClerkIOS = config => {
 const withClerkAndroid = config => {
   console.log('✅ Clerk Android plugin loaded');
 
+  config = withAndroidManifest(config, modConfig => {
+    const packageName = config.android?.package;
+    if (packageName) {
+      const mainActivity = AndroidConfig.Manifest.getMainActivityOrThrow(modConfig.modResults);
+      addHostedAuthIntentFilter(mainActivity, packageName);
+    }
+    return modConfig;
+  });
+
   return withAppBuildGradle(config, modConfig => {
     let buildGradle = modConfig.modResults.contents;
 
@@ -354,6 +394,7 @@ const withClerkExpo = (config, props = {}) => {
 
 module.exports = withClerkExpo;
 module.exports._testing = {
+  addHostedAuthIntentFilter,
   validateThemeJson,
   isPlainObject,
   VALID_COLOR_KEYS,

packages/expo/hosted-auth/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../dist/hosted-auth/index.js",
+  "types": "../dist/hosted-auth/index.d.ts"
+}

packages/expo/package.json

@@ -61,6 +61,10 @@
       "types": "./dist/apple/index.d.ts",
       "default": "./dist/apple/index.js"
     },
+    "./hosted-auth": {
+      "types": "./dist/hosted-auth/index.d.ts",
+      "default": "./dist/hosted-auth/index.js"
+    },
     "./resource-cache": {
       "types": "./dist/resource-cache/index.d.ts",
       "default": "./dist/resource-cache/index.js"
@@ -92,6 +96,7 @@
     "token-cache",
     "google",
     "apple",
+    "hosted-auth",
     "experimental",
     "legacy",
     "src/specs",

packages/expo/src/__tests__/appPlugin.hostedAuth.test.js

@@ -0,0 +1,60 @@
+import { describe, expect, test } from 'vitest';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports -- CJS plugin, no ESM export
+const { addHostedAuthIntentFilter } = require('../../app.plugin.js')._testing;
+
+const hostedAuthIntentFilter = () => ({
+  action: [{ $: { 'android:name': 'android.intent.action.VIEW' } }],
+  category: [
+    { $: { 'android:name': 'android.intent.category.DEFAULT' } },
+    { $: { 'android:name': 'android.intent.category.BROWSABLE' } },
+  ],
+  data: [{ $: { 'android:scheme': 'clerk', 'android:host': 'com.example.app.callback' } }],
+});
+
+describe('addHostedAuthIntentFilter', () => {
+  test('registers the canonical Android hosted auth callback', () => {
+    const mainActivity = {};
+
+    addHostedAuthIntentFilter(mainActivity, 'com.example.app');
+
+    expect(mainActivity['intent-filter']).toContainEqual(hostedAuthIntentFilter());
+  });
+
+  test('does not duplicate an existing hosted auth callback', () => {
+    const mainActivity = {};
+
+    addHostedAuthIntentFilter(mainActivity, 'com.example.app');
+    addHostedAuthIntentFilter(mainActivity, 'com.example.app');
+
+    expect(mainActivity['intent-filter']).toHaveLength(1);
+  });
+
+  test.each([
+    ['VIEW action', filter => ({ ...filter, action: [] })],
+    [
+      'DEFAULT category',
+      filter => ({
+        ...filter,
+        category: filter.category.filter(category => category.$['android:name'] !== 'android.intent.category.DEFAULT'),
+      }),
+    ],
+    [
+      'BROWSABLE category',
+      filter => ({
+        ...filter,
+        category: filter.category.filter(
+          category => category.$['android:name'] !== 'android.intent.category.BROWSABLE',
+        ),
+      }),
+    ],
+  ])('registers a valid callback when a matching filter lacks the %s', (_requirement, omitRequirement) => {
+    const mainActivity = {
+      'intent-filter': [omitRequirement(hostedAuthIntentFilter())],
+    };
+
+    addHostedAuthIntentFilter(mainActivity, 'com.example.app');
+
+    expect(mainActivity['intent-filter']).toContainEqual(hostedAuthIntentFilter());
+  });
+});