feat(client): move verify otp logic to own screen

apps/client/app/auth/sign-up.tsx

@@ -1,85 +1,35 @@
 import * as React from 'react'
-import { Text, TextInput, View } from 'react-native'
+import { Text, View } from 'react-native'
 import { useRouter } from 'expo-router'
 import { Button } from '@/components/ui/button'
 import { Container } from '@/components/ui/Container'
 import { Input } from '@/components/ui/input'
 import { useSignUp } from '@clerk/clerk-expo'
 
 export default function SignUpScreen() {
-  const { isLoaded, signUp, setActive } = useSignUp()
+  const { isLoaded, signUp } = useSignUp()
   const router = useRouter()
 
   const [emailAddress, setEmailAddress] = React.useState('')
   const [password, setPassword] = React.useState('')
-  const [pendingVerification, setPendingVerification] = React.useState(false)
-  const [code, setCode] = React.useState('')
 
-  // Handle submission of sign-up form
   const onSignUpPress = async () => {
     if (!isLoaded) return
 
-    // Start sign-up process using email and password provided
     try {
       await signUp.create({
         emailAddress,
         password,
       })
 
-      // Send user an email with verification code
       await signUp.prepareEmailAddressVerification({ strategy: 'email_code' })
 
-      // Set 'pendingVerification' to true to display second form
-      // and capture OTP code
-      setPendingVerification(true)
+      router.push('/auth/verify-otp')
     } catch (err) {
-      // See https://clerk.com/docs/custom-flows/error-handling
-      // for more info on error handling
       console.error(JSON.stringify(err, null, 2))
     }
   }
 
-  // Handle submission of verification form
-  const onVerifyPress = async () => {
-    if (!isLoaded) return
-
-    try {
-      // Use the code the user provided to attempt verification
-      const signUpAttempt = await signUp.attemptEmailAddressVerification({
-        code,
-      })
-
-      // If verification was completed, set the session to active
-      // and redirect the user
-      if (signUpAttempt.status === 'complete') {
-        await setActive({ session: signUpAttempt.createdSessionId })
-        router.replace('/')
-      } else {
-        // If the status is not complete, check why. User may need to
-        // complete further steps.
-        console.error(JSON.stringify(signUpAttempt, null, 2))
-      }
-    } catch (err) {
-      // See https://clerk.com/docs/custom-flows/error-handling
-      // for more info on error handling
-      console.error(JSON.stringify(err, null, 2))
-    }
-  }
-
-  if (pendingVerification) {
-    return (
-      <>
-        <Text>Verify your email</Text>
-        <TextInput
-          value={code}
-          placeholder="Enter your verification code"
-          onChangeText={(code) => setCode(code)}
-        />
-        <Button title="Verify" onPress={onVerifyPress} />
-      </>
-    )
-  }
-
   return (
     <Container className="flex-1 bg-background">
       <View className="flex-1">

apps/client/app/auth/verify-otp.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { Text, View } from 'react-native'
+import { useRouter } from 'expo-router'
+import { Button } from '@/components/ui/button'
+import { Container } from '@/components/ui/Container'
+import { Input } from '@/components/ui/input'
+import { useSignUp } from '@clerk/clerk-expo'
+
+export default function SignUpScreen() {
+  const { isLoaded, signUp, setActive } = useSignUp()
+  const router = useRouter()
+
+  const [code, setCode] = React.useState('')
+
+  const onVerifyPress = async () => {
+    if (!isLoaded) return
+
+    try {
+      const signUpAttempt = await signUp.attemptEmailAddressVerification({
+        code,
+      })
+
+      if (signUpAttempt.status === 'complete') {
+        await setActive({ session: signUpAttempt.createdSessionId })
+        router.replace('/')
+      } else {
+        console.error(JSON.stringify(signUpAttempt, null, 2))
+      }
+    } catch (err) {
+      console.error(JSON.stringify(err, null, 2))
+    }
+  }
+
+  return (
+    <Container className="flex-1 bg-background">
+      <View className="flex-1">
+        <View className="flex-1 items-center justify-center ">
+          <Text className="text-3xl text-primary">Verify your email</Text>
+        </View>
+        <View className="gap-4">
+          <Input
+            value={code}
+            placeholder="Enter your verification code"
+            onChangeText={(code) => setCode(code)}
+          />
+          <Button title="Verify" onPress={onVerifyPress} />
+        </View>
+      </View>
+    </Container>
+  )
+}