update expo docs (#1666)

Co-authored-by: victoria <[email protected]>

Author: alexisintech

docs/_partials/expo/oauth-custom-flow.mdx

@@ -0,0 +1,58 @@
+The following example demonstrates how to create a custom OAuth sign-in flow for [Google accounts](/docs/authentication/social-connections/google).
+
+```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }}
+import React from 'react'
+import * as WebBrowser from 'expo-web-browser'
+import { Text, View, Button } from 'react-native'
+import { Link } from 'expo-router'
+import { useOAuth } from '@clerk/clerk-expo'
+import * as Linking from 'expo-linking'
+
+export const useWarmUpBrowser = () => {
+  React.useEffect(() => {
+    // Warm up the android browser to improve UX
+    // https://docs.expo.dev/guides/authentication/#improving-user-experience
+    void WebBrowser.warmUpAsync()
+    return () => {
+      void WebBrowser.coolDownAsync()
+    }
+  }, [])
+}
+
+WebBrowser.maybeCompleteAuthSession()
+
+export default function Page() {
+  useWarmUpBrowser()
+
+  const { startOAuthFlow } = useOAuth({ strategy: 'oauth_google' })
+
+  const onPress = React.useCallback(async () => {
+    try {
+      const { createdSessionId, signIn, signUp, setActive } = await startOAuthFlow({
+        redirectUrl: Linking.createURL('/dashboard', { scheme: 'myapp' }),
+      })
+
+      // If sign in was successful, set the active session
+      if (createdSessionId) {
+        setActive!({ session: createdSessionId })
+      } else {
+        // Use signIn or signUp returned from startOAuthFlow
+        // for next steps, such as MFA
+      }
+    } catch (err) {
+      // See https://clerk.com/docs/custom-flows/error-handling
+      // for more info on error handling
+      console.error(JSON.stringify(err, null, 2))
+    }
+  }, [])
+
+  return (
+    <View>
+      <Link href="/">
+        <Text>Home</Text>
+      </Link>
+      <Button title="Sign in with Google" onPress={onPress} />
+    </View>
+  )
+}
+```

docs/custom-flows/email-password-mfa.mdx

@@ -28,6 +28,7 @@ This guide will walk you through how to build a custom email/password sign-in fl
 
   1. In the Clerk Dashboard, navigate to the [**Multi-factor**](https://dashboard.clerk.com/last-active?path=user-authentication/multi-factor) page.
   1. For the purpose of this guide, toggle on both the **Authenticator application** and **Backup codes** strategies.
+  1. Select **Save**.
 
   ### Sign-in flow
 
@@ -309,19 +310,34 @@ This guide will walk you through how to build a custom email/password sign-in fl
 
       ### Build the flow
 
-      Create a component that handles the sign-in with multi-factor authentication flow.
+      1. Create the `(auth)` route group. This groups your sign-up and sign-in pages.
+      1. In the `(auth)` group, create a `_layout.tsx` file with the following code. The [`useAuth()`](/docs/references/react/use-auth) hook is used to access the user's authentication state. If the user's already signed in, they'll be redirected to the home page.
 
-      > [!NOTE]
-      > You can render this component in a custom sign-in or sign-up flow, which you can find examples of in [the Expo quickstart](/docs/quickstarts/expo).
+      ```tsx {{ filename: 'app/(auth)/_layout.tsx' }}
+      import { Redirect, Stack } from 'expo-router'
+      import { useAuth } from '@clerk/clerk-expo'
 
-      ```tsx {{ filename: 'SignInMFAForm.tsx', collapsible: true }}
+      export default function AuthenticatedLayout() {
+        const { isSignedIn } = useAuth()
+
+        if (isSignedIn) {
+          return <Redirect href={'/'} />
+        }
+
+        return <Stack />
+      }
+      ```
+
+      In the `(auth)` group, create a `sign-in.tsx` file with the following code. The [`useSignIn()`](/docs/references/react/use-sign-in) hook is used to create a sign-in flow. The user can sign in using their email and password and will be prompted to verify their account with a code from their authenticator app or with a backup code.
+
+      ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }}
       import React from 'react'
       import { useSignIn } from '@clerk/clerk-expo'
       import { useRouter } from 'expo-router'
-      import { Text, TextInput, TouchableOpacity, View } from 'react-native'
+      import { Text, TextInput, Button, View } from 'react-native'
       import Checkbox from 'expo-checkbox'
 
-      export default function SignInMFAForm() {
+      export default function Page() {
         const { signIn, setActive, isLoaded } = useSignIn()
 
         const [email, setEmail] = React.useState('')
@@ -335,18 +351,24 @@ This guide will walk you through how to build a custom email/password sign-in fl
         const handleFirstStage = async () => {
           if (!isLoaded) return
 
+          // Attempt to sign in using the email and password provided
           try {
             const attemptFirstFactor = await signIn.create({
               identifier: email,
               password,
             })
 
+            // If the sign-in was successful, set the session to active
+            // and redirect the user
             if (attemptFirstFactor.status === 'complete') {
               await setActive({ session: attemptFirstFactor.createdSessionId })
-              router.replace('/dashboard')
+              router.replace('/')
             } else if (attemptFirstFactor.status === 'needs_second_factor') {
+              // If the sign-in requires a second factor, display the TOTP form
               setDisplayTOTP(true)
             } else {
+              // If the sign-in failed, check why. User might need to
+              // complete further steps.
               console.error(JSON.stringify(attemptFirstFactor, null, 2))
             }
           } catch (err) {
@@ -356,6 +378,7 @@ This guide will walk you through how to build a custom email/password sign-in fl
           }
         }
 
+        // Handle the submission of the TOTP or backup code
         const onPressTOTP = React.useCallback(async () => {
           if (!isLoaded) return
 
@@ -371,13 +394,13 @@ This guide will walk you through how to build a custom email/password sign-in fl
             if (attemptSecondFactor.status === 'complete') {
               await setActive({ session: attemptSecondFactor.createdSessionId })
 
-              router.replace('/dashboard')
+              router.replace('/')
             } else {
               // If the status is not complete, check why. User may need to
               // complete further steps.
               console.error(JSON.stringify(attemptSecondFactor, null, 2))
             }
-          } catch (err: any) {
+          } catch (err) {
             // See https://clerk.com/docs/custom-flows/error-handling
             // for more info on error handling
             console.error(JSON.stringify(err, null, 2))
@@ -390,48 +413,45 @@ This guide will walk you through how to build a custom email/password sign-in fl
               <Text>Verify your account</Text>
 
               <View>
-                <Text>Code</Text>
                 <TextInput
                   value={code}
-                  placeholder="OTP or Backup Code"
+                  placeholder="Enter the code"
+                  placeholderTextColor="#666666"
                   onChangeText={(c) => setCode(c)}
                 />
               </View>
-              <View>
-                <Text>This code is a backup code</Text>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                <Text>Check if this code is a backup code</Text>
                 <Checkbox value={useBackupCode} onValueChange={() => setUseBackupCode((prev) => !prev)} />
               </View>
-              <TouchableOpacity onPress={onPressTOTP}>
-                <Text>Verify</Text>
-              </TouchableOpacity>
+              <Button title="Verify" onPress={onPressTOTP} />
             </View>
           )
         }
 
         return (
           <View>
-            <Text>Sign In</Text>
+            <Text>Sign in</Text>
             <View>
               <TextInput
                 value={email}
-                placeholder="Email..."
-                placeholderTextColor="#000"
+                placeholder="Enter email"
+                placeholderTextColor="#666666"
                 onChangeText={(email) => setEmail(email)}
               />
             </View>
 
             <View>
               <TextInput
                 value={password}
-                placeholder="Password..."
-                placeholderTextColor="#000"
+                placeholder="Enter password"
+                placeholderTextColor="#666666"
+                secureTextEntry={true}
                 onChangeText={(password) => setPassword(password)}
               />
             </View>
 
-            <TouchableOpacity onPress={handleFirstStage}>
-              <Text>Sign In</Text>
-            </TouchableOpacity>
+            <Button title="Continue" onPress={handleFirstStage} />
           </View>
         )
       }