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

Author: dstaley

.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));
     }
   };