feat(expo,react): Make Signal hooks the default

.cursor/rules/monorepo.mdc

@@ -50,7 +50,6 @@ Framework-Specific Packages
 - `@clerk/vue` - Vue.js composables and components
 - `@clerk/astro` - Astro integration with SSR support
 - `@clerk/nuxt` - Nuxt.js module
-- `@clerk/remix` - Remix loader and action utilities
 - `@clerk/express` - Express.js middleware
 - `@clerk/fastify` - Fastify plugin
 - `@clerk/expo` - React Native/Expo SDK

.github/labeler.yml

@@ -39,9 +39,6 @@ react:
 react-router:
   - packages/react-router/**
 
-remix:
-  - packages/remix/**
-
 tanstack:
   - packages/tanstack-react-start/**
 

.github/workflows/ci.yml

@@ -209,7 +209,7 @@ jobs:
       matrix:
         include:
           - node-version: 20
-            test-filter: '--filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@clerk/nextjs --filter=@clerk/react --filter=@clerk/shared --filter=@clerk/remix --filter=@clerk/tanstack-react-start --filter=@clerk/elements --filter=@clerk/vue --filter=@clerk/nuxt --filter=@clerk/expo'
+            test-filter: '--filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@clerk/nextjs --filter=@clerk/react --filter=@clerk/shared --filter=@clerk/tanstack-react-start --filter=@clerk/elements --filter=@clerk/vue --filter=@clerk/nuxt --filter=@clerk/expo'
           - node-version: 22
             test-filter: '**'
 

.jit/config.yml

@@ -17,9 +17,6 @@ folders:
   - path: /packages/react
     exclude:
       - ./**/*.test.ts
-  - path: /packages/remix
-    exclude:
-      - ./**/*.test.ts
   - path: /packages/shared
     exclude:
       - ./**/*.test.ts

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -174,9 +174,9 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "react/use-reverification.mdx",
   "react/use-session-list.mdx",
   "react/use-session.mdx",
-  "react/use-sign-in-signal.mdx",
+  "react/use-sign-in-1.mdx",
   "react/use-sign-in.mdx",
-  "react/use-sign-up-signal.mdx",
+  "react/use-sign-up-1.mdx",
   "react/use-sign-up.mdx",
   "react/use-user.mdx",
   "nextjs/auth.mdx",

integration/templates/custom-flows-react-vite/src/routes/SignIn.tsx

@@ -5,15 +5,14 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useUser } from '@clerk/react';
-import { useSignInSignal } from '@clerk/react/experimental';
+import { useSignIn, useUser } from '@clerk/react';
 import { useState } from 'react';
 import { NavLink, useNavigate } from 'react-router';
 
 type AvailableStrategy = 'email_code' | 'phone_code' | 'password' | 'reset_password_email_code';
 
 export function SignIn({ className, ...props }: React.ComponentProps<'div'>) {
-  const { signIn, errors, fetchStatus } = useSignInSignal();
+  const { signIn, errors, fetchStatus } = useSignIn();
   const [selectedStrategy, setSelectedStrategy] = useState<AvailableStrategy | null>(null);
   const { isSignedIn } = useUser();
   const navigate = useNavigate();

integration/templates/custom-flows-react-vite/src/routes/SignUp.tsx

@@ -5,11 +5,11 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useSignUpSignal } from '@clerk/react/experimental';
+import { useSignUp } from '@clerk/react';
 import { NavLink, useNavigate } from 'react-router';
 
 export function SignUp({ className, ...props }: React.ComponentProps<'div'>) {
-  const { signUp, errors, fetchStatus } = useSignUpSignal();
+  const { signUp, errors, fetchStatus } = useSignUp();
   const navigate = useNavigate();
 
   const handleSubmit = async (formData: FormData) => {

integration/templates/expo-web/app/_layout.tsx

@@ -8,6 +8,7 @@ export default function RootLayout() {
     <ClerkProvider
       routerPush={(to: string) => router.push(to)}
       routerReplace={to => router.replace(to)}
+      clerkJSUrl={process.env.EXPO_PUBLIC_CLERK_JS_URL}
     >
       <ClerkLoaded>
         <Stack>

integration/templates/expo-web/app/custom-sign-in.tsx

@@ -4,35 +4,22 @@ import { Text, TextInput, Button, View } from 'react-native';
 import React from 'react';
 
 export default function Page() {
-  const { signIn, setActive, isLoaded } = useSignIn();
+  const { signIn } = useSignIn();
   const router = useRouter();
 
   const [emailAddress, setEmailAddress] = React.useState('');
   const [password, setPassword] = React.useState('');
 
   const onSignInPress = React.useCallback(async () => {
-    if (!isLoaded) {
-      return;
-    }
-
-    try {
-      const signInAttempt = await signIn.create({
-        identifier: emailAddress,
-        password,
+    await signIn.password({ emailAddress, password });
+    if (signIn.status === 'complete') {
+      await signIn.finalize({
+        navigate: async () => {
+          router.replace('/');
+        },
       });
-
-      if (signInAttempt.status === 'complete') {
-        await setActive({ session: signInAttempt.createdSessionId });
-        router.replace('/');
-      } else {
-        // See https://clerk.com/docs/custom-flows/error-handling
-        // for more info on error handling
-        console.error(JSON.stringify(signInAttempt, null, 2));
-      }
-    } catch (err: any) {
-      console.error(JSON.stringify(err, null, 2));
     }
-  }, [isLoaded, emailAddress, password]);
+  }, [emailAddress, password]);
 
   return (
     <View>

integration/templates/expo-web/app/custom-sign-up.tsx

@@ -4,7 +4,7 @@ import { useSignUp } from '@clerk/expo';
 import { useRouter } from 'expo-router';
 
 export default function SignUpScreen() {
-  const { isLoaded, signUp, setActive } = useSignUp();
+  const { signUp } = useSignUp();
   const router = useRouter();
 
   const [emailAddress, setEmailAddress] = React.useState('');
@@ -13,46 +13,19 @@ export default function SignUpScreen() {
   const [code, setCode] = React.useState('');
 
   const onSignUpPress = async () => {
-    if (!isLoaded) {
-      return;
-    }
-
-    try {
-      await signUp.create({
-        emailAddress,
-        password,
-      });
-
-      await signUp.prepareEmailAddressVerification({ strategy: 'email_code' });
-
-      setPendingVerification(true);
-    } catch (err: any) {
-      // See https://clerk.com/docs/custom-flows/error-handling
-      // for more info on error handling
-      console.error(JSON.stringify(err, null, 2));
-    }
+    await signUp.password({ emailAddress, password });
+    await signUp.verifications.sendEmailCode({ emailAddress });
+    setPendingVerification(true);
   };
 
   const onPressVerify = async () => {
-    if (!isLoaded) {
-      return;
-    }
-
-    try {
-      const completeSignUp = await signUp.attemptEmailAddressVerification({
-        code,
+    await signUp.verifications.verifyEmailCode({ code });
+    if (signUp.status === 'complete') {
+      await signUp.finalize({
+        navigate: async () => {
+          router.replace('/');
+        },
       });
-
-      if (completeSignUp.status === 'complete') {
-        await setActive({ session: completeSignUp.createdSessionId });
-        router.replace('/');
-      } else {
-        console.error(JSON.stringify(completeSignUp, null, 2));
-      }
-    } catch (err: any) {
-      // See https://clerk.com/docs/custom-flows/error-handling
-      // for more info on error handling
-      console.error(JSON.stringify(err, null, 2));
     }
   };
 

integration/templates/expo-web/metro.config.js

@@ -19,6 +19,10 @@ const getClerkExpoPath = () => {
     return clerkExpoPath.replace('file:', '');
   }
 
+  if (clerkExpoPath?.startsWith('link:')) {
+    return clerkExpoPath.replace('link:', '');
+  }
+
   return undefined;
 };
 

package.json

@@ -10,7 +10,7 @@
     "changeset": "changeset",
     "changeset:empty": "pnpm changeset --empty",
     "clean": "turbo clean",
-    "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/expo --filter=!@clerk/tanstack-react-start --filter=!@clerk/elements --filter=!@clerk/remix --filter=!@clerk/chrome-extension",
+    "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/expo --filter=!@clerk/tanstack-react-start --filter=!@clerk/elements --filter=!@clerk/chrome-extension",
     "dev:js": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:current --filter=@clerk/clerk-js",
     "format": "turbo format && node scripts/format-non-workspace.mjs",
     "format:check": "turbo format:check && node scripts/format-non-workspace.mjs --check",

packages/expo/package.json

@@ -55,6 +55,10 @@
     "./experimental": {
       "types": "./dist/experimental.d.ts",
       "default": "./dist/experimental.js"
+    },
+    "./legacy": {
+      "types": "./dist/legacy.d.ts",
+      "default": "./dist/legacy.js"
     }
   },
   "main": "./dist/index.js",
@@ -67,7 +71,9 @@
     "passkeys",
     "secure-store",
     "resource-cache",
-    "token-cache"
+    "token-cache",
+    "experimental",
+    "legacy"
   ],
   "scripts": {
     "build": "tsup",

packages/expo/src/experimental.ts

@@ -1 +1 @@
-export { useSignInSignal, useSignUpSignal } from '@clerk/react/experimental';
+export {};

packages/expo/src/hooks/useOAuth.ts

@@ -1,4 +1,4 @@
-import { useSignIn, useSignUp } from '@clerk/react';
+import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/types';
 import * as AuthSession from 'expo-auth-session';
 import * as WebBrowser from 'expo-web-browser';

packages/expo/src/hooks/useSSO.ts

@@ -1,4 +1,4 @@
-import { useSignIn, useSignUp } from '@clerk/react';
+import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { EnterpriseSSOStrategy, OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/types';
 import * as AuthSession from 'expo-auth-session';
 import * as WebBrowser from 'expo-web-browser';

packages/expo/src/legacy.ts

@@ -0,0 +1 @@
+export { useSignIn, useSignUp } from '@clerk/react/legacy';

packages/expo/src/local-credentials/useLocalCredentials/useLocalCredentials.ts

@@ -1,4 +1,5 @@
-import { useClerk, useSignIn, useUser } from '@clerk/react';
+import { useClerk, useUser } from '@clerk/react';
+import { useSignIn } from '@clerk/react/legacy';
 import type { SignInResource } from '@clerk/types';
 import { AuthenticationType, isEnrolledAsync, supportedAuthenticationTypesAsync } from 'expo-local-authentication';
 import {

packages/nextjs/package.json

@@ -54,6 +54,11 @@
       "types": "./dist/types/experimental.d.ts",
       "import": "./dist/esm/experimental.js",
       "require": "./dist/cjs/experimental.js"
+    },
+    "./legacy": {
+      "types": "./dist/types/legacy.d.ts",
+      "import": "./dist/esm/legacy.js",
+      "require": "./dist/cjs/legacy.js"
     }
   },
   "types": "./dist/types/index.d.ts",

packages/nextjs/src/legacy.ts

@@ -0,0 +1 @@
+export { useSignIn, useSignUp } from '@clerk/react/legacy';

packages/react-router/package.json

@@ -49,6 +49,10 @@
     "./webhooks": {
       "types": "./dist/webhooks.d.ts",
       "default": "./dist/webhooks.js"
+    },
+    "./legacy": {
+      "types": "./dist/legacy.d.ts",
+      "default": "./dist/legacy.js"
     }
   },
   "main": "dist/index.js",

packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -7,6 +7,13 @@ exports[`deprecated ssr public exports > should not change unexpectedly 1`] = `
 ]
 `;
 
+exports[`legacy public exports > should not change unexpectedly 1`] = `
+[
+  "useSignIn",
+  "useSignUp",
+]
+`;
+
 exports[`root public exports > should not change unexpectedly 1`] = `
 [
   "APIKeys",

packages/react-router/src/__tests__/exports.test.ts

@@ -2,6 +2,7 @@ import { logger } from '@clerk/shared/logger';
 import { vi } from 'vitest';
 
 import * as publicExports from '../index';
+import * as legacyExports from '../legacy';
 import * as serverExports from '../server/index';
 
 describe('root public exports', () => {
@@ -25,3 +26,9 @@ describe('deprecated ssr public exports', () => {
     warnOnceSpy.mockRestore();
   });
 });
+
+describe('legacy public exports', () => {
+  it('should not change unexpectedly', () => {
+    expect(Object.keys(legacyExports).sort()).toMatchSnapshot();
+  });
+});

packages/react-router/src/legacy.ts

@@ -0,0 +1 @@
+export { useSignIn, useSignUp } from '@clerk/react/legacy';

packages/react/docs/use-sign-in.md → packages/react/docs/legacy-use-sign-in.md

@@ -3,7 +3,7 @@
 ```tsx {{ filename: 'app/sign-in/page.tsx' }}
 'use client';
 
-import { useSignIn } from '@clerk/nextjs';
+import { useSignIn } from '@clerk/nextjs/legacy';
 
 export default function SignInPage() {
   const { isLoaded, signIn } = useSignIn();

packages/react/docs/use-sign-up.md → packages/react/docs/legacy-use-sign-up.md

@@ -3,7 +3,7 @@
 ```tsx {{ filename: 'app/sign-up/page.tsx' }}
 'use client';
 
-import { useSignUp } from '@clerk/nextjs';
+import { useSignUp } from '@clerk/nextjs/legacy';
 
 export default function SignUpPage() {
   const { isLoaded, signUp } = useSignUp();

packages/react/package.json

@@ -63,14 +63,25 @@
         "default": "./dist/experimental.js"
       }
     },
+    "./legacy": {
+      "import": {
+        "types": "./dist/legacy.d.mts",
+        "default": "./dist/legacy.mjs"
+      },
+      "require": {
+        "types": "./dist/legacy.d.ts",
+        "default": "./dist/legacy.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
   "files": [
     "dist",
     "internal",
     "errors",
-    "experimental"
+    "experimental",
+    "legacy"
   ],
   "scripts": {
     "build": "tsup",

packages/react/src/experimental.ts

@@ -1,7 +1,6 @@
 export { CheckoutButton } from './components/CheckoutButton';
 export { PlanDetailsButton } from './components/PlanDetailsButton';
 export { SubscriptionDetailsButton } from './components/SubscriptionDetailsButton';
-export { useSignInSignal, useSignUpSignal } from './hooks/useClerkSignal';
 
 export type {
   __experimental_CheckoutButtonProps as CheckoutButtonProps,

packages/react/src/hooks/index.ts

@@ -1,7 +1,6 @@
 export { useAuth } from './useAuth';
 export { useEmailLink } from './useEmailLink';
-export { useSignIn } from './useSignIn';
-export { useSignUp } from './useSignUp';
+export { useSignIn, useSignUp } from './useClerkSignal';
 export {
   useClerk,
   useOrganization,