diff --git a/docs/_partials/custom-flows/future-api-callout.mdx b/docs/_partials/custom-flows/future-api-callout.mdx
new file mode 100644
index 0000000000..f241bba853
--- /dev/null
+++ b/docs/_partials/custom-flows/future-api-callout.mdx
@@ -0,0 +1,2 @@
+> [!IMPORTANT]
+> The APIs described here are stable, and will become the default in the next major version of `clerk-js`.
diff --git a/docs/_partials/custom-flows/sso-connections-legacy.mdx b/docs/_partials/custom-flows/sso-connections-legacy.mdx
new file mode 100644
index 0000000000..d338f58a35
--- /dev/null
+++ b/docs/_partials/custom-flows/sso-connections-legacy.mdx
@@ -0,0 +1,12 @@
+The following example **will both sign up _and_ sign in users**, eliminating the need for a separate sign-up page. However, if you want to have separate sign-up and sign-in pages, the sign-up and sign-in flows are equivalent, meaning that all you have to do is swap out the `SignIn` object for the `SignUp` object using the [`useSignUp()`](/docs/reference/hooks/use-sign-up) hook.
+
+The following example:
+
+1. Accesses the [`SignIn`](/docs/reference/javascript/sign-in) object using the [`useSignIn()`](/docs/reference/hooks/use-sign-in) hook.
+1. Starts the authentication process by calling [`SignIn.authenticateWithRedirect(params)`](/docs/reference/javascript/sign-in#authenticate-with-redirect). This method requires a `redirectUrl` param, which is the URL that the browser will be redirected to once the user authenticates with the identity provider.
+1. Creates a route at the URL that the `redirectUrl` param points to. The following example names this route `/sso-callback`. This route should either render the prebuilt [`<AuthenticateWithRedirectCallback/>`](/docs/reference/components/control/authenticate-with-redirect-callback) component or call the [`Clerk.handleRedirectCallback()`](/docs/reference/javascript/clerk#handle-redirect-callback) method if you're not using the prebuilt component.
+
+The following example shows two files:
+
+1. The sign-in page where the user can start the authentication flow.
+1. The SSO callback page where the flow is completed.
diff --git a/docs/_partials/custom-flows/sso-connections.mdx b/docs/_partials/custom-flows/sso-connections.mdx
index d338f58a35..574b7e17b1 100644
--- a/docs/_partials/custom-flows/sso-connections.mdx
+++ b/docs/_partials/custom-flows/sso-connections.mdx
@@ -3,10 +3,7 @@ The following example **will both sign up _and_ sign in users**, eliminating the
 The following example:
 
 1. Accesses the [`SignIn`](/docs/reference/javascript/sign-in) object using the [`useSignIn()`](/docs/reference/hooks/use-sign-in) hook.
-1. Starts the authentication process by calling [`SignIn.authenticateWithRedirect(params)`](/docs/reference/javascript/sign-in#authenticate-with-redirect). This method requires a `redirectUrl` param, which is the URL that the browser will be redirected to once the user authenticates with the identity provider.
-1. Creates a route at the URL that the `redirectUrl` param points to. The following example names this route `/sso-callback`. This route should either render the prebuilt [`<AuthenticateWithRedirectCallback/>`](/docs/reference/components/control/authenticate-with-redirect-callback) component or call the [`Clerk.handleRedirectCallback()`](/docs/reference/javascript/clerk#handle-redirect-callback) method if you're not using the prebuilt component.
-
-The following example shows two files:
-
-1. The sign-in page where the user can start the authentication flow.
-1. The SSO callback page where the flow is completed.
+1. Starts the authentication process by calling [`SignIn.sso(params)`](/docs/reference/javascript/sign-in-future#sso). This method requires the following params:
+   - `redirectUrl`: The URL that the browser will be redirected to once the user authenticates with the identity provider if no additional requirements are needed, and a session has been created
+   - `redirectCallbackUrl`: The URL that the browser will be redirected to once the user authenticates with the identity provider if additional requirements are needed
+1. Creates a route at the URL that the `redirectCallbackUrl` param points to. The following example re-uses the `/sign-in` route, which should be written to handle when a sign-in attempt is in a non-complete status such as `needs_second_factor`.
diff --git a/docs/guides/development/custom-flows/authentication/application-invitations.mdx b/docs/guides/development/custom-flows/authentication/application-invitations.mdx
index 130aa4aa78..1055bcd5ee 100644
--- a/docs/guides/development/custom-flows/authentication/application-invitations.mdx
+++ b/docs/guides/development/custom-flows/authentication/application-invitations.mdx
@@ -1,6 +1,7 @@
 ---
 title: Sign-up with application invitations
 description: Learn how to use the Clerk API to build a custom flow for handling application invitations.
+sdk: nextjs, react, expo, react-router, tanstack-react-start
 ---
 
 <Include src="_partials/custom-flows-callout" />
@@ -19,112 +20,69 @@ Once the user visits the invitation link and is redirected to the specified URL,
 
 For example, if the redirect URL was `https://www.example.com/accept-invitation`, the URL that the user would be redirected to would be `https://www.example.com/accept-invitation?__clerk_ticket=.....`.
 
-To create a sign-up flow using the invitation token, you need to extract the token from the URL and pass it to the [`signUp.create()`](/docs/reference/javascript/sign-up#create) method, as shown in the following example. The following example also demonstrates how to collect additional user information for the sign-up; you can either remove these fields or adjust them to fit your application.
+To create a sign-up flow using the invitation token, you need to call the [`signUp.ticket()`](/docs/reference/javascript/sign-up-future#ticket) method, as shown in the following example. The following example also demonstrates how to collect additional user information for the sign-up; you can either remove these fields or adjust them to fit your application.
 
-<Tabs items={["Next.js", "JavaScript"]}>
+<Tabs items={["Next.js"]}>
   <Tab>
     ```tsx {{ filename: 'app/accept-invitation/page.tsx', collapsible: true }}
     'use client'
 
     import * as React from 'react'
     import { useSignUp, useUser } from '@clerk/nextjs'
-    import { useSearchParams, useRouter } from 'next/navigation'
+    import { useRouter } from 'next/navigation'
 
     export default function Page() {
       const { isSignedIn, user } = useUser()
+      const { signUp, errors, fetchStatus } = useSignUp()
       const router = useRouter()
-      const { isLoaded, signUp, setActive } = useSignUp()
-      const [firstName, setFirstName] = React.useState('')
-      const [lastName, setLastName] = React.useState('')
-      const [password, setPassword] = React.useState('')
-
-      // Handle signed-in users visiting this page
-      // This will also redirect the user once they finish the sign-up process
-      React.useEffect(() => {
-        if (isSignedIn) {
-          router.push('/')
-        }
-      }, [isSignedIn])
-
-      // Get the token from the query params
-      const token = useSearchParams().get('__clerk_ticket')
 
-      // If there is no invitation token, restrict access to this page
-      if (!token) {
-        return <p>No invitation token found.</p>
-      }
+      const handleSubmit = async (formData: FormData) => {
+        const firstName = formData.get('firstName') as string
+        const lastName = formData.get('lastName') as string
+        const password = formData.get('password') as string
 
-      // Handle submission of the sign-up form
-      const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault()
-
-        if (!isLoaded) return
-
-        try {
-          if (!token) return null
-
-          // Create a new sign-up with the supplied invitation token.
-          // Make sure you're also passing the ticket strategy.
-          // After the below call, the user's email address will be
-          // automatically verified because of the invitation token.
-          const signUpAttempt = await signUp.create({
-            strategy: 'ticket',
-            ticket: token,
-            firstName,
-            lastName,
-            password,
+        await signUp.ticket({
+          firstName,
+          lastName,
+          password,
+        })
+        if (signUp.status === 'complete') {
+          await signUp.finalize({
+            navigate: () => {
+              router.push('/')
+            },
           })
-
-          // If the sign-up was completed, set the session to active
-          if (signUpAttempt.status === 'complete') {
-            await setActive({ session: signUpAttempt.createdSessionId })
-          } else {
-            // If the sign-up status is not complete, check why. User may need to
-            // complete further steps.
-            console.error(JSON.stringify(signUpAttempt, null, 2))
-          }
-        } catch (err) {
-          console.error(JSON.stringify(err, null, 2))
         }
       }
 
+      if (signUp.status === 'complete' || isSignedIn) {
+        return null
+      }
+
       return (
         <>
           <h1>Sign up</h1>
-          <form onSubmit={handleSubmit}>
+          <form action={handleSubmit}>
             <div>
               <label htmlFor="firstName">Enter first name</label>
-              <input
-                id="firstName"
-                type="text"
-                name="firstName"
-                value={firstName}
-                onChange={(e) => setFirstName(e.target.value)}
-              />
+              <input id="firstName" type="text" name="firstName" />
+              {errors.fields.firstName && <p>{errors.fields.firstName.message}</p>}
             </div>
             <div>
               <label htmlFor="lastName">Enter last name</label>
-              <input
-                id="lastName"
-                type="text"
-                name="lastName"
-                value={lastName}
-                onChange={(e) => setLastName(e.target.value)}
-              />
+              <input id="lastName" type="text" name="lastName" />
+              {errors.fields.lastName && <p>{errors.fields.lastName.message}</p>}
             </div>
             <div>
               <label htmlFor="password">Enter password</label>
-              <input
-                id="password"
-                type="password"
-                name="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
+              <input id="password" type="password" name="password" />
+              {errors.fields.password && <p>{errors.fields.password.message}</p>}
             </div>
             <div id="clerk-captcha" />
             <div>
-              <button type="submit">Next</button>
+              <button type="submit" disabled={fetchStatus === 'fetching'}>
+                Next
+              </button>
             </div>
           </form>
         </>
@@ -132,123 +90,4 @@ To create a sign-up flow using the invitation token, you need to extract the tok
     }
     ```
   </Tab>
-
-  <Tab>
-    <CodeBlockTabs options={["index.html", "main.js"]}>
-      ```html {{ filename: 'index.html', collapsible: true }}
-      <!doctype html>
-      <html lang="en">
-        <head>
-          <meta charset="UTF-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          <title>Clerk + JavaScript App</title>
-        </head>
-        <body>
-          <div id="signed-in"></div>
-
-          <div id="task"></div>
-
-          <div id="sign-up">
-            <h2>Sign up</h2>
-            <form id="sign-up-form">
-              <label for="firstName">Enter first name</label>
-              <input name="firstName" id="firstName" />
-              <label for="lastName">Enter last name</label>
-              <input name="lastName" id="lastName" />
-              <label for="password">Enter password</label>
-              <input name="password" id="password" />
-              <button type="submit">Continue</button>
-            </form>
-          </div>
-
-          <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
-        </body>
-      </html>
-      ```
-
-      ```js {{ filename: 'main.js', collapsible: true }}
-      import { Clerk } from '@clerk/clerk-js'
-
-      const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
-
-      const clerk = new Clerk(pubKey)
-      await clerk.load()
-
-      if (clerk.isSignedIn) {
-        // Mount user button component
-        document.getElementById('signed-in').innerHTML = `
-          <div id="user-button"></div>
-        `
-
-        const userbuttonDiv = document.getElementById('user-button')
-
-        clerk.mountUserButton(userbuttonDiv)
-      } else if (clerk.session.currentTask) {
-        // Check for pending tasks and display custom UI to help users resolve them
-        // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-        switch (clerk.session.currentTask.key) {
-          case 'choose-organization': {
-            document.getElementById('app').innerHTML = `
-                    <div id="task"></div>
-                  `
-
-            const taskDiv = document.getElementById('task')
-
-            clerk.mountTaskChooseOrganization(taskDiv)
-          }
-        }
-      } else {
-        // Get the token from the query parameter
-        const param = '__clerk_ticket'
-        const token = new URL(window.location.href).searchParams.get(param)
-
-        // Handle the sign-up form
-        document.getElementById('sign-up-form').addEventListener('submit', async (e) => {
-          e.preventDefault()
-
-          const formData = new FormData(e.target)
-          const firstName = formData.get('firstName')
-          const lastName = formData.get('lastName')
-          const password = formData.get('password')
-
-          try {
-            // Start the sign-up process using the ticket method
-            const signUpAttempt = await clerk.client.signUp.create({
-              strategy: 'ticket',
-              ticket: token,
-              firstName,
-              lastName,
-              password,
-            })
-
-            // If sign-up was successful, set the session to active
-            if (signUpAttempt.status === 'complete') {
-              await clerk.setActive({
-                session: signUpAttempt.createdSessionId,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
-
-                  await router.push('/')
-                },
-              })
-            } 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/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error(JSON.stringify(err, null, 2))
-          }
-        })
-      }
-      ```
-    </CodeBlockTabs>
-  </Tab>
 </Tabs>
diff --git a/docs/guides/development/custom-flows/authentication/bot-sign-up-protection.mdx b/docs/guides/development/custom-flows/authentication/bot-sign-up-protection.mdx
index d9863c9b42..e27b4bbb54 100644
--- a/docs/guides/development/custom-flows/authentication/bot-sign-up-protection.mdx
+++ b/docs/guides/development/custom-flows/authentication/bot-sign-up-protection.mdx
@@ -1,6 +1,7 @@
 ---
 title: Add bot protection to your custom sign-up flow
 description: Learn how to add Clerk's bot protection to your custom sign-up flow.
+sdk: nextjs, react, expo, js-frontend, react-router, tanstack-react-start
 ---
 
 <Include src="_partials/custom-flows-callout" />
diff --git a/docs/guides/development/custom-flows/authentication/email-password-mfa.mdx b/docs/guides/development/custom-flows/authentication/email-password-mfa.mdx
index 51d2933608..1d1761f8da 100644
--- a/docs/guides/development/custom-flows/authentication/email-password-mfa.mdx
+++ b/docs/guides/development/custom-flows/authentication/email-password-mfa.mdx
@@ -1,10 +1,24 @@
 ---
 title: Build a custom sign-in flow with multi-factor authentication
 description: Learn how to build a custom email/password sign-in flow that requires multi-factor authentication (MFA).
+sdk: nextjs, react, expo, js-frontend, react-router, tanstack-react-start, ios, android
 ---
 
 <Include src="_partials/custom-flows-callout" />
 
+<If sdk={["nextjs", "react", "expo", "js-frontend", "react-router", "tanstack-react-start"]}>
+  > [!IMPORTANT]
+  > This guide applies to the following Clerk SDKs:
+  >
+  > - `@clerk/react` v6 or higher
+  > - `@clerk/nextjs` v7 or higher
+  > - `@clerk/expo` v3 or higher
+  > - `@clerk/react-router` v3 or higher
+  > - `@clerk/tanstack-react-start` v0.26.0 or higher
+  >
+  > If you're using an older version of one of these SDKs, or are using the legacy API, refer to the [legacy API documentation](/docs/guides/development/custom-flows/authentication/legacy/email-password).
+</If>
+
 [Multi-factor verification (MFA)](/docs/guides/configure/auth-strategies/sign-up-sign-in-options) is an added layer of security that requires users to provide a second verification factor to access an account.
 
 Clerk supports second factor verification through **SMS verification code**, **Authenticator application**, and **Backup codes**.
@@ -36,534 +50,259 @@ This guide will walk you through how to build a custom email/password sign-in fl
 
   To authenticate a user using their email and password, you need to:
 
-  1. Initiate the sign-in process by collecting the user's email address and password.
-  1. Prepare the first factor verification.
-  1. Attempt to complete the first factor verification.
-  1. Prepare the second factor verification. (This is where MFA comes into play.)
-  1. Attempt to complete the second factor verification.
-  1. If the verification is successful, set the newly created session as the active session.
-
-  > [!TIP]
-  > For this example to work, the user must have MFA enabled on their account. You need to add the ability for your users to manage their MFA settings. See the [manage SMS-based MFA](/docs/guides/development/custom-flows/account-updates/manage-sms-based-mfa) or the [manage TOTP-based MFA](/docs/guides/development/custom-flows/account-updates/manage-totp-based-mfa) guide, depending on your needs.
-
-  <Tabs items={["Next.js", "JavaScript", "Expo", "iOS", "Android"]}>
-    <Tab>
-      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
-      'use client'
-
-      import * as React from 'react'
-      import { useSignIn } from '@clerk/nextjs'
-      import { useRouter } from 'next/navigation'
-
-      export default function SignInForm() {
-        const { isLoaded, signIn, setActive } = useSignIn()
-        const [email, setEmail] = React.useState('')
-        const [password, setPassword] = React.useState('')
-        const [code, setCode] = React.useState('')
-        const [useBackupCode, setUseBackupCode] = React.useState(false)
-        const [displayTOTP, setDisplayTOTP] = React.useState(false)
-        const router = useRouter()
-
-        // Handle user submitting email and pass and swapping to TOTP form
-        const handleFirstStage = (e: React.FormEvent) => {
-          e.preventDefault()
-          setDisplayTOTP(true)
-        }
+  <If sdk={["nextjs", "react", "expo", "js-frontend", "react-router", "tanstack-react-start"]}>
+    1. Initiate the sign-up process by collecting the user's email address and password with the [`signIn.password()`](/docs/reference/javascript/sign-in-future#password) method.
+    1. Collect the TOTP code and verify it with the [`signIn.mfa.verifyTOTP()`](/docs/reference/javascript/sign-in-future#mfa-verify-totp) method.
+    1. If the TOTP verification is successful, finalize the sign-in with the [`signIn.finalize()`](/docs/reference/javascript/sign-in-future#finalize) method to set the newly created session as the active session.
+
+    > [!TIP]
+    > For this example to work, the user must have MFA enabled on their account. You need to add the ability for your users to manage their MFA settings. See the [manage SMS-based MFA](/docs/guides/development/custom-flows/account-updates/manage-sms-based-mfa) or the [manage TOTP-based MFA](/docs/guides/development/custom-flows/account-updates/manage-totp-based-mfa) guide, depending on your needs.
+
+    <Tabs items={["Next.js"]}>
+      <Tab>
+        ```tsx {{ filename: 'app/sign-in/page.tsx', collapsible: true }}
+        'use client'
 
-        // Handle the submission of the TOTP of Backup Code submission
-        const handleSubmit = async (e: React.FormEvent) => {
-          e.preventDefault()
+        import * as React from 'react'
+        import { useSignIn } from '@clerk/nextjs'
+        import { useRouter } from 'next/navigation'
 
-          if (!isLoaded) return
+        export default function SignInForm() {
+          const { signIn, errors, fetchStatus } = useSignIn()
+          const router = useRouter()
 
-          // Start the sign-in process using the email and password provided
-          try {
-            await signIn.create({
-              identifier: email,
+          const handleSubmit = async (formData: FormData) => {
+            const emailAddress = formData.get('email') as string
+            const password = formData.get('password') as string
+
+            await signIn.password({
+              emailAddress,
               password,
             })
+          }
 
-            // Attempt the TOTP or backup code verification
-            const signInAttempt = await signIn.attemptSecondFactor({
-              strategy: useBackupCode ? 'backup_code' : 'totp',
-              code: code,
-            })
+          const handleSubmitTOTP = async (formData: FormData) => {
+            const code = formData.get('code') as string
+            const useBackupCode = formData.get('useBackupCode') === 'on'
 
-            // If verification was completed, set the session to active
-            // and redirect the user
-            if (signInAttempt.status === 'complete') {
-              await setActive({
-                session: signInAttempt.createdSessionId,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
-
-                  await router.push('/')
+            if (useBackupCode) {
+              await signIn.mfa.verifyBackupCode({ code })
+            } else {
+              await signIn.mfa.verifyTOTP({ code })
+            }
+
+            if (signIn.status === 'complete') {
+              await signIn.finalize({
+                navigate: () => {
+                  router.push('/')
                 },
               })
-            } else {
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              console.log(signInAttempt)
             }
-          } catch (err) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error('Error:', JSON.stringify(err, null, 2))
           }
-        }
 
-        if (displayTOTP) {
+          if (signIn.status === 'needs_second_factor') {
+            return (
+              <div>
+                <h1>Verify your account</h1>
+                <form action={handleSubmitTOTP}>
+                  <div>
+                    <label htmlFor="code">Code</label>
+                    <input id="code" name="code" type="text" />
+                    {errors.fields.code && <p>{errors.fields.code.message}</p>}
+                  </div>
+                  <div>
+                    <label>
+                      Use backup code
+                      <input type="checkbox" name="useBackupCode" />
+                    </label>
+                  </div>
+                  <button type="submit" disabled={fetchStatus === 'fetching'}>
+                    Verify
+                  </button>
+                </form>
+              </div>
+            )
+          }
+
           return (
-            <div>
-              <h1>Verify your account</h1>
-              <form onSubmit={(e) => handleSubmit(e)}>
+            <>
+              <h1>Sign in</h1>
+              <form action={handleSubmit}>
                 <div>
-                  <label htmlFor="code">Code</label>
-                  <input
-                    onChange={(e) => setCode(e.target.value)}
-                    id="code"
-                    name="code"
-                    type="text"
-                    value={code}
-                  />
+                  <label htmlFor="emailAddress">Email</label>
+                  <input id="emailAddress" name="emailAddress" type="emailAddress" />
+                  {errors.fields.emailAddress && <p>{errors.fields.emailAddress.message}</p>}
                 </div>
                 <div>
-                  <label htmlFor="backupcode">This code is a backup code</label>
-                  <input
-                    onChange={() => setUseBackupCode((prev) => !prev)}
-                    id="backupcode"
-                    name="backupcode"
-                    type="checkbox"
-                    checked={useBackupCode}
-                  />
+                  <label htmlFor="password">Password</label>
+                  <input id="password" name="password" type="password" />
+                  {errors.fields.password && <p>{errors.fields.password.message}</p>}
                 </div>
-                <button type="submit">Verify</button>
+                <button type="submit" disabled={fetchStatus === 'fetching'}>
+                  Continue
+                </button>
               </form>
-            </div>
+            </>
           )
         }
-
-        return (
-          <>
-            <h1>Sign in</h1>
-            <form onSubmit={(e) => handleFirstStage(e)}>
-              <div>
-                <label htmlFor="email">Email</label>
-                <input
-                  onChange={(e) => setEmail(e.target.value)}
-                  id="email"
-                  name="email"
-                  type="email"
-                  value={email}
-                />
-              </div>
-              <div>
-                <label htmlFor="password">Password</label>
-                <input
-                  onChange={(e) => setPassword(e.target.value)}
-                  id="password"
-                  name="password"
-                  type="password"
-                  value={password}
-                />
-              </div>
-              <button type="submit" disabled={!email.trim() || !password.trim()}>
-                Continue
-              </button>
-            </form>
-          </>
-        )
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      <CodeBlockTabs options={["index.html", "main.js"]}>
-        ```html {{ filename: 'index.html', collapsible: true }}
-        <!doctype html>
-        <html lang="en">
-          <head>
-            <meta charset="UTF-8" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            <title>Clerk + JavaScript App</title>
-          </head>
-          <body>
-            <div id="signed-in"></div>
-
-            <div id="task"></div>
-
-            <div id="sign-in">
-              <h2>Sign in</h2>
-              <form id="sign-in-form">
-                <label for="email">Enter email address</label>
-                <input name="email" id="sign-in-email" />
-                <label for="password">Enter password</label>
-                <input name="password" id="sign-in-password" />
-                <button type="submit">Continue</button>
-              </form>
-            </div>
-
-            <form id="verifying" hidden>
-              <h2>Verify your account</h2>
-              <label for="totp">Enter your code</label>
-              <input id="totp" name="code" />
-              <label for="backupCode">This code is a backup code</label>
-              <input type="checkbox" id="backupCode" name="backupCode" />
-              <button type="submit" id="verify-button">Verify</button>
-            </form>
-
-            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
-          </body>
-        </html>
         ```
-
-        ```js {{ filename: 'main.js', collapsible: true }}
-        import { Clerk } from '@clerk/clerk-js'
-
-        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
-
-        const clerk = new Clerk(pubKey)
-        await clerk.load()
-
-        if (clerk.isSignedIn) {
-          // Mount user button component
-          document.getElementById('signed-in').innerHTML = `
-            <div id="user-button"></div>
-          `
-
-          const userbuttonDiv = document.getElementById('user-button')
-
-          clerk.mountUserButton(userbuttonDiv)
-        } else if (clerk.session?.currentTask) {
-          // Check for pending tasks and display custom UI to help users resolve them
-          // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-          switch (clerk.session.currentTask.key) {
-            case 'choose-organization': {
-              document.getElementById('app').innerHTML = `
-                    <div id="task"></div>
-                  `
-
-              const taskDiv = document.getElementById('task')
-
-              clerk.mountTaskChooseOrganization(taskDiv)
-            }
+      </Tab>
+    </Tabs>
+  </If>
+
+  <If sdk={["ios", "android"]}>
+    1. Initiate the sign-in process by collecting the user's email address and password.
+    1. Prepare the first factor verification.
+    1. Attempt to complete the first factor verification.
+    1. Prepare the second factor verification. (This is where MFA comes into play.)
+    1. Attempt to complete the second factor verification.
+    1. If the verification is successful, set the newly created session as the active session.
+
+    > [!TIP]
+    > For this example to work, the user must have MFA enabled on their account. You need to add the ability for your users to manage their MFA settings. See the [manage SMS-based MFA](/docs/guides/development/custom-flows/account-updates/manage-sms-based-mfa) or the [manage TOTP-based MFA](/docs/guides/development/custom-flows/account-updates/manage-totp-based-mfa) guide, depending on your needs.
+
+    <Tabs items={["iOS", "Android"]}>
+      <Tab>
+        ```tsx {{ filename: 'app/sign-in/page.tsx', collapsible: true }}
+        'use client'
+
+        import * as React from 'react'
+        import { useSignIn } from '@clerk/nextjs'
+        import { useRouter } from 'next/navigation'
+
+        export default function SignInForm() {
+          const { signIn, errors, fetchStatus } = useSignIn()
+          const router = useRouter()
+
+          const handleSubmit = async (formData: FormData) => {
+            const emailAddress = formData.get('email') as string
+            const password = formData.get('password') as string
+
+            await signIn.password({
+              emailAddress,
+              password,
+            })
           }
-        } else {
-          // Handle the sign-in form
-          document.getElementById('sign-in-form').addEventListener('submit', async (e) => {
-            e.preventDefault()
-
-            const formData = new FormData(e.target)
-            const emailAddress = formData.get('email')
-            const password = formData.get('password')
-
-            try {
-              // Start the sign-in process
-              await clerk.client.signIn.create({
-                identifier: emailAddress,
-                password,
-              })
 
-              // Hide sign-in form
-              document.getElementById('sign-in').setAttribute('hidden', '')
-              // Show verification form
-              document.getElementById('verifying').removeAttribute('hidden')
-            } catch (error) {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.error(error)
-            }
-          })
-
-          // Handle the verification form
-          document.getElementById('verifying').addEventListener('submit', async (e) => {
-            const formData = new FormData(e.target)
-            const totp = formData.get('totp')
-            const backupCode = formData.get('backupCode')
-
-            try {
-              const useBackupCode = backupCode ? true : false
-              const code = backupCode ? backupCode : totp
-
-              // Attempt the TOTP or backup code verification
-              const signInAttempt = await clerk.client.signIn.attemptSecondFactor({
-                strategy: useBackupCode ? 'backup_code' : 'totp',
-                code: code,
-              })
-
-              // If verification was completed, set the session to active
-              // and redirect the user
-              if (signInAttempt.status === 'complete') {
-                await clerk.setActive({ session: signInAttempt.createdSessionId })
+          const handleSubmitTOTP = async (formData: FormData) => {
+            const code = formData.get('code') as string
+            const useBackupCode = formData.get('useBackupCode') === 'on'
 
-                location.reload()
-              } else {
-                // If the status is not complete, check why. User may need to
-                // complete further steps.
-                console.error(signInAttempt)
-              }
-            } catch (error) {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.error(error)
+            if (useBackupCode) {
+              await signIn.mfa.verifyBackupCode({ code })
+            } else {
+              await signIn.mfa.verifyTOTP({ code })
             }
-          })
-        }
-        ```
-      </CodeBlockTabs>
-    </Tab>
-
-    <Tab>
-      ### Before you start
-
-      Install `expo-checkbox` for the UI.
-
-      <CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
-        ```bash {{ filename: 'terminal' }}
-        npm install expo-checkbox
-        ```
-
-        ```bash {{ filename: 'terminal' }}
-        yarn add expo-checkbox
-        ```
-
-        ```bash {{ filename: 'terminal' }}
-        pnpm add expo-checkbox
-        ```
-
-        ```bash {{ filename: 'terminal' }}
-        bun add expo-checkbox
-        ```
-      </CodeBlockTabs>
-
-      ### Build the 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/reference/hooks/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.
-
-      ```tsx {{ filename: 'app/(auth)/_layout.tsx' }}
-      import { Redirect, Stack } from 'expo-router'
-      import { useAuth } from '@clerk/clerk-expo'
 
-      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/reference/hooks/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, Button, View } from 'react-native'
-      import Checkbox from 'expo-checkbox'
-
-      export default function Page() {
-        const { signIn, setActive, isLoaded } = useSignIn()
-
-        const [email, setEmail] = React.useState('')
-        const [password, setPassword] = React.useState('')
-        const [code, setCode] = React.useState('')
-        const [useBackupCode, setUseBackupCode] = React.useState(false)
-        const [displayTOTP, setDisplayTOTP] = React.useState(false)
-        const router = useRouter()
-
-        // Handle user submitting email and pass and swapping to TOTP form
-        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,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
-
-                  await router.push('/')
+            if (signIn.status === 'complete') {
+              await signIn.finalize({
+                navigate: () => {
+                  router.push('/')
                 },
               })
-            } 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) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error(JSON.stringify(err, null, 2))
           }
-        }
 
-        // Handle the submission of the TOTP or backup code
-        const onPressTOTP = React.useCallback(async () => {
-          if (!isLoaded) return
-
-          try {
-            // Attempt the TOTP or backup code verification
-            const attemptSecondFactor = await signIn.attemptSecondFactor({
-              strategy: useBackupCode ? 'backup_code' : 'totp',
-              code: code,
-            })
-
-            // If verification was completed, set the session to active
-            // and redirect the user
-            if (attemptSecondFactor.status === 'complete') {
-              await setActive({
-                session: attemptSecondFactor.createdSessionId,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
-
-                  await router.push('/')
-                },
-              })
-            } 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) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error(JSON.stringify(err, null, 2))
+          if (signIn.status === 'needs_second_factor') {
+            return (
+              <div>
+                <h1>Verify your account</h1>
+                <form action={handleSubmitTOTP}>
+                  <div>
+                    <label htmlFor="code">Code</label>
+                    <input id="code" name="code" type="text" />
+                    {errors.fields.code && <p>{errors.fields.code.message}</p>}
+                  </div>
+                  <div>
+                    <label>
+                      Use backup code
+                      <input type="checkbox" name="useBackupCode" />
+                    </label>
+                  </div>
+                  <button type="submit" disabled={fetchStatus === 'fetching'}>
+                    Verify
+                  </button>
+                </form>
+              </div>
+            )
           }
-        }, [isLoaded, email, password, code, useBackupCode])
 
-        if (displayTOTP) {
           return (
-            <View>
-              <Text>Verify your account</Text>
-
-              <View>
-                <TextInput
-                  value={code}
-                  placeholder="Enter the code"
-                  placeholderTextColor="#666666"
-                  onChangeText={(c) => setCode(c)}
-                />
-              </View>
-              <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>
-              <Button title="Verify" onPress={onPressTOTP} />
-            </View>
+            <>
+              <h1>Sign in</h1>
+              <form action={handleSubmit}>
+                <div>
+                  <label htmlFor="emailAddress">Email</label>
+                  <input id="emailAddress" name="emailAddress" type="emailAddress" />
+                  {errors.fields.emailAddress && <p>{errors.fields.emailAddress.message}</p>}
+                </div>
+                <div>
+                  <label htmlFor="password">Password</label>
+                  <input id="password" name="password" type="password" />
+                  {errors.fields.password && <p>{errors.fields.password.message}</p>}
+                </div>
+                <button type="submit" disabled={fetchStatus === 'fetching'}>
+                  Continue
+                </button>
+              </form>
+            </>
           )
         }
+        ```
+      </Tab>
+
+      <Tab>
+        ```swift {{ filename: 'MFASignInView.swift', collapsible: true }}
+        import SwiftUI
+        import Clerk
 
-        return (
-          <View>
-            <Text>Sign in</Text>
-            <View>
-              <TextInput
-                value={email}
-                placeholder="Enter email"
-                placeholderTextColor="#666666"
-                onChangeText={(email) => setEmail(email)}
-              />
-            </View>
-
-            <View>
-              <TextInput
-                value={password}
-                placeholder="Enter password"
-                placeholderTextColor="#666666"
-                secureTextEntry={true}
-                onChangeText={(password) => setPassword(password)}
-              />
-            </View>
-
-            <Button title="Continue" onPress={handleFirstStage} />
-          </View>
-        )
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      ```swift {{ filename: 'MFASignInView.swift', collapsible: true }}
-      import SwiftUI
-      import Clerk
-
-      struct MFASignInView: View {
+        struct MFASignInView: View {
         @State private var email = ""
         @State private var password = ""
         @State private var code = ""
         @State private var displayTOTP = false
 
         var body: some View {
-          if displayTOTP {
+            if displayTOTP {
             TextField("Code", text: $code)
             Button("Verify") {
-              Task { await verify(code: code) }
+                Task { await verify(code: code) }
             }
-          } else {
+            } else {
             TextField("Email", text: $email)
             SecureField("Password", text: $password)
             Button("Next") {
-              Task { await submit(email: email, password: password) }
+                Task { await submit(email: email, password: password) }
+            }
             }
-          }
         }
-      }
+        }
 
-      extension MFASignInView {
+        extension MFASignInView {
 
         func submit(email: String, password: String) async {
-          do {
+            do {
             // Start the sign-in process.
             let signIn = try await SignIn.create(strategy: .identifier(email, password: password))
 
             switch signIn.status {
             case .needsSecondFactor:
-              // Handle user submitting email and password and swapping to TOTP form.
-              displayTOTP = true
+                // Handle user submitting email and password and swapping to TOTP form.
+                displayTOTP = true
             default:
-              // If the status is not needsSecondFactor, check why. User may need to
-              // complete different steps.
-              dump(signIn.status)
+                // If the status is not needsSecondFactor, check why. User may need to
+                // complete different steps.
+                dump(signIn.status)
             }
-          } catch {
+            } catch {
             // See https://clerk.com/docs/guides/development/custom-flows/error-handling
             // for more info on error handling
             dump(error)
-          }
+            }
         }
 
         func verify(code: String) async {
-          do {
+            do {
             // Access the in progress sign in stored on the client object.
             guard let inProgressSignIn = Clerk.shared.client?.signIn else { return }
 
@@ -572,25 +311,25 @@ This guide will walk you through how to build a custom email/password sign-in fl
 
             switch signIn.status {
             case .complete:
-              // If sign-in process is complete, navigate the user as needed.
-              dump(Clerk.shared.session)
+                // If sign-in process is complete, navigate the user as needed.
+                dump(Clerk.shared.session)
             default:
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              dump(signIn.status)
+                // If the status is not complete, check why. User may need to
+                // complete further steps.
+                dump(signIn.status)
             }
-          } catch {
+            } catch {
             // See https://clerk.com/docs/guides/development/custom-flows/error-handling
             // for more info on error handling
             dump(error)
-          }
+            }
         }
-      }
-      ```
-    </Tab>
+        }
+        ```
+      </Tab>
 
-    <Tab>
-      ```kotlin {{ filename: 'MFASignInViewModel.kt', collapsible: true }}
+      <Tab>
+        ```kotlin {{ filename: 'MFASignInViewModel.kt', collapsible: true }}
         import androidx.lifecycle.ViewModel
         import androidx.lifecycle.viewModelScope
         import com.clerk.api.Clerk
@@ -603,128 +342,129 @@ This guide will walk you through how to build a custom email/password sign-in fl
         import kotlinx.coroutines.launch
 
         class MFASignInViewModel : ViewModel() {
-          private val _uiState = MutableStateFlow<UiState>(UiState.Unverified)
-          val uiState = _uiState.asStateFlow()
+            private val _uiState = MutableStateFlow<UiState>(UiState.Unverified)
+            val uiState = _uiState.asStateFlow()
 
-          fun submit(email: String, password: String) {
+            fun submit(email: String, password: String) {
             viewModelScope.launch {
-              SignIn.create(SignIn.CreateParams.Strategy.Password(identifier = email, password = password))
+                SignIn.create(SignIn.CreateParams.Strategy.Password(identifier = email, password = password))
                 .onSuccess {
-                  if (it.status == SignIn.Status.NEEDS_SECOND_FACTOR) {
+                    if (it.status == SignIn.Status.NEEDS_SECOND_FACTOR) {
                     // Display TOTP Form
                     _uiState.value = UiState.NeedsSecondFactor
-                  } else {
+                    } else {
                     // If the status is not needsSecondFactor, check why. User may need to
                     // complete different steps.
-                  }
+                    }
                 }
                 .onFailure {
-                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-                  // for more info on error handling
+                    // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                    // for more info on error handling
                 }
             }
-          }
+            }
 
-          fun verify(code: String) {
+            fun verify(code: String) {
             val inProgressSignIn = Clerk.signIn ?: return
             viewModelScope.launch {
-              inProgressSignIn
+                inProgressSignIn
                 .attemptSecondFactor(SignIn.AttemptSecondFactorParams.TOTP(code))
                 .onSuccess {
-                  if (it.status == SignIn.Status.COMPLETE) {
-                      // User is now signed in and verified.
-                      // You can navigate to the next screen or perform other actions.
+                    if (it.status == SignIn.Status.COMPLETE) {
+                        // User is now signed in and verified.
+                        // You can navigate to the next screen or perform other actions.
                     _uiState.value = UiState.Verified
-                  }
+                    }
                 }
                 .onFailure {
-                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-                  // for more info on error handling
+                    // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                    // for more info on error handling
                 }
             }
-          }
+            }
 
-          sealed interface UiState {
+            sealed interface UiState {
             data object Unverified : UiState
             data object Verified : UiState
             data object NeedsSecondFactor : UiState
-          }
-      }
-      ```
-
-      ```kotlin {{ filename: 'MFASignInActivity.kt', collapsible: true }}
-      import android.os.Bundle
-      import androidx.activity.ComponentActivity
-      import androidx.activity.compose.setContent
-      import androidx.activity.viewModels
-      import androidx.compose.foundation.layout.Arrangement
-      import androidx.compose.foundation.layout.Column
-      import androidx.compose.foundation.layout.fillMaxSize
-      import androidx.compose.material3.Button
-      import androidx.compose.material3.Text
-      import androidx.compose.material3.TextField
-      import androidx.compose.runtime.Composable
-      import androidx.compose.runtime.getValue
-      import androidx.compose.runtime.mutableStateOf
-      import androidx.compose.runtime.remember
-      import androidx.compose.runtime.setValue
-      import androidx.compose.ui.Alignment
-      import androidx.compose.ui.Modifier
-      import androidx.compose.ui.text.input.PasswordVisualTransformation
-      import androidx.compose.ui.unit.dp
-      import androidx.lifecycle.compose.collectAsStateWithLifecycle
-
-      class MFASignInActivity : ComponentActivity() {
-        val viewModel: MFASignInViewModel by viewModels()
-
-        override fun onCreate(savedInstanceState: Bundle?) {
-          super.onCreate(savedInstanceState)
-          setContent {
-            val state by viewModel.uiState.collectAsStateWithLifecycle()
-            MFASignInView(state = state, onSubmit = viewModel::submit, onVerify = viewModel::verify)
+            }
+        }
+        ```
+
+        ```kotlin {{ filename: 'MFASignInActivity.kt', collapsible: true }}
+        import android.os.Bundle
+        import androidx.activity.ComponentActivity
+        import androidx.activity.compose.setContent
+        import androidx.activity.viewModels
+        import androidx.compose.foundation.layout.Arrangement
+        import androidx.compose.foundation.layout.Column
+        import androidx.compose.foundation.layout.fillMaxSize
+        import androidx.compose.material3.Button
+        import androidx.compose.material3.Text
+        import androidx.compose.material3.TextField
+        import androidx.compose.runtime.Composable
+        import androidx.compose.runtime.getValue
+        import androidx.compose.runtime.mutableStateOf
+        import androidx.compose.runtime.remember
+        import androidx.compose.runtime.setValue
+        import androidx.compose.ui.Alignment
+        import androidx.compose.ui.Modifier
+        import androidx.compose.ui.text.input.PasswordVisualTransformation
+        import androidx.compose.ui.unit.dp
+        import androidx.lifecycle.compose.collectAsStateWithLifecycle
+
+        class MFASignInActivity : ComponentActivity() {
+          val viewModel: MFASignInViewModel by viewModels()
+
+          override fun onCreate(savedInstanceState: Bundle?) {
+            super.onCreate(savedInstanceState)
+            setContent {
+              val state by viewModel.uiState.collectAsStateWithLifecycle()
+              MFASignInView(state = state, onSubmit = viewModel::submit, onVerify = viewModel::verify)
+            }
           }
         }
-      }
-
-      @Composable
-      fun MFASignInView(
-        state: MFASignInViewModel.UiState,
-        onSubmit: (String, String) -> Unit,
-        onVerify: (String) -> Unit,
-      ) {
-        var email by remember { mutableStateOf("") }
-        var password by remember { mutableStateOf("") }
-        var code by remember { mutableStateOf("") }
-
-        Column(
-          modifier = Modifier.fillMaxSize(),
-          verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
-          horizontalAlignment = Alignment.CenterHorizontally,
+
+        @Composable
+        fun MFASignInView(
+          state: MFASignInViewModel.UiState,
+          onSubmit: (String, String) -> Unit,
+          onVerify: (String) -> Unit,
         ) {
-          when (state) {
-            MFASignInViewModel.UiState.NeedsSecondFactor -> {
-              TextField(value = code, onValueChange = { code = it }, placeholder = { Text("Code") })
-              Button(onClick = { onVerify(code) }) { Text("Submit") }
-            }
-            MFASignInViewModel.UiState.Unverified -> {
-              TextField(value = email, onValueChange = { email = it }, placeholder = { Text("Email") })
-              TextField(
-                value = password,
-                onValueChange = { password = it },
-                placeholder = { Text("Password") },
-                visualTransformation = PasswordVisualTransformation(),
-              )
-              Button(onClick = { onSubmit(email, password) }) { Text("Next") }
-            }
-            MFASignInViewModel.UiState.Verified -> {
-              Text("Verified")
+          var email by remember { mutableStateOf("") }
+          var password by remember { mutableStateOf("") }
+          var code by remember { mutableStateOf("") }
+
+          Column(
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+            horizontalAlignment = Alignment.CenterHorizontally,
+          ) {
+            when (state) {
+              MFASignInViewModel.UiState.NeedsSecondFactor -> {
+                TextField(value = code, onValueChange = { code = it }, placeholder = { Text("Code") })
+                Button(onClick = { onVerify(code) }) { Text("Submit") }
+              }
+              MFASignInViewModel.UiState.Unverified -> {
+                TextField(value = email, onValueChange = { email = it }, placeholder = { Text("Email") })
+                TextField(
+                  value = password,
+                  onValueChange = { password = it },
+                  placeholder = { Text("Password") },
+                  visualTransformation = PasswordVisualTransformation(),
+                )
+                Button(onClick = { onSubmit(email, password) }) { Text("Next") }
+              }
+              MFASignInViewModel.UiState.Verified -> {
+                Text("Verified")
+              }
             }
           }
         }
-      }
-      ```
-    </Tab>
-  </Tabs>
+        ```
+      </Tab>
+    </Tabs>
+  </If>
 </Steps>
 
 {/* TODO: Add logic for MFA for phone code */}
diff --git a/docs/guides/development/custom-flows/authentication/email-password.mdx b/docs/guides/development/custom-flows/authentication/email-password.mdx
index d128f33444..8447c56651 100644
--- a/docs/guides/development/custom-flows/authentication/email-password.mdx
+++ b/docs/guides/development/custom-flows/authentication/email-password.mdx
@@ -1,10 +1,24 @@
 ---
 title: Build a custom email/password authentication flow
 description: Learn how to build a custom email/password sign-up and sign-in flow using the Clerk API.
+sdk: nextjs, react, expo, js-frontend, react-router, tanstack-react-start, ios, android
 ---
 
 <Include src="_partials/custom-flows-callout" />
 
+<If sdk={["nextjs", "react", "expo", "js-frontend", "react-router", "tanstack-react-start"]}>
+  > [!IMPORTANT]
+  > This guide applies to the following Clerk SDKs:
+  >
+  > - `@clerk/react` v6 or higher
+  > - `@clerk/nextjs` v7 or higher
+  > - `@clerk/expo` v3 or higher
+  > - `@clerk/react-router` v3 or higher
+  > - `@clerk/tanstack-react-start` v0.26.0 or higher
+  >
+  > If you're using an older version of one of these SDKs, or are using the legacy API, refer to the [legacy API documentation](/docs/guides/development/custom-flows/authentication/legacy/email-password).
+</If>
+
 This guide will walk you through how to build a custom email/password sign-up and sign-in flow.
 
 <Steps>
@@ -23,471 +37,168 @@ This guide will walk you through how to build a custom email/password sign-up an
 
   To sign up a user using their email, password, and email verification code, you must:
 
-  1. Initiate the sign-up process by collecting the user's email address and password.
-  1. Prepare the email address verification, which sends a one-time code to the given address.
-  1. Collect the one-time code and attempt to complete the email address verification with it.
-  1. If the email address verification is successful, set the newly created session as the active session.
-
-  <Tabs items={["Next.js", "JavaScript", "Expo", "iOS", "Android"]}>
-    <Tab>
-      This example is written for Next.js App Router but it can be adapted for any React-based framework.
+  <If sdk={["nextjs", "react", "expo", "js-frontend", "react-router", "tanstack-react-start"]}>
+    1. Initiate the sign-up process by collecting the user's email address and password with the [`signUp.password()`](/docs/reference/javascript/sign-up-future#password) method.
+    1. Send a one-time code to the provided email address for verification with the [`signUp.verifications.sendEmailCode()`](/docs/reference/javascript/sign-up-future#verifications-send-email-code) method.
+    1. Collect the one-time code and verify it with the [`signUp.verifications.verifyEmailCode()`](/docs/reference/javascript/sign-up-future#verifications-verify-email-code) method.
+    1. If the email address verification is successful, finalize the sign-up with the [`signUp.finalize()`](/docs/reference/javascript/sign-up-future#finalize) method to create the user and set the newly created session as the active session.
 
-      ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
-      'use client'
+    <Tabs items={["Next.js"]}>
+      <Tab>
+        This example is written for Next.js App Router but it can be adapted for any React-based framework.
 
-      import * as React from 'react'
-      import { useSignUp } from '@clerk/nextjs'
-      import { useRouter } from 'next/navigation'
+        ```tsx {{ filename: 'app/sign-up/page.tsx', collapsible: true }}
+        'use client'
 
-      export default function Page() {
-        const { isLoaded, signUp, setActive } = useSignUp()
-        const [emailAddress, setEmailAddress] = React.useState('')
-        const [password, setPassword] = React.useState('')
-        const [verifying, setVerifying] = React.useState(false)
-        const [code, setCode] = React.useState('')
-        const router = useRouter()
+        import * as React from 'react'
+        import { useAuth, useSignUp } from '@clerk/nextjs'
+        import { useRouter } from 'next/navigation'
 
-        // Handle submission of the sign-up form
-        const handleSubmit = async (e: React.FormEvent) => {
-          e.preventDefault()
+        export default function SignUpPage() {
+          const { signUp, errors, fetchStatus } = useSignUp()
+          const { isSignedIn } = useAuth()
 
-          if (!isLoaded) return
+          const handleSubmit = async (formData: FormData) => {
+            const email = formData.get('email') as string
+            const password = formData.get('password') as string
 
-          // Start the sign-up process using the email and password provided
-          try {
-            await signUp.create({
-              emailAddress,
+            await signUp.password({
+              email,
               password,
             })
 
-            // Send the user an email with the verification code
-            await signUp.prepareEmailAddressVerification({
-              strategy: 'email_code',
-            })
-
-            // Set 'verifying' true to display second form
-            // and capture the OTP code
-            setVerifying(true)
-          } catch (err: any) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error(JSON.stringify(err, null, 2))
+            await signUp.verifications.sendEmailCode()
           }
-        }
 
-        // Handle the submission of the verification form
-        const handleVerify = async (e: React.FormEvent) => {
-          e.preventDefault()
+          const handleVerify = async (formData: FormData) => {
+            const code = formData.get('code') as string
 
-          if (!isLoaded) return
-
-          try {
-            // Use the code the user provided to attempt verification
-            const signUpAttempt = await signUp.attemptEmailAddressVerification({
+            await signUp.verifications.verifyEmailCode({
               code,
             })
-
-            // If verification was completed, set the session to active
-            // and redirect the user
-            if (signUpAttempt.status === 'complete') {
-              await setActive({
-                session: signUpAttempt.createdSessionId,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
-
-                  await router.push('/')
+            if (signUp.status === 'complete') {
+              await signUp.finalize({
+                navigate: () => {
+                  router.push('/dashboard')
                 },
               })
-            } 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: any) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error('Error:', JSON.stringify(err, null, 2))
           }
-        }
 
-        // Display the verification form to capture the OTP code
-        if (verifying) {
-          return (
-            <>
-              <h1>Verify your email</h1>
-              <form onSubmit={handleVerify}>
-                <label id="code">Enter your verification code</label>
-                <input value={code} id="code" name="code" onChange={(e) => setCode(e.target.value)} />
-                <button type="submit">Verify</button>
-              </form>
-            </>
-          )
-        }
+          if (signUp.status === 'complete' || isSignedIn) {
+            return null
+          }
 
-        // Display the initial sign-up form to capture the email and password
-        return (
-          <>
-            <h1>Sign up</h1>
-            <form onSubmit={handleSubmit}>
-              <div>
-                <label htmlFor="email">Enter email address</label>
-                <input
-                  id="email"
-                  type="email"
-                  name="email"
-                  value={emailAddress}
-                  onChange={(e) => setEmailAddress(e.target.value)}
-                />
-              </div>
-              <div>
-                <label htmlFor="password">Enter password</label>
-                <input
-                  id="password"
-                  type="password"
-                  name="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                />
-              </div>
-              <div>
-                <button type="submit">Continue</button>
-              </div>
-            </form>
-          </>
-        )
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      <CodeBlockTabs options={["index.html", "main.js"]}>
-        ```html {{ filename: 'index.html', collapsible: true }}
-        <!doctype html>
-        <html lang="en">
-          <head>
-            <meta charset="UTF-8" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            <title>Clerk + JavaScript App</title>
-          </head>
-          <body>
-            <div id="signed-in"></div>
-
-            <div id="sign-up">
-              <h2>Sign up</h2>
-              <form id="sign-up-form">
-                <label for="email">Enter email address</label>
-                <input type="email" name="email" id="sign-up-email" />
-                <label for="password">Enter password</label>
-                <input type="password" name="password" id="sign-up-password" />
-                <button type="submit">Continue</button>
+          if (
+            signUp.status === 'missing_requirements' &&
+            signUp.unverifiedFields.includes('email_address')
+          ) {
+            return (
+              <form action={handleVerify}>
+                <input type="text" name="code" placeholder="Enter your verification code" />
+                <button type="submit">Verify</button>
               </form>
-            </div>
+            )
+          }
 
-            <form id="verifying" hidden>
-              <h2>Verify your email</h2>
-              <label for="code">Enter your verification code</label>
-              <input id="code" name="code" />
-              <button type="submit" id="verify-button">Verify</button>
+          return (
+            <form action={handleSubmit}>
+              <input type="email" name="email" placeholder="Email" />
+              <input type="password" name="password" placeholder="Password" />
+              <button type="submit">Sign up</button>
             </form>
-
-            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
-          </body>
-        </html>
+          )
+        }
         ```
-
-        ```js {{ filename: 'main.js', collapsible: true }}
-        import { Clerk } from '@clerk/clerk-js'
-
-        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
-
-        const clerk = new Clerk(pubKey)
-        await clerk.load()
-
-        if (clerk.isSignedIn) {
-          // Mount user button component
-          document.getElementById('signed-in').innerHTML = `
-            <div id="user-button"></div>
-          `
-
-          const userbuttonDiv = document.getElementById('user-button')
-
-          clerk.mountUserButton(userbuttonDiv)
-        } else {
-          // Handle the sign-up form
-          document.getElementById('sign-up-form').addEventListener('submit', async (e) => {
-            e.preventDefault()
-
-            const formData = new FormData(e.target)
-            const emailAddress = formData.get('email')
-            const password = formData.get('password')
-
-            try {
-              // Start the sign-up process using the email and password provided
-              await clerk.client.signUp.create({ emailAddress, password })
-              await clerk.client.signUp.prepareEmailAddressVerification()
-              // Hide sign-up form
-              document.getElementById('sign-up').setAttribute('hidden', '')
-              // Show verification form
-              document.getElementById('verifying').removeAttribute('hidden')
-            } catch (error) {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.error(error)
+      </Tab>
+    </Tabs>
+  </If>
+
+  <If sdk={["ios", "android"]}>
+    1. Initiate the sign-up process by collecting the user's email address and password.
+    1. Prepare the email address verification, which sends a one-time code to the given address.
+    1. Collect the one-time code and attempt to complete the email address verification with it.
+    1. If the email address verification is successful, set the newly created session as the active session.
+
+    <Tabs items={["iOS", "Android"]}>
+      <Tab>
+        ```swift {{ filename: 'EmailPasswordSignUpView.swift', collapsible: true }}
+        import SwiftUI
+        import Clerk
+
+        struct EmailPasswordSignUpView: View {
+            @State private var email = ""
+            @State private var password = ""
+            @State private var code = ""
+            @State private var isVerifying = false
+
+            var body: some View {
+            if isVerifying {
+                // Display the verification form to capture the OTP code
+                TextField("Enter your verification code", text: $code)
+                Button("Verify") {
+                Task { await verify(code: code) }
+                }
+            } else {
+                // Display the initial sign-up form to capture the email and password
+                TextField("Enter email address", text: $email)
+                SecureField("Enter password", text: $password)
+                Button("Next") {
+                Task { await submit(email: email, password: password) }
+                }
             }
-          })
-
-          // Handle the verification form
-          document.getElementById('verifying').addEventListener('submit', async (e) => {
-            const formData = new FormData(e.target)
-            const code = formData.get('code')
-
-            try {
-              // Use the code the user provided to attempt verification
-              const signUpAttempt = await clerk.client.signUp.attemptEmailAddressVerification({
-                code,
-              })
-
-              // Now that the user is created, set the session to active.
-              await clerk.setActive({ session: signUpAttempt.createdSessionId })
-            } catch (error) {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.error(error)
             }
-          })
-        }
-        ```
-      </CodeBlockTabs>
-    </Tab>
-
-    <Tab>
-      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/reference/hooks/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.
-
-      ```tsx {{ filename: 'app/(auth)/_layout.tsx' }}
-      import { Redirect, Stack } from 'expo-router'
-      import { useAuth } from '@clerk/clerk-expo'
-
-      export default function GuestLayout() {
-        const { isSignedIn } = useAuth()
-
-        if (isSignedIn) {
-          return <Redirect href={'/dashboard'} />
-        }
-
-        return <Stack />
-      }
-      ```
-
-      In the `(auth)` group, create a `sign-up.tsx` file with the following code. The [`useSignUp()`](/docs/reference/hooks/use-sign-up) hook is used to create a sign-up flow. The user can sign up using their email and password and will receive an email verification code to confirm their email.
-
-      ```tsx {{ filename: 'app/(auth)/sign-up.tsx', collapsible: true }}
-      import * as React from 'react'
-      import { Text, TextInput, Button, View } from 'react-native'
-      import { useSignUp } from '@clerk/clerk-expo'
-      import { Link, useRouter } from 'expo-router'
-
-      export default function Page() {
-        const { isLoaded, signUp, setActive } = 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)
-          } catch (err) {
-            // See https://clerk.com/docs/guides/development/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
+        extension EmailPasswordSignUpView {
 
-          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,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
-
-                  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/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error(JSON.stringify(err, null, 2))
-          }
-        }
+            func submit(email: String, password: String) async {
+            do {
+                // Start the sign-up process using the email and password provided
+                let signUp = try await SignUp.create(strategy: .standard(emailAddress: email, password: password))
 
-        if (pendingVerification) {
-          return (
-            <>
-              <Text>Verify your email</Text>
-              <TextInput
-                value={code}
-                placeholder="Enter your verification code"
-                placeholderTextColor="#666666"
-                onChangeText={(code) => setCode(code)}
-              />
-              <Button title="Verify" onPress={onVerifyPress} />
-            </>
-          )
-        }
+                // Send the user an email with the verification code
+                try await signUp.prepareVerification(strategy: .emailCode)
 
-        return (
-          <View>
-            <>
-              <Text>Sign up</Text>
-              <TextInput
-                autoCapitalize="none"
-                value={emailAddress}
-                placeholder="Enter email"
-                placeholderTextColor="#666666"
-                onChangeText={(email) => setEmailAddress(email)}
-              />
-              <TextInput
-                value={password}
-                placeholder="Enter password"
-                placeholderTextColor="#666666"
-                secureTextEntry={true}
-                onChangeText={(password) => setPassword(password)}
-              />
-              <Button title="Continue" onPress={onSignUpPress} />
-              <View style={{ flexDirection: 'row', gap: 4 }}>
-                <Text>Have an account?</Text>
-                <Link href="/sign-in">
-                  <Text>Sign in</Text>
-                </Link>
-              </View>
-            </>
-          </View>
-        )
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      ```swift {{ filename: 'EmailPasswordSignUpView.swift', collapsible: true }}
-      import SwiftUI
-      import Clerk
-
-      struct EmailPasswordSignUpView: View {
-        @State private var email = ""
-        @State private var password = ""
-        @State private var code = ""
-        @State private var isVerifying = false
-
-        var body: some View {
-          if isVerifying {
-            // Display the verification form to capture the OTP code
-            TextField("Enter your verification code", text: $code)
-            Button("Verify") {
-              Task { await verify(code: code) }
+                // Set 'isVerifying' true to display second form
+                // and capture the OTP code
+                isVerifying = true
+            } catch {
+                // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                // for more info on error handling
+                dump(error)
             }
-          } else {
-            // Display the initial sign-up form to capture the email and password
-            TextField("Enter email address", text: $email)
-            SecureField("Enter password", text: $password)
-            Button("Next") {
-              Task { await submit(email: email, password: password) }
             }
-          }
-        }
-      }
-
-      extension EmailPasswordSignUpView {
-
-        func submit(email: String, password: String) async {
-          do {
-            // Start the sign-up process using the email and password provided
-            let signUp = try await SignUp.create(strategy: .standard(emailAddress: email, password: password))
 
-            // Send the user an email with the verification code
-            try await signUp.prepareVerification(strategy: .emailCode)
+            func verify(code: String) async {
+            do {
+                // Access the in progress sign up stored on the client
+                guard let inProgressSignUp = Clerk.shared.client?.signUp else { return }
 
-            // Set 'isVerifying' true to display second form
-            // and capture the OTP code
-            isVerifying = true
-          } catch {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            dump(error)
-          }
-        }
+                // Use the code the user provided to attempt verification
+                let signUp = try await inProgressSignUp.attemptVerification(strategy: .emailCode(code: code))
 
-        func verify(code: String) async {
-          do {
-            // Access the in progress sign up stored on the client
-            guard let inProgressSignUp = Clerk.shared.client?.signUp else { return }
-
-            // Use the code the user provided to attempt verification
-            let signUp = try await inProgressSignUp.attemptVerification(strategy: .emailCode(code: code))
-
-            switch signUp.status {
-            case .complete:
-              // If verification was completed, navigate the user as needed.
-              dump(Clerk.shared.session)
-            default:
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              dump(signUp.status)
+                switch signUp.status {
+                case .complete:
+                // If verification was completed, navigate the user as needed.
+                dump(Clerk.shared.session)
+                default:
+                // If the status is not complete, check why. User may need to
+                // complete further steps.
+                dump(signUp.status)
+                }
+            } catch {
+                // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                // for more info on error handling
+                dump(error)
+            }
             }
-          } catch {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            dump(error)
-          }
         }
-      }
-      ```
-    </Tab>
+        ```
+      </Tab>
 
-    <Tab>
-      ```kotlin {{ filename: 'EmailPasswordSignUpViewModel.kt', collapsible: true }}
+      <Tab>
+        ```kotlin {{ filename: 'EmailPasswordSignUpViewModel.kt', collapsible: true }}
         import androidx.lifecycle.ViewModel
         import androidx.lifecycle.viewModelScope
         import com.clerk.api.Clerk
@@ -504,48 +215,48 @@ This guide will walk you through how to build a custom email/password sign-up an
         import kotlinx.coroutines.launch
 
         class EmailPasswordSignUpViewModel : ViewModel() {
-          private val _uiState =
+        private val _uiState =
             MutableStateFlow<UiState>(UiState.Loading)
-          val uiState = _uiState.asStateFlow()
+        val uiState = _uiState.asStateFlow()
 
-          init {
+        init {
             combine(Clerk.userFlow, Clerk.isInitialized) { user, isInitialized ->
                 _uiState.value =
-                  when {
+                when {
                     !isInitialized -> UiState.Loading
                     user != null -> UiState.Verified
                     else -> UiState.Unverified
-                  }
-              }
-              .launchIn(viewModelScope)
-          }
+                }
+            }
+            .launchIn(viewModelScope)
+        }
 
-          fun submit(email: String, password: String) {
+        fun submit(email: String, password: String) {
             viewModelScope.launch {
-              SignUp.create(SignUp.CreateParams.Standard(emailAddress = email, password = password))
+            SignUp.create(SignUp.CreateParams.Standard(emailAddress = email, password = password))
                 .flatMap { it.prepareVerification(SignUp.PrepareVerificationParams.Strategy.EmailCode()) }
                 .onSuccess { _uiState.value = UiState.Verifying }
                 .onFailure {
-                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-                  // for more info on error handling
+                // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                // for more info on error handling
                 }
             }
-          }
+        }
 
-          fun verify(code: String) {
+        fun verify(code: String) {
             val inProgressSignUp = Clerk.signUp ?: return
             viewModelScope.launch {
-              inProgressSignUp
+            inProgressSignUp
                 .attemptVerification(SignUp.AttemptVerificationParams.EmailCode(code))
                 .onSuccess { _uiState.value = UiState.Verified }
                 .onFailure {
-                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-                  // for more info on error handling
+                // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                // for more info on error handling
                 }
             }
-          }
+        }
 
-          sealed interface UiState {
+        sealed interface UiState {
             data object Loading : UiState
 
             data object Unverified : UiState
@@ -553,428 +264,211 @@ This guide will walk you through how to build a custom email/password sign-up an
             data object Verifying : UiState
 
             data object Verified : UiState
-          }
         }
-      ```
-
-      ```kotlin {{ filename: 'EmailPasswordSignUpActivity.kt', collapsible: true }}
-      import android.os.Bundle
-      import androidx.activity.ComponentActivity
-      import androidx.activity.compose.setContent
-      import androidx.activity.viewModels
-      import androidx.compose.foundation.layout.Arrangement
-      import androidx.compose.foundation.layout.Box
-      import androidx.compose.foundation.layout.Column
-      import androidx.compose.foundation.layout.fillMaxSize
-      import androidx.compose.material3.Button
-      import androidx.compose.material3.CircularProgressIndicator
-      import androidx.compose.material3.Text
-      import androidx.compose.material3.TextField
-      import androidx.compose.runtime.Composable
-      import androidx.compose.runtime.getValue
-      import androidx.compose.runtime.mutableStateOf
-      import androidx.compose.runtime.remember
-      import androidx.compose.runtime.setValue
-      import androidx.compose.ui.Alignment
-      import androidx.compose.ui.Modifier
-      import androidx.compose.ui.text.input.PasswordVisualTransformation
-      import androidx.compose.ui.unit.dp
-      import androidx.lifecycle.compose.collectAsStateWithLifecycle
-
-      class EmailPasswordSignUpActivity : ComponentActivity() {
-
-        val viewModel: EmailPasswordSignUpViewModel by viewModels()
-
-        override fun onCreate(savedInstanceState: Bundle?) {
-          super.onCreate(savedInstanceState)
-          setContent {
-            val state by viewModel.uiState.collectAsStateWithLifecycle()
-            EmailPasswordSignInView(
-              state = state,
-              onSubmit = viewModel::submit,
-              onVerify = viewModel::verify,
-            )
+        }
+        ```
+
+        ```kotlin {{ filename: 'EmailPasswordSignUpActivity.kt', collapsible: true }}
+        import android.os.Bundle
+        import androidx.activity.ComponentActivity
+        import androidx.activity.compose.setContent
+        import androidx.activity.viewModels
+        import androidx.compose.foundation.layout.Arrangement
+        import androidx.compose.foundation.layout.Box
+        import androidx.compose.foundation.layout.Column
+        import androidx.compose.foundation.layout.fillMaxSize
+        import androidx.compose.material3.Button
+        import androidx.compose.material3.CircularProgressIndicator
+        import androidx.compose.material3.Text
+        import androidx.compose.material3.TextField
+        import androidx.compose.runtime.Composable
+        import androidx.compose.runtime.getValue
+        import androidx.compose.runtime.mutableStateOf
+        import androidx.compose.runtime.remember
+        import androidx.compose.runtime.setValue
+        import androidx.compose.ui.Alignment
+        import androidx.compose.ui.Modifier
+        import androidx.compose.ui.text.input.PasswordVisualTransformation
+        import androidx.compose.ui.unit.dp
+        import androidx.lifecycle.compose.collectAsStateWithLifecycle
+
+        class EmailPasswordSignUpActivity : ComponentActivity() {
+
+          val viewModel: EmailPasswordSignUpViewModel by viewModels()
+
+          override fun onCreate(savedInstanceState: Bundle?) {
+            super.onCreate(savedInstanceState)
+            setContent {
+              val state by viewModel.uiState.collectAsStateWithLifecycle()
+              EmailPasswordSignInView(
+                state = state,
+                onSubmit = viewModel::submit,
+                onVerify = viewModel::verify,
+              )
+            }
           }
         }
-      }
-
-      @Composable
-      fun EmailPasswordSignInView(
-        state: EmailPasswordSignUpViewModel.UiState,
-        onSubmit: (String, String) -> Unit,
-        onVerify: (String) -> Unit,
-      ) {
-        var email by remember { mutableStateOf("") }
-        var password by remember { mutableStateOf("") }
-        var code by remember { mutableStateOf("") }
-
-        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-          when (state) {
-            EmailPasswordSignUpViewModel.UiState.Unverified -> {
-              Column(
-                verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
-                horizontalAlignment = Alignment.CenterHorizontally,
-              ) {
-                TextField(value = email, onValueChange = { email = it }, label = { Text("Email") })
-                TextField(
-                  value = password,
-                  onValueChange = { password = it },
-                  visualTransformation = PasswordVisualTransformation(),
-                  label = { Text("Password") },
-                )
-                Button(onClick = { onSubmit(email, password) }) { Text("Next") }
+
+        @Composable
+        fun EmailPasswordSignInView(
+          state: EmailPasswordSignUpViewModel.UiState,
+          onSubmit: (String, String) -> Unit,
+          onVerify: (String) -> Unit,
+        ) {
+          var email by remember { mutableStateOf("") }
+          var password by remember { mutableStateOf("") }
+          var code by remember { mutableStateOf("") }
+
+          Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+            when (state) {
+              EmailPasswordSignUpViewModel.UiState.Unverified -> {
+                Column(
+                  verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+                  horizontalAlignment = Alignment.CenterHorizontally,
+                ) {
+                  TextField(value = email, onValueChange = { email = it }, label = { Text("Email") })
+                  TextField(
+                    value = password,
+                    onValueChange = { password = it },
+                    visualTransformation = PasswordVisualTransformation(),
+                    label = { Text("Password") },
+                  )
+                  Button(onClick = { onSubmit(email, password) }) { Text("Next") }
+                }
               }
-            }
-            EmailPasswordSignUpViewModel.UiState.Verified -> {
-              Text("Verified!")
-            }
-            EmailPasswordSignUpViewModel.UiState.Verifying -> {
-              Column(
-                verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
-                horizontalAlignment = Alignment.CenterHorizontally,
-              ) {
-                TextField(
-                  value = code,
-                  onValueChange = { code = it },
-                  label = { Text("Enter your verification code") },
-                )
-                Button(onClick = { onVerify(code) }) { Text("Verify") }
+              EmailPasswordSignUpViewModel.UiState.Verified -> {
+                Text("Verified!")
+              }
+              EmailPasswordSignUpViewModel.UiState.Verifying -> {
+                Column(
+                  verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+                  horizontalAlignment = Alignment.CenterHorizontally,
+                ) {
+                  TextField(
+                    value = code,
+                    onValueChange = { code = it },
+                    label = { Text("Enter your verification code") },
+                  )
+                  Button(onClick = { onVerify(code) }) { Text("Verify") }
+                }
               }
+              EmailPasswordSignUpViewModel.UiState.Loading -> CircularProgressIndicator()
             }
-            EmailPasswordSignUpViewModel.UiState.Loading -> CircularProgressIndicator()
           }
         }
-      }
-      ```
-    </Tab>
-  </Tabs>
+        ```
+      </Tab>
+    </Tabs>
+  </If>
 
   ## Sign-in flow
 
   To authenticate a user using their email and password, you must:
 
-  1. Initiate the sign-in process by creating a `SignIn` using the email address and password provided.
-  1. If the attempt is successful, set the newly created session as the active session.
-
-  <Tabs items={["Next.js", "JavaScript", "Expo", "iOS", "Android"]}>
-    <Tab>
-      This example is written for Next.js App Router but it can be adapted for any React-based framework.
+  <If sdk={["nextjs", "react", "expo", "js-frontend", "react-router", "tanstack-react-start"]}>
+    1. Initiate the sign-in process by collecting the user's email address and password with the [`signIn.password()`](/docs/reference/javascript/sign-in-future#password) method.
+    1. If the attempt is successful, finalize the sign-in with the [`signIn.finalize()`](/docs/reference/javascript/sign-in-future#finalize) method to set the newly created session as the active session.
 
-      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
-      'use client'
+    <Tabs items={["Next.js"]}>
+      <Tab>
+        This example is written for Next.js App Router but it can be adapted for any React-based framework.
 
-      import * as React from 'react'
-      import { useSignIn } from '@clerk/nextjs'
-      import { useRouter } from 'next/navigation'
+        ```tsx {{ filename: 'app/sign-in/page.tsx', collapsible: true }}
+        'use client'
 
-      export default function SignInForm() {
-        const { isLoaded, signIn, setActive } = useSignIn()
-        const [email, setEmail] = React.useState('')
-        const [password, setPassword] = React.useState('')
-        const router = useRouter()
+        import * as React from 'react'
+        import { useAuth, useSignIn } from '@clerk/nextjs'
+        import { useRouter } from 'next/navigation'
 
-        // Handle the submission of the sign-in form
-        const handleSubmit = async (e: React.FormEvent) => {
-          e.preventDefault()
+        export default function SignInPage() {
+          const { signIn, errors, fetchStatus } = useSignIn()
+          const { isSignedIn } = useAuth()
 
-          if (!isLoaded) return
+          const handleSubmit = async (formData: FormData) => {
+            const email = formData.get('email') as string
+            const password = formData.get('password') as string
 
-          // Start the sign-in process using the email and password provided
-          try {
-            const signInAttempt = await signIn.create({
-              identifier: email,
+            await signIn.password({
+              email,
               password,
             })
-
-            // If sign-in process is complete, set the created session as active
-            // and redirect the user
-            if (signInAttempt.status === 'complete') {
-              await setActive({
-                session: signInAttempt.createdSessionId,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
-
-                  router.push('/')
+            if (signIn.status === 'complete') {
+              await signIn.finalize({
+                navigate: () => {
+                  router.push('/dashboard')
                 },
               })
-            } else {
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              console.error(JSON.stringify(signInAttempt, null, 2))
             }
-          } catch (err: any) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error(JSON.stringify(err, null, 2))
           }
-        }
 
-        // Display a form to capture the user's email and password
-        return (
-          <>
-            <h1>Sign in</h1>
-            <form onSubmit={(e) => handleSubmit(e)}>
-              <div>
-                <label htmlFor="email">Enter email address</label>
-                <input
-                  onChange={(e) => setEmail(e.target.value)}
-                  id="email"
-                  name="email"
-                  type="email"
-                  value={email}
-                />
-              </div>
-              <div>
-                <label htmlFor="password">Enter password</label>
-                <input
-                  onChange={(e) => setPassword(e.target.value)}
-                  id="password"
-                  name="password"
-                  type="password"
-                  value={password}
-                />
-              </div>
+          if (signIn.status === 'complete' || isSignedIn) {
+            return null
+          }
+
+          return (
+            <form action={handleSubmit}>
+              <input type="email" name="email" placeholder="Email" />
+              <input type="password" name="password" placeholder="Password" />
               <button type="submit">Sign in</button>
             </form>
-          </>
-        )
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      <CodeBlockTabs options={["index.html", "main.js"]}>
-        ```html {{ filename: 'index.html', collapsible: true }}
-        <!doctype html>
-        <html lang="en">
-          <head>
-            <meta charset="UTF-8" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            <title>Clerk + JavaScript App</title>
-          </head>
-          <body>
-            <div id="signed-in"></div>
-
-            <div id="sign-in">
-              <h2>Sign in</h2>
-              <form id="sign-in-form">
-                <label for="email">Enter email address</label>
-                <input name="email" id="sign-in-email" />
-                <label for="password">Enter password</label>
-                <input name="password" id="sign-in-password" />
-                <button type="submit">Continue</button>
-              </form>
-            </div>
-
-            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
-          </body>
-        </html>
+          )
+        }
         ```
+      </Tab>
+    </Tabs>
+  </If>
 
-        ```js {{ filename: 'main.js', collapsible: true }}
-        import { Clerk } from '@clerk/clerk-js'
-
-        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
-
-        const clerk = new Clerk(pubKey)
-        await clerk.load()
-
-        if (clerk.isSignedIn) {
-          // Mount user button component
-          document.getElementById('signed-in').innerHTML = `
-            <div id="user-button"></div>
-          `
+  <If sdk={["ios", "android"]}>
+    1. Initiate the sign-in process by creating a `SignIn` using the email address and password provided.
+    1. If the attempt is successful, set the newly created session as the active session.
 
-          const userbuttonDiv = document.getElementById('user-button')
+    <Tabs items={["iOS", "Android"]}>
+      <Tab>
+        ```swift {{ filename: 'EmailPasswordSignInView.swift', collapsible: true }}
+        import SwiftUI
+        import Clerk
 
-          clerk.mountUserButton(userbuttonDiv)
-        } else if (clerk.session?.currentTask) {
-          // Check for pending tasks and display custom UI to help users resolve them
-          // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-          switch (clerk.session.currentTask.key) {
-            case 'choose-organization': {
-              document.getElementById('app').innerHTML = `
-                    <div id="task"></div>
-                  `
+        struct EmailPasswordSignInView: View {
+            @State private var email = ""
+            @State private var password = ""
 
-              const taskDiv = document.getElementById('task')
-
-              clerk.mountTaskChooseOrganization(taskDiv)
+            var body: some View {
+            TextField("Enter email address", text: $email)
+            SecureField("Enter password", text: $password)
+            Button("Sign In") {
+                Task { await submit(email: email, password: password) }
             }
-          }
-        } else {
-          // Handle the sign-in form
-          document.getElementById('sign-in-form').addEventListener('submit', async (e) => {
-            e.preventDefault()
-
-            const formData = new FormData(e.target)
-            const emailAddress = formData.get('email')
-            const password = formData.get('password')
-
-            try {
-              // Start the sign-in process
-              const signInAttempt = await clerk.client.signIn.create({
-                identifier: emailAddress,
-                password,
-              })
-
-              // If the sign-in is complete, set the user as active
-              if (signInAttempt.status === 'complete') {
-                await clerk.setActive({ session: signInAttempt.createdSessionId })
-
-                location.reload()
-              } else {
-                // If the status is not complete, check why. User may need to
-                // complete further steps.
-                console.error(JSON.stringify(signInAttempt, null, 2))
-              }
-            } catch (error) {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.error(error)
             }
-          })
         }
-        ```
-      </CodeBlockTabs>
-    </Tab>
-
-    <Tab>
-      In the `(auth)` group, create a `sign-in.tsx` file with the following code. The [`useSignIn()`](/docs/reference/hooks/use-sign-in) hook is used to create a sign-in flow. The user can sign in using email address and password, or navigate to the sign-up page.
-
-      ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }}
-      import { useSignIn } from '@clerk/clerk-expo'
-      import { Link, useRouter } from 'expo-router'
-      import { Text, TextInput, Button, View } from 'react-native'
-      import React from 'react'
-
-      export default function Page() {
-        const { signIn, setActive, isLoaded } = useSignIn()
-        const router = useRouter()
-
-        const [emailAddress, setEmailAddress] = React.useState('')
-        const [password, setPassword] = React.useState('')
 
-        // Handle the submission of the sign-in form
-        const onSignInPress = React.useCallback(async () => {
-          if (!isLoaded) return
+        extension EmailPasswordSignInView {
 
-          // Start the sign-in process using the email and password provided
-          try {
-            const signInAttempt = await signIn.create({
-              identifier: emailAddress,
-              password,
-            })
+            func submit(email: String, password: String) async {
+            do {
+                // Start the sign-in process using the email and password provided
+                let signIn = try await SignIn.create(strategy: .identifier(email, password: password))
 
-            // If sign-in process is complete, set the created session as active
-            // and redirect the user
-            if (signInAttempt.status === 'complete') {
-              await setActive({
-                session: signInAttempt.createdSessionId,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
-
-                  router.replace('/')
-                },
-              })
-            } else {
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              console.error(JSON.stringify(signInAttempt, null, 2))
+                switch signIn.status {
+                case .complete:
+                // If sign-in process is complete, navigate the user as needed.
+                dump(Clerk.shared.session)
+                default:
+                // If the status is not complete, check why. User may need to
+                // complete further steps.
+                dump(signIn.status)
+                }
+            } catch {
+                // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                // for more info on error handling
+                dump(error)
             }
-          } catch (err) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error(JSON.stringify(err, null, 2))
-          }
-        }, [isLoaded, emailAddress, password])
-
-        return (
-          <View>
-            <Text>Sign in</Text>
-            <TextInput
-              autoCapitalize="none"
-              value={emailAddress}
-              placeholder="Enter email"
-              placeholderTextColor="#666666"
-              onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
-            />
-            <TextInput
-              value={password}
-              placeholder="Enter password"
-              placeholderTextColor="#666666"
-              secureTextEntry={true}
-              onChangeText={(password) => setPassword(password)}
-            />
-            <Button title="Sign in" onPress={onSignInPress} />
-            <View style={{ flexDirection: 'row', gap: 4 }}>
-              <Text>Don't have an account?</Text>
-              <Link href="/sign-up">
-                <Text>Sign up</Text>
-              </Link>
-            </View>
-          </View>
-        )
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      ```swift {{ filename: 'EmailPasswordSignInView.swift', collapsible: true }}
-      import SwiftUI
-      import Clerk
-
-      struct EmailPasswordSignInView: View {
-        @State private var email = ""
-        @State private var password = ""
-
-        var body: some View {
-          TextField("Enter email address", text: $email)
-          SecureField("Enter password", text: $password)
-          Button("Sign In") {
-            Task { await submit(email: email, password: password) }
-          }
-        }
-      }
-
-      extension EmailPasswordSignInView {
-
-        func submit(email: String, password: String) async {
-          do {
-            // Start the sign-in process using the email and password provided
-            let signIn = try await SignIn.create(strategy: .identifier(email, password: password))
-
-            switch signIn.status {
-            case .complete:
-              // If sign-in process is complete, navigate the user as needed.
-              dump(Clerk.shared.session)
-            default:
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              dump(signIn.status)
             }
-          } catch {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            dump(error)
-          }
         }
-      }
-      ```
-    </Tab>
+        ```
+      </Tab>
 
-    <Tab>
-      ```kotlin {{ filename: 'EmailPasswordSignInViewModel.kt', collapsible: true }}
+      <Tab>
+        ```kotlin {{ filename: 'EmailPasswordSignInViewModel.kt', collapsible: true }}
         import androidx.lifecycle.ViewModel
         import androidx.lifecycle.viewModelScope
         import com.clerk.api.Clerk
@@ -1028,9 +522,9 @@ This guide will walk you through how to build a custom email/password sign-up an
                 data object SignedIn : UiState
             }
         }
-      ```
+        ```
 
-      ```kotlin {{ filename: 'EmailPasswordSignInActivity.kt', collapsible: true }}
+        ```kotlin {{ filename: 'EmailPasswordSignInActivity.kt', collapsible: true }}
         import android.os.Bundle
         import androidx.activity.ComponentActivity
         import androidx.activity.compose.setContent
@@ -1104,7 +598,8 @@ This guide will walk you through how to build a custom email/password sign-up an
             }
         }
 
-      ```
-    </Tab>
-  </Tabs>
+        ```
+      </Tab>
+    </Tabs>
+  </If>
 </Steps>
diff --git a/docs/guides/development/custom-flows/authentication/email-sms-otp.mdx b/docs/guides/development/custom-flows/authentication/email-sms-otp.mdx
index 32f4525723..3a1becd881 100644
--- a/docs/guides/development/custom-flows/authentication/email-sms-otp.mdx
+++ b/docs/guides/development/custom-flows/authentication/email-sms-otp.mdx
@@ -1,10 +1,24 @@
 ---
 title: Build a custom email or SMS OTP authentication flow
 description: Learn how build a custom email or SMS one time code (OTP) authentication flow using the Clerk API.
+sdk: nextjs, react, expo, js-frontend, react-router, tanstack-react-start, ios, android
 ---
 
 <Include src="_partials/custom-flows-callout" />
 
+<If sdk={["nextjs", "react", "expo", "js-frontend", "react-router", "tanstack-react-start"]}>
+  > [!IMPORTANT]
+  > This guide applies to the following Clerk SDKs:
+  >
+  > - `@clerk/react` v6 or higher
+  > - `@clerk/nextjs` v7 or higher
+  > - `@clerk/expo` v3 or higher
+  > - `@clerk/react-router` v3 or higher
+  > - `@clerk/tanstack-react-start` v0.26.0 or higher
+  >
+  > If you're using an older version of one of these SDKs, or are using the legacy API, refer to the [legacy API documentation](/docs/guides/development/custom-flows/authentication/legacy/email-password).
+</If>
+
 Clerk supports passwordless authentication, which lets users sign in and sign up without having to remember a password. Instead, users receive a one-time password (OTP), also known as a one-time code, via email or SMS, which they can use to authenticate themselves.
 
 This guide will walk you through how to build a custom SMS OTP sign-up and sign-in flow. The process for using email OTP is similar, and the differences will be highlighted throughout.
@@ -23,268 +37,116 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-
 
   To sign up a user using an OTP, you must:
 
-  1. Initiate the sign-up process by collecting the user's identifier, which for this example is a phone number.
-  1. Prepare the verification, which sends a one-time code to the given identifier.
-  1. Attempt to complete the verification with the code the user provides.
-  1. If the verification is successful, set the newly created session as the active session.
-
-  <Tabs items={["Next.js", "JavaScript", "iOS", "Android"]}>
-    <Tab>
-      This example is written for Next.js App Router but it can be adapted to any React-based framework.
-
-      ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
-      'use client'
+  <If sdk={["nextjs", "react", "expo", "js-frontend", "react-router", "tanstack-react-start"]}>
+    1. Initiate the sign-up process by collecting the user's phone number with the [`signUp.create()`](/docs/reference/javascript/sign-up-future#create) method.
+    1. Send a one-time code to the provided phone number for verification with the [`signUp.verifications.sendPhoneCode()`](/docs/reference/javascript/sign-up-future#verifications-send-phone-code) method.
+    1. Collect the one-time code and verify it with the [`signUp.verifications.verifyPhoneCode()`](/docs/reference/javascript/sign-up-future#verifications-verify-phone-code) method.
+    1. If the phone number verification is successful, finalize the sign-up with the [`signUp.finalize()`](/docs/reference/javascript/sign-up-future#finalize) method to create the user and set the newly created session as the active session.
 
-      import * as React from 'react'
-      import { useSignUp } from '@clerk/nextjs'
-      import { useRouter } from 'next/navigation'
+    <Tabs items={["Next.js"]}>
+      <Tab>
+        This example is written for Next.js App Router but it can be adapted for any React-based framework.
 
-      export default function Page() {
-        const { isLoaded, signUp, setActive } = useSignUp()
-        const [verifying, setVerifying] = React.useState(false)
-        const [phone, setPhone] = React.useState('')
-        const [code, setCode] = React.useState('')
-        const router = useRouter()
+        ```tsx {{ filename: 'app/sign-up/page.tsx', collapsible: true }}
+        'use client'
 
-        async function handleSubmit(e: React.FormEvent) {
-          e.preventDefault()
+        import * as React from 'react'
+        import { useAuth, useSignUp } from '@clerk/nextjs'
+        import { useRouter } from 'next/navigation'
 
-          if (!isLoaded && !signUp) return null
+        export default function SignUpPage() {
+          const { signUp, errors, fetchStatus } = useSignUp()
+          const { isSignedIn } = useAuth()
 
-          try {
-            // Start the sign-up process using the phone number method
-            await signUp.create({
-              phoneNumber: phone,
-            })
+          const handleSubmit = async (formData: FormData) => {
+            const phoneNumber = formData.get('phoneNumber') as string
 
-            // Start the verification - a SMS message will be sent to the
-            // number with a one-time code
-            await signUp.preparePhoneNumberVerification()
+            await signUp.create({ phoneNumber })
 
-            // Set verifying to true to display second form and capture the OTP code
-            setVerifying(true)
-          } catch (err) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error('Error:', JSON.stringify(err, null, 2))
+            await signUp.verifications.sendPhoneCode()
           }
-        }
 
-        async function handleVerification(e: React.FormEvent) {
-          e.preventDefault()
-
-          if (!isLoaded && !signUp) return null
-
-          try {
-            // Use the code provided by the user and attempt verification
-            const signUpAttempt = await signUp.attemptPhoneNumberVerification({
-              code,
-            })
-
-            // If verification was completed, set the session to active
-            // and redirect the user
-            if (signUpAttempt.status === 'complete') {
-              await setActive({
-                session: signUpAttempt.createdSessionId,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
-
-                  await router.push('/')
+          const handleVerify = async (formData: FormData) => {
+            const code = formData.get('code') as string
+
+            await signUp.verifications.verifyPhoneCode({ code })
+            if (signUp.status === 'complete') {
+              await signUp.finalize({
+                navigate: () => {
+                  router.push('/dashboard')
                 },
               })
-            } else {
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              console.error(signUpAttempt)
             }
-          } catch (err) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error('Error:', JSON.stringify(err, null, 2))
           }
-        }
 
-        if (verifying) {
-          return (
-            <>
-              <h1>Verify your phone number</h1>
-              <form onSubmit={handleVerification}>
-                <label htmlFor="code">Enter your verification code</label>
-                <input value={code} id="code" name="code" onChange={(e) => setCode(e.target.value)} />
-                <button type="submit">Verify</button>
-              </form>
-            </>
-          )
-        }
+          if (signUp.status === 'complete' || isSignedIn) {
+            return null
+          }
 
-        return (
-          <>
-            <h1>Sign up</h1>
-            <form onSubmit={handleSubmit}>
-              <label htmlFor="phone">Enter phone number</label>
-              <input
-                value={phone}
-                id="phone"
-                name="phone"
-                type="tel"
-                onChange={(e) => setPhone(e.target.value)}
-              />
-              <button type="submit">Continue</button>
-            </form>
-          </>
-        )
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      <CodeBlockTabs options={["index.html", "main.js"]}>
-        ```html {{ filename: 'index.html', collapsible: true }}
-        <!doctype html>
-        <html lang="en">
-          <head>
-            <meta charset="UTF-8" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            <title>Clerk + JavaScript App</title>
-          </head>
-          <body>
-            <div id="signed-in"></div>
-
-            <div id="task"></div>
-
-            <div id="sign-up">
-              <h2>Sign up</h2>
-              <form id="sign-up-form">
-                <label for="phone">Enter phone number</label>
-                <input type="tel" name="phone" id="sign-up-phone" />
-                <button type="submit">Continue</button>
+          if (
+            signUp.status === 'missing_requirements' &&
+            signUp.unverifiedFields.includes('phone_number')
+          ) {
+            return (
+              <form action={handleVerify}>
+                <input type="text" name="code" placeholder="Enter your verification code" />
+                <button type="submit">Verify</button>
               </form>
-            </div>
+            )
+          }
 
-            <form id="verifying" hidden>
-              <h2>Verify your phone number</h2>
-              <label for="code">Enter your verification code</label>
-              <input id="code" name="code" />
-              <button type="submit" id="verify-button">Verify</button>
+          return (
+            <form action={handleSubmit}>
+              <input type="tel" name="phoneNumber" placeholder="Phone number" />
+              <button type="submit" disabled={fetchStatus === 'fetching'}>
+                Sign up
+              </button>
             </form>
-
-            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
-          </body>
-        </html>
+          )
+        }
         ```
+      </Tab>
+    </Tabs>
 
-        ```js {{ filename: 'main.js', collapsible: true }}
-        import { Clerk } from '@clerk/clerk-js'
-
-        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
-
-        const clerk = new Clerk(pubKey)
-        await clerk.load()
-
-        if (clerk.isSignedIn) {
-          // Mount user button component
-          document.getElementById('signed-in').innerHTML = `
-            <div id="user-button"></div>
-          `
-
-          const userbuttonDiv = document.getElementById('user-button')
-
-          clerk.mountUserButton(userbuttonDiv)
-        } else if (clerk.session?.currentTask) {
-          // Check for pending tasks and display custom UI to help users resolve them
-          // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-          switch (clerk.session.currentTask.key) {
-            case 'choose-organization': {
-              document.getElementById('app').innerHTML = `
-                    <div id="task"></div>
-                  `
-
-              const taskDiv = document.getElementById('task')
+    To create a sign-up flow for email OTP, use the [`signUp.emailCode.sendCode()`](/docs/reference/javascript/sign-up-future) and [`signUp.emailCode.verifyCode()`](/docs/reference/javascript/sign-up-future) methods. These methods work the same way as their phone number counterparts do in the previous example. You can find all available methods in the [`SignUpFuture`](/docs/reference/javascript/sign-up-future) object documentation.
+  </If>
 
-              clerk.mountTaskChooseOrganization(taskDiv)
-            }
-          }
-        } else {
-          // Handle the sign-up form
-          document.getElementById('sign-up-form').addEventListener('submit', async (e) => {
-            e.preventDefault()
-
-            const formData = new FormData(e.target)
-            const phoneNumber = formData.get('phone')
-
-            try {
-              // Start the sign-up process using the phone number method
-              await clerk.client.signUp.create({ phoneNumber })
-              await clerk.client.signUp.preparePhoneNumberVerification()
-              // Hide sign-up form
-              document.getElementById('sign-up').setAttribute('hidden', '')
-              // Show verification form
-              document.getElementById('verifying').removeAttribute('hidden')
-            } catch (error) {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.error(error)
-            }
-          })
+  <If sdk={["ios", "android"]}>
+    1. Initiate the sign-up process by collecting the user's identifier, which for this example is a phone number.
+    1. Prepare the verification, which sends a one-time code to the given identifier.
+    1. Attempt to complete the verification with the code the user provides.
+    1. If the verification is successful, set the newly created session as the active session.
 
-          // Handle the verification form
-          document.getElementById('verifying').addEventListener('submit', async (e) => {
-            const formData = new FormData(e.target)
-            const code = formData.get('code')
+    <Tabs items={["iOS", "Android"]}>
+      <Tab>
+        ```swift {{ filename: 'SMSOTPSignUpView.swift', collapsible: true }}
+        import SwiftUI
+        import Clerk
 
-            try {
-              // Verify the phone number
-              const verify = await clerk.client.signUp.attemptPhoneNumberVerification({
-                code,
-              })
-
-              // Now that the user is created, set the session to active.
-              await clerk.setActive({ session: verify.createdSessionId })
-            } catch (error) {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.error(error)
-            }
-          })
-        }
-        ```
-      </CodeBlockTabs>
-    </Tab>
-
-    <Tab>
-      ```swift {{ filename: 'SMSOTPSignUpView.swift', collapsible: true }}
-      import SwiftUI
-      import Clerk
-
-      struct SMSOTPSignUpView: View {
+        struct SMSOTPSignUpView: View {
         @State private var phoneNumber = ""
         @State private var code = ""
         @State private var isVerifying = false
 
         var body: some View {
-          if isVerifying {
+            if isVerifying {
             TextField("Enter your verification code", text: $code)
             Button("Verify") {
-              Task { await verify(code: code) }
+                Task { await verify(code: code) }
             }
-          } else {
+            } else {
             TextField("Enter phone number", text: $phoneNumber)
             Button("Continue") {
-              Task { await submit(phoneNumber: phoneNumber) }
+                Task { await submit(phoneNumber: phoneNumber) }
             }
-          }
+            }
+        }
         }
-      }
 
-      extension SMSOTPSignUpView {
+        extension SMSOTPSignUpView {
 
         func submit(phoneNumber: String) async {
-          do {
+            do {
             // Start the sign-up process using the phone number method.
             let signUp = try await SignUp.create(strategy: .standard(phoneNumber: phoneNumber))
 
@@ -294,15 +156,15 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-
 
             // Set isVerifying to true to display second form and capture the OTP code.
             isVerifying = true
-          } catch {
+            } catch {
             // See https://clerk.com/docs/guides/development/custom-flows/error-handling
             // for more info on error handling
             dump(error)
-          }
+            }
         }
 
         func verify(code: String) async {
-          do {
+            do {
             // Access the in progress sign up stored on the client object.
             guard let inProgressSignUp = Clerk.shared.client?.signUp else { return }
 
@@ -311,89 +173,89 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-
 
             switch signUp.status {
             case .complete:
-              // If verification was completed, navigate the user as needed.
-              dump(Clerk.shared.session)
+                // If verification was completed, navigate the user as needed.
+                dump(Clerk.shared.session)
             default:
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              dump(signUp.status)
+                // If the status is not complete, check why. User may need to
+                // complete further steps.
+                dump(signUp.status)
             }
-          } catch {
+            } catch {
             // See https://clerk.com/docs/guides/development/custom-flows/error-handling
             // for more info on error handling
             dump(error)
-          }
+            }
+        }
         }
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      ```kotlin {{ filename: 'SMSOTPSignUpViewModel.kt', collapsible: true }}
-      import androidx.lifecycle.ViewModel
-      import androidx.lifecycle.viewModelScope
-      import com.clerk.api.Clerk
-      import com.clerk.api.network.serialization.flatMap
-      import com.clerk.api.network.serialization.onFailure
-      import com.clerk.api.network.serialization.onSuccess
-      import com.clerk.api.signup.SignUp
-      import com.clerk.api.signup.attemptVerification
-      import com.clerk.api.signup.prepareVerification
-      import kotlinx.coroutines.flow.MutableStateFlow
-      import kotlinx.coroutines.flow.asStateFlow
-      import kotlinx.coroutines.flow.combine
-      import kotlinx.coroutines.flow.launchIn
-      import kotlinx.coroutines.launch
-
-      class SMSOTPSignUpViewModel : ViewModel() {
-
-      private val _uiState = MutableStateFlow<UiState>(UiState.Unverified)
-      val uiState = _uiState.asStateFlow()
-
-      init {
+        ```
+      </Tab>
+
+      <Tab>
+        ```kotlin {{ filename: 'SMSOTPSignUpViewModel.kt', collapsible: true }}
+        import androidx.lifecycle.ViewModel
+        import androidx.lifecycle.viewModelScope
+        import com.clerk.api.Clerk
+        import com.clerk.api.network.serialization.flatMap
+        import com.clerk.api.network.serialization.onFailure
+        import com.clerk.api.network.serialization.onSuccess
+        import com.clerk.api.signup.SignUp
+        import com.clerk.api.signup.attemptVerification
+        import com.clerk.api.signup.prepareVerification
+        import kotlinx.coroutines.flow.MutableStateFlow
+        import kotlinx.coroutines.flow.asStateFlow
+        import kotlinx.coroutines.flow.combine
+        import kotlinx.coroutines.flow.launchIn
+        import kotlinx.coroutines.launch
+
+        class SMSOTPSignUpViewModel : ViewModel() {
+
+        private val _uiState = MutableStateFlow<UiState>(UiState.Unverified)
+        val uiState = _uiState.asStateFlow()
+
+        init {
         combine(Clerk.isInitialized, Clerk.userFlow) { isInitialized, user ->
-          _uiState.value =
+            _uiState.value =
             when {
-              !isInitialized -> UiState.Loading
-              user == null -> UiState.Unverified
-              else -> UiState.Verified
+                !isInitialized -> UiState.Loading
+                user == null -> UiState.Unverified
+                else -> UiState.Verified
             }
         }
         .launchIn(viewModelScope)
-      }
+        }
 
-      fun submit(phoneNumber: String) {
+        fun submit(phoneNumber: String) {
         viewModelScope.launch {
         SignUp.create(SignUp.CreateParams.Standard(phoneNumber = phoneNumber))
-          .flatMap { it.prepareVerification(SignUp.PrepareVerificationParams.Strategy.PhoneCode()) }
-          .onSuccess { _uiState.value = UiState.Verifying }
-          .onFailure {
+            .flatMap { it.prepareVerification(SignUp.PrepareVerificationParams.Strategy.PhoneCode()) }
+            .onSuccess { _uiState.value = UiState.Verifying }
+            .onFailure {
             // See https://clerk.com/docs/guides/development/custom-flows/error-handling
             // for more info on error handling
-          }
+            }
+        }
         }
-      }
 
-      fun verify(code: String) {
+        fun verify(code: String) {
         val inProgressSignUp = Clerk.signUp ?: return
         viewModelScope.launch {
         inProgressSignUp
-          .attemptVerification(SignUp.AttemptVerificationParams.PhoneCode(code))
-          .onSuccess {
+            .attemptVerification(SignUp.AttemptVerificationParams.PhoneCode(code))
+            .onSuccess {
             if (it.status == SignUp.Status.COMPLETE) {
-              _uiState.value = UiState.Verified
+                _uiState.value = UiState.Verified
             } else {
-              // The user may need to complete further steps
+                // The user may need to complete further steps
             }
-          }
-          .onFailure {
+            }
+            .onFailure {
             // See https://clerk.com/docs/guides/development/custom-flows/error-handling
             // for more info on error handling
-          }
+            }
+        }
         }
-      }
 
-      sealed interface UiState {
+        sealed interface UiState {
         data object Loading : UiState
 
         data object Unverified : UiState
@@ -402,378 +264,211 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-
 
         data object Verified : UiState
         }
-      }
-      ```
-
-      ```kotlin {{ filename: 'SMSOTPSignUpActivity.kt', collapsible: true }}
-      import android.os.Bundle
-      import androidx.activity.ComponentActivity
-      import androidx.activity.compose.setContent
-      import androidx.activity.viewModels
-      import androidx.compose.foundation.layout.Arrangement
-      import androidx.compose.foundation.layout.Box
-      import androidx.compose.foundation.layout.Column
-      import androidx.compose.foundation.layout.fillMaxSize
-      import androidx.compose.material3.Button
-      import androidx.compose.material3.CircularProgressIndicator
-      import androidx.compose.material3.Text
-      import androidx.compose.material3.TextField
-      import androidx.compose.runtime.Composable
-      import androidx.compose.runtime.getValue
-      import androidx.compose.runtime.mutableStateOf
-      import androidx.compose.runtime.remember
-      import androidx.compose.runtime.setValue
-      import androidx.compose.ui.Alignment
-      import androidx.compose.ui.Modifier
-      import androidx.compose.ui.unit.dp
-      import androidx.lifecycle.compose.collectAsStateWithLifecycle
-
-      class SMSOTPSignUpActivity : ComponentActivity() {
-        val viewModel: SMSOTPSignUpViewModel by viewModels()
-
-        override fun onCreate(savedInstanceState: Bundle?) {
-          super.onCreate(savedInstanceState)
-          setContent {
-            val state by viewModel.uiState.collectAsStateWithLifecycle()
-            SMSOTPSignUpView(state, viewModel::submit, viewModel::verify)
-          }
         }
-      }
-
-      @Composable
-      fun SMSOTPSignUpView(
-        state: SMSOTPSignUpViewModel.UiState,
-        onSubmit: (String) -> Unit,
-        onVerify: (String) -> Unit,
-      ) {
-        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-        when (state) {
-            SMSOTPSignUpViewModel.UiState.Unverified -> {
-              InputContent(
-                placeholder = "Enter your phone number",
-                buttonText = "Continue",
-                onClick = onSubmit,
-              )
-            }
-            SMSOTPSignUpViewModel.UiState.Verified -> {
-              Text("Verified")
-            }
-            SMSOTPSignUpViewModel.UiState.Verifying -> {
-              InputContent(
-                placeholder = "Enter your verification code",
-                buttonText = "Verify",
-                onClick = onVerify,
-              )
-            }
+        ```
 
-            SMSOTPSignUpViewModel.UiState.Loading -> {
-            CircularProgressIndicator()
+        ```kotlin {{ filename: 'SMSOTPSignUpActivity.kt', collapsible: true }}
+        import android.os.Bundle
+        import androidx.activity.ComponentActivity
+        import androidx.activity.compose.setContent
+        import androidx.activity.viewModels
+        import androidx.compose.foundation.layout.Arrangement
+        import androidx.compose.foundation.layout.Box
+        import androidx.compose.foundation.layout.Column
+        import androidx.compose.foundation.layout.fillMaxSize
+        import androidx.compose.material3.Button
+        import androidx.compose.material3.CircularProgressIndicator
+        import androidx.compose.material3.Text
+        import androidx.compose.material3.TextField
+        import androidx.compose.runtime.Composable
+        import androidx.compose.runtime.getValue
+        import androidx.compose.runtime.mutableStateOf
+        import androidx.compose.runtime.remember
+        import androidx.compose.runtime.setValue
+        import androidx.compose.ui.Alignment
+        import androidx.compose.ui.Modifier
+        import androidx.compose.ui.unit.dp
+        import androidx.lifecycle.compose.collectAsStateWithLifecycle
+
+        class SMSOTPSignUpActivity : ComponentActivity() {
+          val viewModel: SMSOTPSignUpViewModel by viewModels()
+
+          override fun onCreate(savedInstanceState: Bundle?) {
+            super.onCreate(savedInstanceState)
+            setContent {
+              val state by viewModel.uiState.collectAsStateWithLifecycle()
+              SMSOTPSignUpView(state, viewModel::submit, viewModel::verify)
             }
           }
         }
-      }
-
-      @Composable
-      fun InputContent(placeholder: String, buttonText: String, onClick: (String) -> Unit) {
-        var value by remember { mutableStateOf("") }
-        Column(
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+
+        @Composable
+        fun SMSOTPSignUpView(
+          state: SMSOTPSignUpViewModel.UiState,
+          onSubmit: (String) -> Unit,
+          onVerify: (String) -> Unit,
         ) {
-          TextField(placeholder = { Text(placeholder) }, value = value, onValueChange = { value = it })
-          Button(onClick = { onClick(value) }) { Text(buttonText) }
+          Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+          when (state) {
+              SMSOTPSignUpViewModel.UiState.Unverified -> {
+                InputContent(
+                  placeholder = "Enter your phone number",
+                  buttonText = "Continue",
+                  onClick = onSubmit,
+                )
+              }
+              SMSOTPSignUpViewModel.UiState.Verified -> {
+                Text("Verified")
+              }
+              SMSOTPSignUpViewModel.UiState.Verifying -> {
+                InputContent(
+                  placeholder = "Enter your verification code",
+                  buttonText = "Verify",
+                  onClick = onVerify,
+                )
+              }
+
+              SMSOTPSignUpViewModel.UiState.Loading -> {
+              CircularProgressIndicator()
+              }
+            }
+          }
         }
-      }
-      ```
-    </Tab>
-  </Tabs>
 
-  To create a sign-up flow for email OTP, use the [`prepareEmailAddressVerification`](/docs/reference/javascript/sign-up#prepare-email-address-verification) and [`attemptEmailAddressVerification`](/docs/reference/javascript/sign-up#attempt-email-address-verification). These helpers work the same way as their phone number counterparts do in the previous example. You can find all available methods in the [`SignUp`](/docs/reference/javascript/sign-in) object documentation.
+        @Composable
+        fun InputContent(placeholder: String, buttonText: String, onClick: (String) -> Unit) {
+          var value by remember { mutableStateOf("") }
+          Column(
+          horizontalAlignment = Alignment.CenterHorizontally,
+          verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+          ) {
+            TextField(placeholder = { Text(placeholder) }, value = value, onValueChange = { value = it })
+            Button(onClick = { onClick(value) }) { Text(buttonText) }
+          }
+        }
+        ```
+      </Tab>
+    </Tabs>
+
+    To create a sign-up flow for email OTP, use the [`prepareEmailAddressVerification`](/docs/reference/javascript/sign-up#prepare-email-address-verification) and [`attemptEmailAddressVerification`](/docs/reference/javascript/sign-up#attempt-email-address-verification). These helpers work the same way as their phone number counterparts do in the previous example. You can find all available methods in the [`SignUp`](/docs/reference/javascript/sign-in) object documentation.
+  </If>
 
   ## Sign-in flow
 
   To authenticate a user with an OTP, you must:
 
-  1. Initiate the sign-in process by creating a `SignIn` using the identifier provided, which for this example is a phone number.
-  1. Prepare the first factor verification.
-  1. Attempt verification with the code the user provides.
-  1. If the attempt is successful, set the newly created session as the active session.
-
-  <Tabs items={["Next.js","JavaScript", "iOS", "Android"]}>
-    <Tab>
-      This example is written for Next.js App Router but it can be adapted to any React-based framework.
-
-      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
-      'use client'
+  <If sdk={["nextjs", "react", "expo", "js-frontend", "react-router", "tanstack-react-start"]}>
+    1. Initiate the sign-in process by calling the [`signIn.phoneCode.sendCode()`](/docs/reference/javascript/sign-in-future#phone-code-send-code) method using the identifier provided, which for this example is a phone number.
+    1. Verify the phone code provided by the user with the [`signIn.phoneCode.verifyCode()`](/docs/reference/javascript/sign-in-future#phone-code-verify-code) method.
+    1. If the attempt is successful, finalize the sign-in with the [`signIn.finalize()`](/docs/reference/javascript/sign-in-future#finalize) method to set the newly created session as the active session.
 
-      import * as React from 'react'
-      import { useSignIn } from '@clerk/nextjs'
-      import { PhoneCodeFactor, SignInFirstFactor } from '@clerk/types'
-      import { useRouter } from 'next/navigation'
+    <Tabs items={["Next.js"]}>
+      <Tab>
+        This example is written for Next.js App Router but it can be adapted to any React-based framework.
 
-      export default function Page() {
-        const { isLoaded, signIn, setActive } = useSignIn()
-        const [verifying, setVerifying] = React.useState(false)
-        const [phone, setPhone] = React.useState('')
-        const [code, setCode] = React.useState('')
-        const router = useRouter()
+        ```tsx {{ filename: 'app/sign-in/page.tsx', collapsible: true }}
+        'use client'
 
-        async function handleSubmit(e: React.FormEvent) {
-          e.preventDefault()
+        import * as React from 'react'
+        import { useSignIn } from '@clerk/nextjs'
+        import { useRouter } from 'next/navigation'
 
-          if (!isLoaded && !signIn) return null
+        export default function Page() {
+          const { signIn, errors, fetchStatus } = useSignIn()
+          const router = useRouter()
 
-          try {
-            // Start the sign-in process using the phone number method
-            const { supportedFirstFactors } = await signIn.create({
-              identifier: phone,
-            })
-
-            // Filter the returned array to find the 'phone_code' entry
-            const isPhoneCodeFactor = (factor: SignInFirstFactor): factor is PhoneCodeFactor => {
-              return factor.strategy === 'phone_code'
-            }
-            const phoneCodeFactor = supportedFirstFactors?.find(isPhoneCodeFactor)
-
-            if (phoneCodeFactor) {
-              // Grab the phoneNumberId
-              const { phoneNumberId } = phoneCodeFactor
-
-              // Send the OTP code to the user
-              await signIn.prepareFirstFactor({
-                strategy: 'phone_code',
-                phoneNumberId,
-              })
+          async function handleSubmit(formData: FormData) {
+            const phoneNumber = formData.get('phoneNumber') as string
 
-              // Set verifying to true to display second form
-              // and capture the OTP code
-              setVerifying(true)
-            }
-          } catch (err) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error('Error:', JSON.stringify(err, null, 2))
+            await signIn.phoneCode.sendCode({ phoneNumber })
           }
-        }
 
-        async function handleVerification(e: React.FormEvent) {
-          e.preventDefault()
-
-          if (!isLoaded && !signIn) return null
-
-          try {
-            // Use the code provided by the user and attempt verification
-            const signInAttempt = await signIn.attemptFirstFactor({
-              strategy: 'phone_code',
-              code,
-            })
-
-            // If verification was completed, set the session to active
-            // and redirect the user
-            if (signInAttempt.status === 'complete') {
-              await setActive({
-                session: signInAttempt.createdSessionId,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    return
-                  }
+          async function handleVerification(formData: FormData) {
+            const code = formData.get('code') as string
 
+            await signIn.phoneCode.verifyCode({ code })
+            if (signIn.status === 'complete') {
+              await signIn.finalize({
+                navigate: () => {
                   router.push('/')
                 },
               })
-            } else {
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              console.error(signInAttempt)
             }
-          } catch (err) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error('Error:', JSON.stringify(err, null, 2))
           }
-        }
 
-        if (verifying) {
+          if (signIn.status === 'needs_second_factor') {
+            return (
+              <>
+                <h1>Verify your phone number</h1>
+                <form action={handleVerification}>
+                  <label htmlFor="code">Enter your verification code</label>
+                  <input id="code" name="code" type="text" />
+                  {errors.fields.code && <p>{errors.fields.code.message}</p>}
+                  <button type="submit" disabled={fetchStatus === 'fetching'}>
+                    Verify
+                  </button>
+                </form>
+              </>
+            )
+          }
+
           return (
             <>
-              <h1>Verify your phone number</h1>
-              <form onSubmit={handleVerification}>
-                <label htmlFor="code">Enter your verification code</label>
-                <input value={code} id="code" name="code" onChange={(e) => setCode(e.target.value)} />
-                <button type="submit">Verify</button>
+              <h1>Sign in</h1>
+              <form action={handleSubmit}>
+                <label htmlFor="phoneNumber">Enter phone number</label>
+                <input id="phoneNumber" name="phoneNumber" type="tel" />
+                {errors.fields.phoneNumber && <p>{errors.fields.phoneNumber.message}</p>}
+                <button type="submit" disabled={fetchStatus === 'fetching'}>
+                  Continue
+                </button>
               </form>
             </>
           )
         }
-
-        return (
-          <>
-            <h1>Sign in</h1>
-            <form onSubmit={handleSubmit}>
-              <label htmlFor="phone">Enter phone number</label>
-              <input
-                value={phone}
-                id="phone"
-                name="phone"
-                type="tel"
-                onChange={(e) => setPhone(e.target.value)}
-              />
-              <button type="submit">Continue</button>
-            </form>
-          </>
-        )
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      <CodeBlockTabs options={["index.html", "main.js"]}>
-        ```html {{ filename: 'index.html', collapsible: true }}
-        <!doctype html>
-        <html lang="en">
-          <head>
-            <meta charset="UTF-8" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            <title>Clerk + JavaScript App</title>
-          </head>
-          <body>
-            <div id="signed-in"></div>
-
-            <div id="sign-in">
-              <h2>Sign in</h2>
-              <form id="sign-in-form">
-                <label for="phone">Enter phone number</label>
-                <input type="tel" name="phone" id="sign-in-phone" />
-                <button type="submit">Continue</button>
-              </form>
-            </div>
-
-            <form id="verifying" hidden>
-              <h2>Verify your phone number</h2>
-              <label for="code">Enter your verification code</label>
-              <input id="code" name="code" />
-              <button type="submit" id="verify-button">Verify</button>
-            </form>
-
-            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
-          </body>
-        </html>
         ```
+      </Tab>
+    </Tabs>
 
-        ```js {{ filename: 'main.js', collapsible: true }}
-        import { Clerk } from '@clerk/clerk-js'
-
-        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
-
-        const clerk = new Clerk(pubKey)
-        await clerk.load()
-
-        if (clerk.isSignedIn) {
-          // Mount user button component
-          document.getElementById('signed-in').innerHTML = `
-            <div id="user-button"></div>
-          `
-
-          const userbuttonDiv = document.getElementById('user-button')
-
-          clerk.mountUserButton(userbuttonDiv)
-        } else {
-          // Handle the sign-in form
-          document.getElementById('sign-in-form').addEventListener('submit', async (e) => {
-            e.preventDefault()
-
-            const formData = new FormData(e.target)
-            const phone = formData.get('phone')
-
-            try {
-              // Start the sign-in process using the user's identifier.
-              // In this case, it's their phone number.
-              const { supportedFirstFactors } = await clerk.client.signIn.create({
-                identifier: phone,
-              })
-
-              // Find the phoneNumberId from all the available first factors for the current sign-in
-              const firstPhoneFactor = supportedFirstFactors.find((factor) => {
-                return factor.strategy === 'phone_code'
-              })
-
-              const { phoneNumberId } = firstPhoneFactor
-
-              // Prepare first factor verification, specifying
-              // the phone code strategy.
-              await clerk.client.signIn.prepareFirstFactor({
-                strategy: 'phone_code',
-                phoneNumberId,
-              })
-
-              // Hide sign-in form
-              document.getElementById('sign-in').setAttribute('hidden', '')
-              // Show verification form
-              document.getElementById('verifying').removeAttribute('hidden')
-            } catch (error) {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.error(error)
-            }
-          })
-
-          // Handle the verification form
-          document.getElementById('verifying').addEventListener('submit', async (e) => {
-            const formData = new FormData(e.target)
-            const code = formData.get('code')
-
-            try {
-              // Verify the phone number
-              const verify = await clerk.client.signIn.attemptFirstFactor({
-                strategy: 'phone_code',
-                code,
-              })
+    To create a sign-in flow for email OTP, use the [`signIn.emailCode.sendCode()`](/docs/reference/javascript/sign-in-future#email-code-send-code) and [`signIn.emailCode.verifyCode()`](/docs/reference/javascript/sign-in-future#email-code-verify-code) methods. These methods work the same way as their phone number counterparts do in the previous example. You can find all available methods in the [`SignInFuture`](/docs/reference/javascript/sign-in-future) object documentation.
+  </If>
 
-              // Now that the user is created, set the session to active.
-              await clerk.setActive({ session: verify.createdSessionId })
-            } catch (error) {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.error(error)
-            }
-          })
-        }
-        ```
-      </CodeBlockTabs>
-    </Tab>
+  <If sdk={["ios", "android"]}>
+    1. Initiate the sign-in process by creating a `SignIn` using the identifier provided, which for this example is a phone number.
+    1. Prepare the first factor verification.
+    1. Attempt verification with the code the user provides.
+    1. If the attempt is successful, set the newly created session as the active session.
 
-    <Tab>
-      ```swift {{ filename: 'SMSOTPSignInView.swift', collapsible: true }}
-      import SwiftUI
-      import Clerk
+    <Tabs items={["iOS", "Android"]}>
+      <Tab>
+        ```swift {{ filename: 'SMSOTPSignInView.swift', collapsible: true }}
+        import SwiftUI
+        import Clerk
 
-      struct SMSOTPSignInView: View {
+        struct SMSOTPSignInView: View {
         @State private var phoneNumber = ""
         @State private var code = ""
         @State private var isVerifying = false
 
         var body: some View {
-          if isVerifying {
+            if isVerifying {
             TextField("Enter your verification code", text: $code)
             Button("Verify") {
-              Task { await verify(code: code) }
+                Task { await verify(code: code) }
             }
-          } else {
+            } else {
             TextField("Enter phone number", text: $phoneNumber)
             Button("Continue") {
-              Task { await submit(phoneNumber: phoneNumber) }
+                Task { await submit(phoneNumber: phoneNumber) }
             }
-          }
+            }
+        }
         }
-      }
 
-      extension SMSOTPSignInView {
+        extension SMSOTPSignInView {
 
         func submit(phoneNumber: String) async {
-          do {
+            do {
             // Start the sign-in process using the phone number method.
             let signIn = try await SignIn.create(strategy: .identifier(phoneNumber))
 
@@ -783,15 +478,15 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-
             // Set isVerifying to true to display second form
             // and capture the OTP code.
             isVerifying = true
-          } catch {
+            } catch {
             // See https://clerk.com/docs/guides/development/custom-flows/error-handling
             // for more info on error handling
             dump(error)
-          }
+            }
         }
 
         func verify(code: String) async {
-          do {
+            do {
             // Access the in progress sign in stored on the client object.
             guard let inProgressSignIn = Clerk.shared.client?.signIn else { return }
 
@@ -800,183 +495,184 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-
 
             switch signIn.status {
             case .complete:
-              // If verification was completed, navigate the user as needed.
-              dump(Clerk.shared.session)
+                // If verification was completed, navigate the user as needed.
+                dump(Clerk.shared.session)
             default:
-              // If the status is not complete, check why. User may need to
-              // complete further steps.
-              dump(signIn.status)
+                // If the status is not complete, check why. User may need to
+                // complete further steps.
+                dump(signIn.status)
             }
-          } catch {
+            } catch {
             // See https://clerk.com/docs/guides/development/custom-flows/error-handling
             // for more info on error handling
             dump(error)
-          }
+            }
+        }
         }
-      }
-      ```
-    </Tab>
-
-    <Tab>
-      ```kotlin {{ filename: 'SMSOTPSignInViewModel.kt', collapsible: true }}
-      import androidx.lifecycle.ViewModel
-      import androidx.lifecycle.viewModelScope
-      import com.clerk.api.Clerk
-      import com.clerk.api.network.serialization.flatMap
-      import com.clerk.api.network.serialization.onFailure
-      import com.clerk.api.network.serialization.onSuccess
-      import com.clerk.api.signin.SignIn
-      import com.clerk.api.signin.attemptFirstFactor
-      import com.clerk.api.signin.prepareFirstFactor
-      import kotlinx.coroutines.flow.MutableStateFlow
-      import kotlinx.coroutines.flow.asStateFlow
-      import kotlinx.coroutines.flow.combine
-      import kotlinx.coroutines.flow.launchIn
-      import kotlinx.coroutines.launch
-
-      class SMSOTPSignInViewModel : ViewModel() {
+        ```
+      </Tab>
+
+      <Tab>
+        ```kotlin {{ filename: 'SMSOTPSignInViewModel.kt', collapsible: true }}
+        import androidx.lifecycle.ViewModel
+        import androidx.lifecycle.viewModelScope
+        import com.clerk.api.Clerk
+        import com.clerk.api.network.serialization.flatMap
+        import com.clerk.api.network.serialization.onFailure
+        import com.clerk.api.network.serialization.onSuccess
+        import com.clerk.api.signin.SignIn
+        import com.clerk.api.signin.attemptFirstFactor
+        import com.clerk.api.signin.prepareFirstFactor
+        import kotlinx.coroutines.flow.MutableStateFlow
+        import kotlinx.coroutines.flow.asStateFlow
+        import kotlinx.coroutines.flow.combine
+        import kotlinx.coroutines.flow.launchIn
+        import kotlinx.coroutines.launch
+
+        class SMSOTPSignInViewModel : ViewModel() {
         private val _uiState = MutableStateFlow<UiState>(UiState.Unverified)
         val uiState = _uiState.asStateFlow()
 
         init {
-          combine(Clerk.isInitialized, Clerk.userFlow) { isInitialized, user ->
-              _uiState.value =
+            combine(Clerk.isInitialized, Clerk.userFlow) { isInitialized, user ->
+                _uiState.value =
                 when {
-                  !isInitialized -> UiState.Loading
-                  user == null -> UiState.Unverified
-                  else -> UiState.Verified
+                    !isInitialized -> UiState.Loading
+                    user == null -> UiState.Unverified
+                    else -> UiState.Verified
                 }
             }
             .launchIn(viewModelScope)
         }
 
         fun submit(phoneNumber: String) {
-          viewModelScope.launch {
+            viewModelScope.launch {
             SignIn.create(SignIn.CreateParams.Strategy.PhoneCode(phoneNumber)).flatMap {
-              it
+                it
                 .prepareFirstFactor(SignIn.PrepareFirstFactorParams.PhoneCode())
                 .onSuccess { _uiState.value = UiState.Verifying }
                 .onFailure {
-                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-                  // for more info on error handling
+                    // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                    // for more info on error handling
                 }
             }
-          }
+            }
         }
 
         fun verify(code: String) {
-          val inProgressSignIn = Clerk.signIn ?: return
-          viewModelScope.launch {
+            val inProgressSignIn = Clerk.signIn ?: return
+            viewModelScope.launch {
             inProgressSignIn
-              .attemptFirstFactor(SignIn.AttemptFirstFactorParams.PhoneCode(code))
-              .onSuccess {
+                .attemptFirstFactor(SignIn.AttemptFirstFactorParams.PhoneCode(code))
+                .onSuccess {
                 if (it.status == SignIn.Status.COMPLETE) {
-                  _uiState.value = UiState.Verified
+                    _uiState.value = UiState.Verified
                 } else {
-                  // The user may need to complete further steps
+                    // The user may need to complete further steps
                 }
-              }
-              .onFailure {
+                }
+                .onFailure {
                 // See https://clerk.com/docs/guides/development/custom-flows/error-handling
                 // for more info on error handling
-              }
-          }
+                }
+            }
         }
 
         sealed interface UiState {
-          data object Loading : UiState
+            data object Loading : UiState
 
-          data object Unverified : UiState
+            data object Unverified : UiState
 
-          data object Verifying : UiState
+            data object Verifying : UiState
 
-          data object Verified : UiState
+            data object Verified : UiState
         }
-      }
-      ```
-
-      ```kotlin {{ filename: 'SMSOTPSignInActivity.kt', collapsible: true }}
-      import android.os.Bundle
-      import androidx.activity.ComponentActivity
-      import androidx.activity.compose.setContent
-      import androidx.activity.viewModels
-      import androidx.compose.foundation.layout.Arrangement
-      import androidx.compose.foundation.layout.Box
-      import androidx.compose.foundation.layout.Column
-      import androidx.compose.foundation.layout.fillMaxSize
-      import androidx.compose.material3.Button
-      import androidx.compose.material3.CircularProgressIndicator
-      import androidx.compose.material3.Text
-      import androidx.compose.material3.TextField
-      import androidx.compose.runtime.Composable
-      import androidx.compose.runtime.getValue
-      import androidx.compose.runtime.mutableStateOf
-      import androidx.compose.runtime.remember
-      import androidx.compose.runtime.setValue
-      import androidx.compose.ui.Alignment
-      import androidx.compose.ui.Modifier
-      import androidx.compose.ui.unit.dp
-      import androidx.lifecycle.compose.collectAsStateWithLifecycle
-
-      class SMSOTPSignInActivity : ComponentActivity() {
-        val viewModel: SMSOTPSignInViewModel by viewModels()
-
-        override fun onCreate(savedInstanceState: Bundle?) {
-          super.onCreate(savedInstanceState)
-          setContent {
-            val state by viewModel.uiState.collectAsStateWithLifecycle()
-            SMSOTPSignInView(state, viewModel::submit, viewModel::verify)
-          }
         }
-      }
-
-      @Composable
-      fun SMSOTPSignInView(
-        state: SMSOTPSignInViewModel.UiState,
-        onSubmit: (String) -> Unit,
-        onVerify: (String) -> Unit,
-      ) {
-        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-          when (state) {
-            SMSOTPSignInViewModel.UiState.Unverified -> {
-              InputContent(
-                placeholder = "Enter your phone number",
-                buttonText = "Continue",
-                onClick = onSubmit,
-              )
-            }
-            SMSOTPSignInViewModel.UiState.Verified -> {
-              Text("Verified")
-            }
-            SMSOTPSignInViewModel.UiState.Verifying -> {
-              InputContent(
-                placeholder = "Enter your verification code",
-                buttonText = "Verify",
-                onClick = onVerify,
-              )
-            }
+        ```
 
-            SMSOTPSignInViewModel.UiState.Loading -> {
-              CircularProgressIndicator()
+        ```kotlin {{ filename: 'SMSOTPSignInActivity.kt', collapsible: true }}
+        import android.os.Bundle
+        import androidx.activity.ComponentActivity
+        import androidx.activity.compose.setContent
+        import androidx.activity.viewModels
+        import androidx.compose.foundation.layout.Arrangement
+        import androidx.compose.foundation.layout.Box
+        import androidx.compose.foundation.layout.Column
+        import androidx.compose.foundation.layout.fillMaxSize
+        import androidx.compose.material3.Button
+        import androidx.compose.material3.CircularProgressIndicator
+        import androidx.compose.material3.Text
+        import androidx.compose.material3.TextField
+        import androidx.compose.runtime.Composable
+        import androidx.compose.runtime.getValue
+        import androidx.compose.runtime.mutableStateOf
+        import androidx.compose.runtime.remember
+        import androidx.compose.runtime.setValue
+        import androidx.compose.ui.Alignment
+        import androidx.compose.ui.Modifier
+        import androidx.compose.ui.unit.dp
+        import androidx.lifecycle.compose.collectAsStateWithLifecycle
+
+        class SMSOTPSignInActivity : ComponentActivity() {
+          val viewModel: SMSOTPSignInViewModel by viewModels()
+
+          override fun onCreate(savedInstanceState: Bundle?) {
+            super.onCreate(savedInstanceState)
+            setContent {
+              val state by viewModel.uiState.collectAsStateWithLifecycle()
+              SMSOTPSignInView(state, viewModel::submit, viewModel::verify)
             }
           }
         }
-      }
 
-      @Composable
-      fun InputContent(placeholder: String, buttonText: String, onClick: (String) -> Unit) {
-        var value by remember { mutableStateOf("") }
-        Column(
-          horizontalAlignment = Alignment.CenterHorizontally,
-          verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+        @Composable
+        fun SMSOTPSignInView(
+          state: SMSOTPSignInViewModel.UiState,
+          onSubmit: (String) -> Unit,
+          onVerify: (String) -> Unit,
         ) {
-          TextField(placeholder = { Text(placeholder) }, value = value, onValueChange = { value = it })
-          Button(onClick = { onClick(value) }) { Text(buttonText) }
+          Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+            when (state) {
+              SMSOTPSignInViewModel.UiState.Unverified -> {
+                InputContent(
+                  placeholder = "Enter your phone number",
+                  buttonText = "Continue",
+                  onClick = onSubmit,
+                )
+              }
+              SMSOTPSignInViewModel.UiState.Verified -> {
+                Text("Verified")
+              }
+              SMSOTPSignInViewModel.UiState.Verifying -> {
+                InputContent(
+                  placeholder = "Enter your verification code",
+                  buttonText = "Verify",
+                  onClick = onVerify,
+                )
+              }
+
+              SMSOTPSignInViewModel.UiState.Loading -> {
+                CircularProgressIndicator()
+              }
+            }
+          }
         }
-      }
-      ```
-    </Tab>
-  </Tabs>
 
-  To create a sign-in flow for email OTP, pass the value `email_code` as the first factor strategy. You can find all available methods in the [`SignIn`](/docs/reference/javascript/sign-in) object documentation.
+        @Composable
+        fun InputContent(placeholder: String, buttonText: String, onClick: (String) -> Unit) {
+          var value by remember { mutableStateOf("") }
+          Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+          ) {
+            TextField(placeholder = { Text(placeholder) }, value = value, onValueChange = { value = it })
+            Button(onClick = { onClick(value) }) { Text(buttonText) }
+          }
+        }
+        ```
+      </Tab>
+    </Tabs>
+
+    To create a sign-in flow for email OTP, pass the value `email_code` as the first factor strategy. You can find all available methods in the [`SignIn`](/docs/reference/javascript/sign-in) object documentation.
+  </If>
 </Steps>
diff --git a/docs/guides/development/custom-flows/authentication/enterprise-connections.mdx b/docs/guides/development/custom-flows/authentication/enterprise-connections.mdx
index a63c2937fe..a0e773c35e 100644
--- a/docs/guides/development/custom-flows/authentication/enterprise-connections.mdx
+++ b/docs/guides/development/custom-flows/authentication/enterprise-connections.mdx
@@ -1,6 +1,7 @@
 ---
 title: Build a custom flow for authenticating with enterprise connections
 description: Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports enterprise connections.
+sdk: nextjs, react, expo, js-frontend, react-router, tanstack-react-start
 ---
 
 <Include src="_partials/custom-flows-callout" />
@@ -15,61 +16,37 @@ You must configure your application instance through the Clerk Dashboard for the
   <Tab>
     <Include src="_partials/custom-flows/sso-connections" />
 
-    <CodeBlockTabs options={["Sign in page", "SSO callback page"]}>
-      ```tsx {{ filename: 'app/sign-in/page.tsx' }}
-      'use client'
+    ```tsx {{ filename: 'app/sign-in/page.tsx' }}
+    'use client'
 
-      import * as React from 'react'
-      import { useSignIn } from '@clerk/nextjs'
+    import * as React from 'react'
+    import { useSignIn } from '@clerk/nextjs'
 
-      export default function Page() {
-        const { signIn, isLoaded } = useSignIn()
-
-        const signInWithEnterpriseSSO = (e: React.FormEvent) => {
-          e.preventDefault()
-
-          if (!isLoaded) return null
-
-          const email = (e.target as HTMLFormElement).email.value
-
-          signIn
-            .authenticateWithRedirect({
-              identifier: email,
-              strategy: 'enterprise_sso',
-              redirectUrl: '/sign-in/sso-callback',
-              redirectUrlComplete: '/',
-            })
-            .then((res) => {
-              console.log(res)
-            })
-            .catch((err: any) => {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.log(err.errors)
-              console.error(err, null, 2)
-            })
-        }
-
-        return (
-          <form onSubmit={(e) => signInWithEnterpriseSSO(e)}>
-            <input id="email" type="email" name="email" placeholder="Enter email address" />
-            <button>Sign in with Enterprise SSO</button>
-          </form>
-        )
+    export default function Page() {
+      const { signIn, fetchStatus } = useSignIn()
+
+      const signInWithEnterpriseSSO = async (formData: FormData) => {
+        const email = formData.get('email') as string
+
+        await signIn.sso({
+          identifier: email,
+          strategy: 'enterprise_sso',
+          // The URL that the user will be redirected to if additional requirements are needed
+          redirectCallbackUrl: '/sign-in',
+          redirectUrl: '/',
+        })
       }
-      ```
 
-      ```jsx {{ filename: 'app/sign-in/sso-callback/page.tsx' }}
-      import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'
-
-      export default function Page() {
-        // Handle the redirect flow by calling the Clerk.handleRedirectCallback() method
-        // or rendering the prebuilt <AuthenticateWithRedirectCallback/> component.
-        // This is the final step in the custom Enterprise SSO flow.
-        return <AuthenticateWithRedirectCallback />
-      }
-      ```
-    </CodeBlockTabs>
+      return (
+        <form action={signInWithEnterpriseSSO}>
+          <input id="email" type="email" name="email" placeholder="Enter email address" />
+          <button type="submit" disabled={fetchStatus === 'fetching'}>
+            Sign in with Enterprise SSO
+          </button>
+        </form>
+      )
+    }
+    ```
   </Tab>
 
   <Tab>
diff --git a/docs/guides/development/custom-flows/authentication/google-one-tap.mdx b/docs/guides/development/custom-flows/authentication/google-one-tap.mdx
index 68b68c93e8..51c267f80e 100644
--- a/docs/guides/development/custom-flows/authentication/google-one-tap.mdx
+++ b/docs/guides/development/custom-flows/authentication/google-one-tap.mdx
@@ -1,6 +1,7 @@
 ---
 title: Build a custom Google One Tap authentication flow
 description: Learn how to build a custom Google One Tap authentication flow using the Clerk API.
+sdk: nextjs, react, react-router, tanstack-react-start
 ---
 
 <Include src="_partials/custom-flows-callout" />
diff --git a/docs/guides/development/custom-flows/authentication/legacy/application-invitations.mdx b/docs/guides/development/custom-flows/authentication/legacy/application-invitations.mdx
new file mode 100644
index 0000000000..130aa4aa78
--- /dev/null
+++ b/docs/guides/development/custom-flows/authentication/legacy/application-invitations.mdx
@@ -0,0 +1,254 @@
+---
+title: Sign-up with application invitations
+description: Learn how to use the Clerk API to build a custom flow for handling application invitations.
+---
+
+<Include src="_partials/custom-flows-callout" />
+
+When a user visits an [invitation](/docs/guides/users/inviting) link, Clerk first checks whether a custom redirect URL was provided.
+
+**If no redirect URL is specified**, the user will be redirected to the appropriate Account Portal page (either [sign-up](/docs/guides/customizing-clerk/account-portal#sign-up) or [sign-in](/docs/guides/customizing-clerk/account-portal#sign-in)), or to the custom sign-up/sign-in pages that you've configured for your application.
+
+**If you specified [a redirect URL when creating the invitation](/docs/guides/users/inviting#redirect-url)**, you must handle the authentication flows in your code for that page. You can either embed the [`<SignIn />`](/docs/reference/components/authentication/sign-in) component on that page, or if the prebuilt component doesn't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API.
+
+This guide demonstrates how to use Clerk's API to build a custom flow for accepting application invitations.
+
+## Build the custom flow
+
+Once the user visits the invitation link and is redirected to the specified URL, the query parameter `__clerk_ticket` will be appended to the URL. This query parameter contains the invitation token.
+
+For example, if the redirect URL was `https://www.example.com/accept-invitation`, the URL that the user would be redirected to would be `https://www.example.com/accept-invitation?__clerk_ticket=.....`.
+
+To create a sign-up flow using the invitation token, you need to extract the token from the URL and pass it to the [`signUp.create()`](/docs/reference/javascript/sign-up#create) method, as shown in the following example. The following example also demonstrates how to collect additional user information for the sign-up; you can either remove these fields or adjust them to fit your application.
+
+<Tabs items={["Next.js", "JavaScript"]}>
+  <Tab>
+    ```tsx {{ filename: 'app/accept-invitation/page.tsx', collapsible: true }}
+    'use client'
+
+    import * as React from 'react'
+    import { useSignUp, useUser } from '@clerk/nextjs'
+    import { useSearchParams, useRouter } from 'next/navigation'
+
+    export default function Page() {
+      const { isSignedIn, user } = useUser()
+      const router = useRouter()
+      const { isLoaded, signUp, setActive } = useSignUp()
+      const [firstName, setFirstName] = React.useState('')
+      const [lastName, setLastName] = React.useState('')
+      const [password, setPassword] = React.useState('')
+
+      // Handle signed-in users visiting this page
+      // This will also redirect the user once they finish the sign-up process
+      React.useEffect(() => {
+        if (isSignedIn) {
+          router.push('/')
+        }
+      }, [isSignedIn])
+
+      // Get the token from the query params
+      const token = useSearchParams().get('__clerk_ticket')
+
+      // If there is no invitation token, restrict access to this page
+      if (!token) {
+        return <p>No invitation token found.</p>
+      }
+
+      // Handle submission of the sign-up form
+      const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+
+        if (!isLoaded) return
+
+        try {
+          if (!token) return null
+
+          // Create a new sign-up with the supplied invitation token.
+          // Make sure you're also passing the ticket strategy.
+          // After the below call, the user's email address will be
+          // automatically verified because of the invitation token.
+          const signUpAttempt = await signUp.create({
+            strategy: 'ticket',
+            ticket: token,
+            firstName,
+            lastName,
+            password,
+          })
+
+          // If the sign-up was completed, set the session to active
+          if (signUpAttempt.status === 'complete') {
+            await setActive({ session: signUpAttempt.createdSessionId })
+          } else {
+            // If the sign-up status is not complete, check why. User may need to
+            // complete further steps.
+            console.error(JSON.stringify(signUpAttempt, null, 2))
+          }
+        } catch (err) {
+          console.error(JSON.stringify(err, null, 2))
+        }
+      }
+
+      return (
+        <>
+          <h1>Sign up</h1>
+          <form onSubmit={handleSubmit}>
+            <div>
+              <label htmlFor="firstName">Enter first name</label>
+              <input
+                id="firstName"
+                type="text"
+                name="firstName"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+              />
+            </div>
+            <div>
+              <label htmlFor="lastName">Enter last name</label>
+              <input
+                id="lastName"
+                type="text"
+                name="lastName"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+              />
+            </div>
+            <div>
+              <label htmlFor="password">Enter password</label>
+              <input
+                id="password"
+                type="password"
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+            <div id="clerk-captcha" />
+            <div>
+              <button type="submit">Next</button>
+            </div>
+          </form>
+        </>
+      )
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    <CodeBlockTabs options={["index.html", "main.js"]}>
+      ```html {{ filename: 'index.html', collapsible: true }}
+      <!doctype html>
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <title>Clerk + JavaScript App</title>
+        </head>
+        <body>
+          <div id="signed-in"></div>
+
+          <div id="task"></div>
+
+          <div id="sign-up">
+            <h2>Sign up</h2>
+            <form id="sign-up-form">
+              <label for="firstName">Enter first name</label>
+              <input name="firstName" id="firstName" />
+              <label for="lastName">Enter last name</label>
+              <input name="lastName" id="lastName" />
+              <label for="password">Enter password</label>
+              <input name="password" id="password" />
+              <button type="submit">Continue</button>
+            </form>
+          </div>
+
+          <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
+        </body>
+      </html>
+      ```
+
+      ```js {{ filename: 'main.js', collapsible: true }}
+      import { Clerk } from '@clerk/clerk-js'
+
+      const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+      const clerk = new Clerk(pubKey)
+      await clerk.load()
+
+      if (clerk.isSignedIn) {
+        // Mount user button component
+        document.getElementById('signed-in').innerHTML = `
+          <div id="user-button"></div>
+        `
+
+        const userbuttonDiv = document.getElementById('user-button')
+
+        clerk.mountUserButton(userbuttonDiv)
+      } else if (clerk.session.currentTask) {
+        // Check for pending tasks and display custom UI to help users resolve them
+        // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+        switch (clerk.session.currentTask.key) {
+          case 'choose-organization': {
+            document.getElementById('app').innerHTML = `
+                    <div id="task"></div>
+                  `
+
+            const taskDiv = document.getElementById('task')
+
+            clerk.mountTaskChooseOrganization(taskDiv)
+          }
+        }
+      } else {
+        // Get the token from the query parameter
+        const param = '__clerk_ticket'
+        const token = new URL(window.location.href).searchParams.get(param)
+
+        // Handle the sign-up form
+        document.getElementById('sign-up-form').addEventListener('submit', async (e) => {
+          e.preventDefault()
+
+          const formData = new FormData(e.target)
+          const firstName = formData.get('firstName')
+          const lastName = formData.get('lastName')
+          const password = formData.get('password')
+
+          try {
+            // Start the sign-up process using the ticket method
+            const signUpAttempt = await clerk.client.signUp.create({
+              strategy: 'ticket',
+              ticket: token,
+              firstName,
+              lastName,
+              password,
+            })
+
+            // If sign-up was successful, set the session to active
+            if (signUpAttempt.status === 'complete') {
+              await clerk.setActive({
+                session: signUpAttempt.createdSessionId,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  await router.push('/')
+                },
+              })
+            } 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/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error(JSON.stringify(err, null, 2))
+          }
+        })
+      }
+      ```
+    </CodeBlockTabs>
+  </Tab>
+</Tabs>
diff --git a/docs/guides/development/custom-flows/authentication/legacy/email-links.mdx b/docs/guides/development/custom-flows/authentication/legacy/email-links.mdx
new file mode 100644
index 0000000000..3169935987
--- /dev/null
+++ b/docs/guides/development/custom-flows/authentication/legacy/email-links.mdx
@@ -0,0 +1,515 @@
+---
+title: Build a custom flow for handling email links
+description: Learn how to build a custom flow using Clerk's API to handle email links for sign-up, sign-in, and email address verification.
+---
+
+<Include src="_partials/custom-flows-callout" />
+
+<If sdk="expo">
+  > [!WARNING]
+  > Expo does not support email links. You can request this feature on [Clerk's roadmap](https://feedback.clerk.com/).
+</If>
+
+[Email links](/docs/guides/configure/auth-strategies/sign-up-sign-in-options) can be used to sign up new users, sign in existing users, or allow existing users to verify newly added email addresses to their user profiles.
+
+The email link flow works as follows:
+
+1. The user enters their email address and asks for an email link.
+1. Clerk sends an email to the user, containing a link to the verification URL.
+1. The user visits the email link, either on the same device where they entered their email address or on a different device, depending on the settings in the Clerk Dashboard.
+1. Clerk verifies the user's identity and advances any sign-up or sign-in attempt that might be in progress.
+1. If the verification is successful, the user is authenticated or their email address is verified, depending on the reason for the email link.
+
+This guide demonstrates how to use Clerk's API to build a custom flow for handling email links. It covers the following scenarios:
+
+- [Sign up](#sign-up-flow)
+- [Sign in](#sign-in-flow)
+- [Verify a new email address](#add-new-email-flow)
+
+<Steps>
+  ## Enable email link authentication
+
+  To allow your users to sign up or sign in using email links, you must first configure the appropriate settings in the Clerk Dashboard.
+
+  1. In the Clerk Dashboard, navigate to the [**User & authentication**](https://dashboard.clerk.com/last-active?path=user-authentication/user-and-authentication) page.
+  1. Enable **Verify at sign-up**, and under **Verification methods**, enable **Email verification link**.
+  1. Enable **Sign-in with email**. Because this guide focuses on email links, disable **Email verification code** and enable **Email verification link**. By default, **Require the same device and browser** is enabled, which means that email links are required to be verified from the same device and browser on which the sign-up or sign-in was initiated. For this guide, leave this setting enabled.
+
+  ## Sign-up flow
+
+  1. The [`useSignUp()`](/docs/reference/hooks/use-sign-up) hook is used to get the [`SignUp`](/docs/reference/javascript/sign-up) object.
+  1. The `SignUp` object is used to access the [`createEmailLinkFlow()`](/docs/reference/javascript/types/email-address#create-email-link-flow) method.
+  1. The `createEmailLinkFlow()` method is used to access the `startEmailLinkFlow()` method.
+  1. The `startEmailLinkFlow()` method is called with the `redirectUrl` parameter set to `/sign-up/verify`. It sends an email with a verification link to the user. When the user visits the link, they are redirected to the URL that was provided.
+  1. On the `/sign-up/verify` page, the [`useClerk()`](/docs/reference/hooks/use-clerk) hook is used to get the [`handleEmailLinkVerification()`](/docs/reference/javascript/clerk#handle-email-link-verification) method.
+  1. The `handleEmailLinkVerification()` method is called to verify the email address. Error handling is included to handle any errors that occur during the verification process.
+
+  <Tabs items={["Next.js"]}>
+    <Tab>
+      <CodeBlockTabs options={["Sign up page", "Verify page"]}>
+        ```tsx {{ filename: 'app/sign-up/page.tsx', collapsible: true }}
+        'use client'
+
+        import * as React from 'react'
+        import { useSignUp } from '@clerk/nextjs'
+
+        export default function SignInPage() {
+          const [emailAddress, setEmailAddress] = React.useState('')
+          const [verified, setVerified] = React.useState(false)
+          const [verifying, setVerifying] = React.useState(false)
+          const [error, setError] = React.useState('')
+          const { signUp, isLoaded } = useSignUp()
+
+          if (!isLoaded) return null
+
+          const { startEmailLinkFlow } = signUp.createEmailLinkFlow()
+
+          async function submit(e: React.FormEvent) {
+            e.preventDefault()
+            // Reset states in case user resubmits form mid sign-up
+            setVerified(false)
+            setError('')
+
+            setVerifying(true)
+
+            if (!isLoaded && !signUp) return null
+
+            // Start the sign-up process using the email provided
+            try {
+              await signUp.create({
+                emailAddress,
+              })
+
+              // Dynamically set the host domain for dev and prod
+              // You could instead use an environment variable or other source for the host domain
+              const protocol = window.location.protocol
+              const host = window.location.host
+
+              // Send the user an email with the email link
+              const signUpAttempt = await startEmailLinkFlow({
+                // URL to navigate to after the user visits the link in their email
+                redirectUrl: `${protocol}//${host}/sign-up/verify`,
+              })
+
+              // Check the verification result
+              const verification = signUpAttempt.verifications.emailAddress
+
+              // Handle if user visited the link and completed sign-up from /sign-up/verify
+              if (verification.verifiedFromTheSameClient()) {
+                setVerifying(false)
+                setVerified(true)
+              }
+            } catch (err: any) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(JSON.stringify(err, null, 2))
+
+              if (err.errors?.[0]?.longMessage) {
+                console.log('Clerk error:', err.errors[0].longMessage)
+                setError(err.errors[0].longMessage)
+              } else {
+                setError('An error occurred.')
+              }
+            }
+          }
+
+          async function reset(e: React.FormEvent) {
+            e.preventDefault()
+            setVerifying(false)
+          }
+
+          if (error) {
+            return (
+              <div>
+                <p>Error: {error}</p>
+                <button onClick={() => setError('')}>Try again</button>
+              </div>
+            )
+          }
+
+          if (verifying) {
+            return (
+              <div>
+                <p>Check your email and visit the link that was sent to you.</p>
+                <form onSubmit={reset}>
+                  <button type="submit">Restart</button>
+                </form>
+              </div>
+            )
+          }
+
+          if (verified) {
+            return <div>Signed up successfully!</div>
+          }
+
+          return (
+            <div>
+              <h1>Sign up</h1>
+              <form onSubmit={submit}>
+                <input
+                  type="email"
+                  placeholder="Enter email address"
+                  value={emailAddress}
+                  onChange={(e) => setEmailAddress(e.target.value)}
+                />
+                <button type="submit">Continue</button>
+              </form>
+            </div>
+          )
+        }
+        ```
+
+        ```tsx {{ filename: 'app/sign-up/verify/page.tsx', collapsible: true }}
+        'use client'
+
+        import * as React from 'react'
+        import { useClerk } from '@clerk/nextjs'
+        import { EmailLinkErrorCodeStatus, isEmailLinkError } from '@clerk/nextjs/errors'
+        import Link from 'next/link'
+
+        export default function VerifyEmailLink() {
+          const [verificationStatus, setVerificationStatus] = React.useState('loading')
+
+          const { handleEmailLinkVerification, loaded } = useClerk()
+
+          async function verify() {
+            try {
+              // Dynamically set the host domain for dev and prod
+              // You could instead use an environment variable or other source for the host domain
+              const protocol = window.location.protocol
+              const host = window.location.host
+
+              await handleEmailLinkVerification({
+                // URL to navigate to if sign-up flow needs more requirements, such as MFA
+                redirectUrl: `${protocol}//${host}/sign-up`,
+              })
+
+              // If not redirected at this point,
+              // the flow has completed
+              setVerificationStatus('verified')
+            } catch (err: any) {
+              let status = 'failed'
+
+              if (isEmailLinkError(err)) {
+                // If link expired, set status to expired
+                if (err.code === EmailLinkErrorCodeStatus.Expired) {
+                  status = 'expired'
+                } else if (err.code === EmailLinkErrorCodeStatus.ClientMismatch) {
+                  // OPTIONAL: This check is only required if you have
+                  // the 'Require the same device and browser' setting
+                  // enabled in the Clerk Dashboard
+                  status = 'client_mismatch'
+                }
+              }
+
+              setVerificationStatus(status)
+            }
+          }
+
+          React.useEffect(() => {
+            if (!loaded) return
+
+            verify()
+          }, [handleEmailLinkVerification, loaded])
+
+          if (verificationStatus === 'loading') {
+            return <div>Loading...</div>
+          }
+
+          if (verificationStatus === 'failed') {
+            return (
+              <div>
+                <h1>Verify your email</h1>
+                <p>The email link verification failed.</p>
+                <Link href="/sign-up">Sign up</Link>
+              </div>
+            )
+          }
+
+          if (verificationStatus === 'expired') {
+            return (
+              <div>
+                <h1>Verify your email</h1>
+                <p>The email link has expired.</p>
+                <Link href="/sign-up">Sign up</Link>
+              </div>
+            )
+          }
+
+          // OPTIONAL: This check is only required if you have
+          // the 'Require the same device and browser' setting
+          // enabled in the Clerk Dashboard
+          if (verificationStatus === 'client_mismatch') {
+            return (
+              <div>
+                <h1>Verify your email</h1>
+                <p>
+                  You must complete the email link sign-up on the same device and browser that you started
+                  it on.
+                </p>
+                <Link href="/sign-up">Sign up</Link>
+              </div>
+            )
+          }
+
+          return (
+            <div>
+              <h1>Verify your email</h1>
+              <p>Successfully signed up. Return to the original tab to continue.</p>
+            </div>
+          )
+        }
+        ```
+      </CodeBlockTabs>
+    </Tab>
+  </Tabs>
+
+  ## Sign-in flow
+
+  1. The [`useSignIn()`](/docs/reference/hooks/use-sign-in) hook is used to get the [`SignIn`](/docs/reference/javascript/sign-in) object.
+  1. The `SignIn` object is used to access the [`createEmailLinkFlow()`](/docs/reference/javascript/types/email-address#create-email-link-flow) method.
+  1. The `createEmailLinkFlow()` method is used to access the `startEmailLinkFlow()` method.
+  1. The `startEmailLinkFlow()` method is called with the `redirectUrl` parameter set to `/sign-in/verify`. It sends an email with a verification link to the user. When the user visits the link, they are redirected to the URL that was provided.
+  1. On the `/sign-in/verify` page, the [`useClerk()`](/docs/reference/hooks/use-clerk) hook is used to get the [`handleEmailLinkVerification()`](/docs/reference/javascript/clerk#handle-email-link-verification) method.
+  1. The `handleEmailLinkVerification()` method is called to verify the email address. Error handling is included to handle any errors that occur during the verification process.
+
+  <Tabs items={["Next.js"]}>
+    <Tab>
+      <CodeBlockTabs options={["Sign in page", "Verify page"]}>
+        ```tsx {{ filename: 'app/sign-in/page.tsx', collapsible: true }}
+        'use client'
+
+        import * as React from 'react'
+        import { useSignIn } from '@clerk/nextjs'
+        import { EmailLinkFactor, SignInFirstFactor } from '@clerk/types'
+
+        export default function SignInPage() {
+          const [emailAddress, setEmailAddress] = React.useState('')
+          const [verified, setVerified] = React.useState(false)
+          const [verifying, setVerifying] = React.useState(false)
+          const [error, setError] = React.useState('')
+          const { signIn, isLoaded } = useSignIn()
+
+          if (!isLoaded) return null
+
+          const { startEmailLinkFlow } = signIn.createEmailLinkFlow()
+
+          async function submit(e: React.FormEvent) {
+            e.preventDefault()
+            // Reset states in case user resubmits form mid sign-in
+            setVerified(false)
+            setError('')
+
+            if (!isLoaded && !signIn) return null
+
+            // Start the sign-in process using the email provided
+            try {
+              const { supportedFirstFactors } = await signIn.create({
+                identifier: emailAddress,
+              })
+
+              setVerifying(true)
+
+              // Filter the returned array to find the 'email_link' entry
+              const isEmailLinkFactor = (factor: SignInFirstFactor): factor is EmailLinkFactor => {
+                return factor.strategy === 'email_link'
+              }
+              const emailLinkFactor = supportedFirstFactors?.find(isEmailLinkFactor)
+
+              if (!emailLinkFactor) {
+                setError('Email link factor not found')
+                return
+              }
+
+              const { emailAddressId } = emailLinkFactor
+
+              // Dynamically set the host domain for dev and prod
+              // You could instead use an environment variable or other source for the host domain
+              const protocol = window.location.protocol
+              const host = window.location.host
+
+              // Send the user an email with the email link
+              const signInAttempt = await startEmailLinkFlow({
+                emailAddressId,
+                redirectUrl: `${protocol}//${host}/sign-in/verify`,
+              })
+
+              // Check the verification result
+              const verification = signInAttempt.firstFactorVerification
+
+              // Handle if verification expired
+              if (verification.status === 'expired') {
+                setError('The email link has expired.')
+              }
+
+              // Handle if user visited the link and completed sign-in from /sign-in/verify
+              if (verification.verifiedFromTheSameClient()) {
+                setVerifying(false)
+                setVerified(true)
+              }
+            } catch (err: any) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(JSON.stringify(err, null, 2))
+              setError('An error occurred.')
+            }
+          }
+
+          async function reset(e: React.FormEvent) {
+            e.preventDefault()
+            setVerifying(false)
+          }
+
+          if (error) {
+            return (
+              <div>
+                <p>Error: {error}</p>
+                <button onClick={() => setError('')}>Try again</button>
+              </div>
+            )
+          }
+
+          if (verifying) {
+            return (
+              <div>
+                <p>Check your email and visit the link that was sent to you.</p>
+                <form onSubmit={reset}>
+                  <button type="submit">Restart</button>
+                </form>
+              </div>
+            )
+          }
+
+          if (verified) {
+            return <div>Signed in successfully!</div>
+          }
+
+          return (
+            <div>
+              <h1>Sign in</h1>
+              <form onSubmit={submit}>
+                <input
+                  type="email"
+                  placeholder="Enter email address"
+                  value={emailAddress}
+                  onChange={(e) => setEmailAddress(e.target.value)}
+                />
+                <button type="submit">Continue</button>
+              </form>
+            </div>
+          )
+        }
+        ```
+
+        ```tsx {{ filename: 'app/sign-in/verify/page.tsx', collapsible: true }}
+        'use client'
+
+        import * as React from 'react'
+        import { useClerk } from '@clerk/nextjs'
+        import { EmailLinkErrorCodeStatus, isEmailLinkError } from '@clerk/nextjs/errors'
+        import Link from 'next/link'
+
+        export default function VerifyEmailLink() {
+          const [verificationStatus, setVerificationStatus] = React.useState('loading')
+
+          const { handleEmailLinkVerification, loaded } = useClerk()
+
+          async function verify() {
+            try {
+              // Dynamically set the host domain for dev and prod
+              // You could instead use an environment variable or other source for the host domain
+              const protocol = window.location.protocol
+              const host = window.location.host
+
+              await handleEmailLinkVerification({
+                // URL to navigate to if sign-in flow needs more requirements, such as MFA
+                redirectUrl: `${protocol}//${host}/sign-in`,
+              })
+
+              // If not redirected at this point,
+              // the flow has completed
+              setVerificationStatus('verified')
+            } catch (err: any) {
+              let status = 'failed'
+
+              if (isEmailLinkError(err)) {
+                // If link expired, set status to expired
+                if (err.code === EmailLinkErrorCodeStatus.Expired) {
+                  status = 'expired'
+                } else if (err.code === EmailLinkErrorCodeStatus.ClientMismatch) {
+                  // OPTIONAL: This check is only required if you have
+                  // the 'Require the same device and browser' setting
+                  // enabled in the Clerk Dashboard
+                  status = 'client_mismatch'
+                }
+              }
+
+              setVerificationStatus(status)
+              return
+            }
+          }
+
+          React.useEffect(() => {
+            if (!loaded) return
+
+            verify()
+          }, [handleEmailLinkVerification, loaded])
+
+          if (verificationStatus === 'loading') {
+            return <div>Loading...</div>
+          }
+
+          if (verificationStatus === 'failed') {
+            return (
+              <div>
+                <h1>Verify your email</h1>
+                <p>The email link verification failed.</p>
+                <Link href="/sign-in">Sign in</Link>
+              </div>
+            )
+          }
+
+          if (verificationStatus === 'expired') {
+            return (
+              <div>
+                <h1>Verify your email</h1>
+                <p>The email link has expired.</p>
+                <Link href="/sign-in">Sign in</Link>
+              </div>
+            )
+          }
+
+          // OPTIONAL: This check is only required if you have
+          // the 'Require the same device and browser' setting
+          // enabled in the Clerk Dashboard
+          if (verificationStatus === 'client_mismatch') {
+            return (
+              <div>
+                <h1>Verify your email</h1>
+                <p>
+                  You must complete the email link sign-in on the same device and browser as you started it
+                  on.
+                </p>
+                <Link href="/sign-in">Sign in</Link>
+              </div>
+            )
+          }
+
+          return (
+            <div>
+              <h1>Verify your email</h1>
+              <p>Successfully signed in. Return to the original tab to continue.</p>
+            </div>
+          )
+        }
+        ```
+      </CodeBlockTabs>
+    </Tab>
+  </Tabs>
+
+  ## Add new email flow
+
+  When a user adds an email address to their account, you can use email links to verify the email address.
+
+  <Include src="_partials/custom-flows/email-link-verification" />
+</Steps>
diff --git a/docs/guides/development/custom-flows/authentication/legacy/email-password-mfa.mdx b/docs/guides/development/custom-flows/authentication/legacy/email-password-mfa.mdx
new file mode 100644
index 0000000000..51d2933608
--- /dev/null
+++ b/docs/guides/development/custom-flows/authentication/legacy/email-password-mfa.mdx
@@ -0,0 +1,734 @@
+---
+title: Build a custom sign-in flow with multi-factor authentication
+description: Learn how to build a custom email/password sign-in flow that requires multi-factor authentication (MFA).
+---
+
+<Include src="_partials/custom-flows-callout" />
+
+[Multi-factor verification (MFA)](/docs/guides/configure/auth-strategies/sign-up-sign-in-options) is an added layer of security that requires users to provide a second verification factor to access an account.
+
+Clerk supports second factor verification through **SMS verification code**, **Authenticator application**, and **Backup codes**.
+
+This guide will walk you through how to build a custom email/password sign-in flow that supports **Authenticator application** and **Backup codes** as the second factor.
+
+<Steps>
+  ## Enable email and password
+
+  This guide uses email and password to sign in, however, you can modify this approach according to the needs of your application.
+
+  To follow this guide, you first need to ensure email and password are enabled for your application.
+
+  1. In the Clerk Dashboard, navigate to the [**User & authentication**](https://dashboard.clerk.com/last-active?path=user-authentication/user-and-authentication) page.
+  1. Enable **Sign-in with email**.
+  1. Select the **Password** tab and enable **Sign-up with password**. Leave **Require a password at sign-up** enabled.
+
+  ## Enable multi-factor authentication
+
+  For your users to be able to enable MFA for their account, you need to enable MFA for your application.
+
+  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
+
+  Signing in to an MFA-enabled account is identical to the regular sign-in process. However, in the case of an MFA-enabled account, a sign-in won't convert until both first factor and second factor verifications are completed.
+
+  To authenticate a user using their email and password, you need to:
+
+  1. Initiate the sign-in process by collecting the user's email address and password.
+  1. Prepare the first factor verification.
+  1. Attempt to complete the first factor verification.
+  1. Prepare the second factor verification. (This is where MFA comes into play.)
+  1. Attempt to complete the second factor verification.
+  1. If the verification is successful, set the newly created session as the active session.
+
+  > [!TIP]
+  > For this example to work, the user must have MFA enabled on their account. You need to add the ability for your users to manage their MFA settings. See the [manage SMS-based MFA](/docs/guides/development/custom-flows/account-updates/manage-sms-based-mfa) or the [manage TOTP-based MFA](/docs/guides/development/custom-flows/account-updates/manage-totp-based-mfa) guide, depending on your needs.
+
+  <Tabs items={["Next.js", "JavaScript", "Expo", "iOS", "Android"]}>
+    <Tab>
+      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+      'use client'
+
+      import * as React from 'react'
+      import { useSignIn } from '@clerk/nextjs'
+      import { useRouter } from 'next/navigation'
+
+      export default function SignInForm() {
+        const { isLoaded, signIn, setActive } = useSignIn()
+        const [email, setEmail] = React.useState('')
+        const [password, setPassword] = React.useState('')
+        const [code, setCode] = React.useState('')
+        const [useBackupCode, setUseBackupCode] = React.useState(false)
+        const [displayTOTP, setDisplayTOTP] = React.useState(false)
+        const router = useRouter()
+
+        // Handle user submitting email and pass and swapping to TOTP form
+        const handleFirstStage = (e: React.FormEvent) => {
+          e.preventDefault()
+          setDisplayTOTP(true)
+        }
+
+        // Handle the submission of the TOTP of Backup Code submission
+        const handleSubmit = async (e: React.FormEvent) => {
+          e.preventDefault()
+
+          if (!isLoaded) return
+
+          // Start the sign-in process using the email and password provided
+          try {
+            await signIn.create({
+              identifier: email,
+              password,
+            })
+
+            // Attempt the TOTP or backup code verification
+            const signInAttempt = await signIn.attemptSecondFactor({
+              strategy: useBackupCode ? 'backup_code' : 'totp',
+              code: code,
+            })
+
+            // If verification was completed, set the session to active
+            // and redirect the user
+            if (signInAttempt.status === 'complete') {
+              await setActive({
+                session: signInAttempt.createdSessionId,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  await router.push('/')
+                },
+              })
+            } else {
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              console.log(signInAttempt)
+            }
+          } catch (err) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error('Error:', JSON.stringify(err, null, 2))
+          }
+        }
+
+        if (displayTOTP) {
+          return (
+            <div>
+              <h1>Verify your account</h1>
+              <form onSubmit={(e) => handleSubmit(e)}>
+                <div>
+                  <label htmlFor="code">Code</label>
+                  <input
+                    onChange={(e) => setCode(e.target.value)}
+                    id="code"
+                    name="code"
+                    type="text"
+                    value={code}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="backupcode">This code is a backup code</label>
+                  <input
+                    onChange={() => setUseBackupCode((prev) => !prev)}
+                    id="backupcode"
+                    name="backupcode"
+                    type="checkbox"
+                    checked={useBackupCode}
+                  />
+                </div>
+                <button type="submit">Verify</button>
+              </form>
+            </div>
+          )
+        }
+
+        return (
+          <>
+            <h1>Sign in</h1>
+            <form onSubmit={(e) => handleFirstStage(e)}>
+              <div>
+                <label htmlFor="email">Email</label>
+                <input
+                  onChange={(e) => setEmail(e.target.value)}
+                  id="email"
+                  name="email"
+                  type="email"
+                  value={email}
+                />
+              </div>
+              <div>
+                <label htmlFor="password">Password</label>
+                <input
+                  onChange={(e) => setPassword(e.target.value)}
+                  id="password"
+                  name="password"
+                  type="password"
+                  value={password}
+                />
+              </div>
+              <button type="submit" disabled={!email.trim() || !password.trim()}>
+                Continue
+              </button>
+            </form>
+          </>
+        )
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      <CodeBlockTabs options={["index.html", "main.js"]}>
+        ```html {{ filename: 'index.html', collapsible: true }}
+        <!doctype html>
+        <html lang="en">
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <title>Clerk + JavaScript App</title>
+          </head>
+          <body>
+            <div id="signed-in"></div>
+
+            <div id="task"></div>
+
+            <div id="sign-in">
+              <h2>Sign in</h2>
+              <form id="sign-in-form">
+                <label for="email">Enter email address</label>
+                <input name="email" id="sign-in-email" />
+                <label for="password">Enter password</label>
+                <input name="password" id="sign-in-password" />
+                <button type="submit">Continue</button>
+              </form>
+            </div>
+
+            <form id="verifying" hidden>
+              <h2>Verify your account</h2>
+              <label for="totp">Enter your code</label>
+              <input id="totp" name="code" />
+              <label for="backupCode">This code is a backup code</label>
+              <input type="checkbox" id="backupCode" name="backupCode" />
+              <button type="submit" id="verify-button">Verify</button>
+            </form>
+
+            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
+          </body>
+        </html>
+        ```
+
+        ```js {{ filename: 'main.js', collapsible: true }}
+        import { Clerk } from '@clerk/clerk-js'
+
+        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+        const clerk = new Clerk(pubKey)
+        await clerk.load()
+
+        if (clerk.isSignedIn) {
+          // Mount user button component
+          document.getElementById('signed-in').innerHTML = `
+            <div id="user-button"></div>
+          `
+
+          const userbuttonDiv = document.getElementById('user-button')
+
+          clerk.mountUserButton(userbuttonDiv)
+        } else if (clerk.session?.currentTask) {
+          // Check for pending tasks and display custom UI to help users resolve them
+          // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+          switch (clerk.session.currentTask.key) {
+            case 'choose-organization': {
+              document.getElementById('app').innerHTML = `
+                    <div id="task"></div>
+                  `
+
+              const taskDiv = document.getElementById('task')
+
+              clerk.mountTaskChooseOrganization(taskDiv)
+            }
+          }
+        } else {
+          // Handle the sign-in form
+          document.getElementById('sign-in-form').addEventListener('submit', async (e) => {
+            e.preventDefault()
+
+            const formData = new FormData(e.target)
+            const emailAddress = formData.get('email')
+            const password = formData.get('password')
+
+            try {
+              // Start the sign-in process
+              await clerk.client.signIn.create({
+                identifier: emailAddress,
+                password,
+              })
+
+              // Hide sign-in form
+              document.getElementById('sign-in').setAttribute('hidden', '')
+              // Show verification form
+              document.getElementById('verifying').removeAttribute('hidden')
+            } catch (error) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(error)
+            }
+          })
+
+          // Handle the verification form
+          document.getElementById('verifying').addEventListener('submit', async (e) => {
+            const formData = new FormData(e.target)
+            const totp = formData.get('totp')
+            const backupCode = formData.get('backupCode')
+
+            try {
+              const useBackupCode = backupCode ? true : false
+              const code = backupCode ? backupCode : totp
+
+              // Attempt the TOTP or backup code verification
+              const signInAttempt = await clerk.client.signIn.attemptSecondFactor({
+                strategy: useBackupCode ? 'backup_code' : 'totp',
+                code: code,
+              })
+
+              // If verification was completed, set the session to active
+              // and redirect the user
+              if (signInAttempt.status === 'complete') {
+                await clerk.setActive({ session: signInAttempt.createdSessionId })
+
+                location.reload()
+              } else {
+                // If the status is not complete, check why. User may need to
+                // complete further steps.
+                console.error(signInAttempt)
+              }
+            } catch (error) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(error)
+            }
+          })
+        }
+        ```
+      </CodeBlockTabs>
+    </Tab>
+
+    <Tab>
+      ### Before you start
+
+      Install `expo-checkbox` for the UI.
+
+      <CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
+        ```bash {{ filename: 'terminal' }}
+        npm install expo-checkbox
+        ```
+
+        ```bash {{ filename: 'terminal' }}
+        yarn add expo-checkbox
+        ```
+
+        ```bash {{ filename: 'terminal' }}
+        pnpm add expo-checkbox
+        ```
+
+        ```bash {{ filename: 'terminal' }}
+        bun add expo-checkbox
+        ```
+      </CodeBlockTabs>
+
+      ### Build the 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/reference/hooks/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.
+
+      ```tsx {{ filename: 'app/(auth)/_layout.tsx' }}
+      import { Redirect, Stack } from 'expo-router'
+      import { useAuth } from '@clerk/clerk-expo'
+
+      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/reference/hooks/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, Button, View } from 'react-native'
+      import Checkbox from 'expo-checkbox'
+
+      export default function Page() {
+        const { signIn, setActive, isLoaded } = useSignIn()
+
+        const [email, setEmail] = React.useState('')
+        const [password, setPassword] = React.useState('')
+        const [code, setCode] = React.useState('')
+        const [useBackupCode, setUseBackupCode] = React.useState(false)
+        const [displayTOTP, setDisplayTOTP] = React.useState(false)
+        const router = useRouter()
+
+        // Handle user submitting email and pass and swapping to TOTP form
+        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,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  await router.push('/')
+                },
+              })
+            } 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) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error(JSON.stringify(err, null, 2))
+          }
+        }
+
+        // Handle the submission of the TOTP or backup code
+        const onPressTOTP = React.useCallback(async () => {
+          if (!isLoaded) return
+
+          try {
+            // Attempt the TOTP or backup code verification
+            const attemptSecondFactor = await signIn.attemptSecondFactor({
+              strategy: useBackupCode ? 'backup_code' : 'totp',
+              code: code,
+            })
+
+            // If verification was completed, set the session to active
+            // and redirect the user
+            if (attemptSecondFactor.status === 'complete') {
+              await setActive({
+                session: attemptSecondFactor.createdSessionId,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  await router.push('/')
+                },
+              })
+            } 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) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error(JSON.stringify(err, null, 2))
+          }
+        }, [isLoaded, email, password, code, useBackupCode])
+
+        if (displayTOTP) {
+          return (
+            <View>
+              <Text>Verify your account</Text>
+
+              <View>
+                <TextInput
+                  value={code}
+                  placeholder="Enter the code"
+                  placeholderTextColor="#666666"
+                  onChangeText={(c) => setCode(c)}
+                />
+              </View>
+              <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>
+              <Button title="Verify" onPress={onPressTOTP} />
+            </View>
+          )
+        }
+
+        return (
+          <View>
+            <Text>Sign in</Text>
+            <View>
+              <TextInput
+                value={email}
+                placeholder="Enter email"
+                placeholderTextColor="#666666"
+                onChangeText={(email) => setEmail(email)}
+              />
+            </View>
+
+            <View>
+              <TextInput
+                value={password}
+                placeholder="Enter password"
+                placeholderTextColor="#666666"
+                secureTextEntry={true}
+                onChangeText={(password) => setPassword(password)}
+              />
+            </View>
+
+            <Button title="Continue" onPress={handleFirstStage} />
+          </View>
+        )
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      ```swift {{ filename: 'MFASignInView.swift', collapsible: true }}
+      import SwiftUI
+      import Clerk
+
+      struct MFASignInView: View {
+        @State private var email = ""
+        @State private var password = ""
+        @State private var code = ""
+        @State private var displayTOTP = false
+
+        var body: some View {
+          if displayTOTP {
+            TextField("Code", text: $code)
+            Button("Verify") {
+              Task { await verify(code: code) }
+            }
+          } else {
+            TextField("Email", text: $email)
+            SecureField("Password", text: $password)
+            Button("Next") {
+              Task { await submit(email: email, password: password) }
+            }
+          }
+        }
+      }
+
+      extension MFASignInView {
+
+        func submit(email: String, password: String) async {
+          do {
+            // Start the sign-in process.
+            let signIn = try await SignIn.create(strategy: .identifier(email, password: password))
+
+            switch signIn.status {
+            case .needsSecondFactor:
+              // Handle user submitting email and password and swapping to TOTP form.
+              displayTOTP = true
+            default:
+              // If the status is not needsSecondFactor, check why. User may need to
+              // complete different steps.
+              dump(signIn.status)
+            }
+          } catch {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            dump(error)
+          }
+        }
+
+        func verify(code: String) async {
+          do {
+            // Access the in progress sign in stored on the client object.
+            guard let inProgressSignIn = Clerk.shared.client?.signIn else { return }
+
+            // Attempt the TOTP or backup code verification.
+            let signIn = try await inProgressSignIn.attemptSecondFactor(strategy: .totp(code: code))
+
+            switch signIn.status {
+            case .complete:
+              // If sign-in process is complete, navigate the user as needed.
+              dump(Clerk.shared.session)
+            default:
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              dump(signIn.status)
+            }
+          } catch {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            dump(error)
+          }
+        }
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      ```kotlin {{ filename: 'MFASignInViewModel.kt', collapsible: true }}
+        import androidx.lifecycle.ViewModel
+        import androidx.lifecycle.viewModelScope
+        import com.clerk.api.Clerk
+        import com.clerk.api.network.serialization.onFailure
+        import com.clerk.api.network.serialization.onSuccess
+        import com.clerk.api.signin.SignIn
+        import com.clerk.api.signin.attemptSecondFactor
+        import kotlinx.coroutines.flow.MutableStateFlow
+        import kotlinx.coroutines.flow.asStateFlow
+        import kotlinx.coroutines.launch
+
+        class MFASignInViewModel : ViewModel() {
+          private val _uiState = MutableStateFlow<UiState>(UiState.Unverified)
+          val uiState = _uiState.asStateFlow()
+
+          fun submit(email: String, password: String) {
+            viewModelScope.launch {
+              SignIn.create(SignIn.CreateParams.Strategy.Password(identifier = email, password = password))
+                .onSuccess {
+                  if (it.status == SignIn.Status.NEEDS_SECOND_FACTOR) {
+                    // Display TOTP Form
+                    _uiState.value = UiState.NeedsSecondFactor
+                  } else {
+                    // If the status is not needsSecondFactor, check why. User may need to
+                    // complete different steps.
+                  }
+                }
+                .onFailure {
+                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                  // for more info on error handling
+                }
+            }
+          }
+
+          fun verify(code: String) {
+            val inProgressSignIn = Clerk.signIn ?: return
+            viewModelScope.launch {
+              inProgressSignIn
+                .attemptSecondFactor(SignIn.AttemptSecondFactorParams.TOTP(code))
+                .onSuccess {
+                  if (it.status == SignIn.Status.COMPLETE) {
+                      // User is now signed in and verified.
+                      // You can navigate to the next screen or perform other actions.
+                    _uiState.value = UiState.Verified
+                  }
+                }
+                .onFailure {
+                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                  // for more info on error handling
+                }
+            }
+          }
+
+          sealed interface UiState {
+            data object Unverified : UiState
+            data object Verified : UiState
+            data object NeedsSecondFactor : UiState
+          }
+      }
+      ```
+
+      ```kotlin {{ filename: 'MFASignInActivity.kt', collapsible: true }}
+      import android.os.Bundle
+      import androidx.activity.ComponentActivity
+      import androidx.activity.compose.setContent
+      import androidx.activity.viewModels
+      import androidx.compose.foundation.layout.Arrangement
+      import androidx.compose.foundation.layout.Column
+      import androidx.compose.foundation.layout.fillMaxSize
+      import androidx.compose.material3.Button
+      import androidx.compose.material3.Text
+      import androidx.compose.material3.TextField
+      import androidx.compose.runtime.Composable
+      import androidx.compose.runtime.getValue
+      import androidx.compose.runtime.mutableStateOf
+      import androidx.compose.runtime.remember
+      import androidx.compose.runtime.setValue
+      import androidx.compose.ui.Alignment
+      import androidx.compose.ui.Modifier
+      import androidx.compose.ui.text.input.PasswordVisualTransformation
+      import androidx.compose.ui.unit.dp
+      import androidx.lifecycle.compose.collectAsStateWithLifecycle
+
+      class MFASignInActivity : ComponentActivity() {
+        val viewModel: MFASignInViewModel by viewModels()
+
+        override fun onCreate(savedInstanceState: Bundle?) {
+          super.onCreate(savedInstanceState)
+          setContent {
+            val state by viewModel.uiState.collectAsStateWithLifecycle()
+            MFASignInView(state = state, onSubmit = viewModel::submit, onVerify = viewModel::verify)
+          }
+        }
+      }
+
+      @Composable
+      fun MFASignInView(
+        state: MFASignInViewModel.UiState,
+        onSubmit: (String, String) -> Unit,
+        onVerify: (String) -> Unit,
+      ) {
+        var email by remember { mutableStateOf("") }
+        var password by remember { mutableStateOf("") }
+        var code by remember { mutableStateOf("") }
+
+        Column(
+          modifier = Modifier.fillMaxSize(),
+          verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+          horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+          when (state) {
+            MFASignInViewModel.UiState.NeedsSecondFactor -> {
+              TextField(value = code, onValueChange = { code = it }, placeholder = { Text("Code") })
+              Button(onClick = { onVerify(code) }) { Text("Submit") }
+            }
+            MFASignInViewModel.UiState.Unverified -> {
+              TextField(value = email, onValueChange = { email = it }, placeholder = { Text("Email") })
+              TextField(
+                value = password,
+                onValueChange = { password = it },
+                placeholder = { Text("Password") },
+                visualTransformation = PasswordVisualTransformation(),
+              )
+              Button(onClick = { onSubmit(email, password) }) { Text("Next") }
+            }
+            MFASignInViewModel.UiState.Verified -> {
+              Text("Verified")
+            }
+          }
+        }
+      }
+      ```
+    </Tab>
+  </Tabs>
+</Steps>
+
+{/* TODO: Add logic for MFA for phone code */}
+
+## Next steps
+
+Now that users can sign in with MFA, you need to add the ability for your users to manage their MFA settings. Learn how to build a custom flow for [managing TOTP MFA](/docs/guides/development/custom-flows/account-updates/manage-totp-based-mfa) or for [managing SMS MFA](/docs/guides/development/custom-flows/account-updates/manage-sms-based-mfa).
diff --git a/docs/guides/development/custom-flows/authentication/legacy/email-password.mdx b/docs/guides/development/custom-flows/authentication/legacy/email-password.mdx
new file mode 100644
index 0000000000..d128f33444
--- /dev/null
+++ b/docs/guides/development/custom-flows/authentication/legacy/email-password.mdx
@@ -0,0 +1,1110 @@
+---
+title: Build a custom email/password authentication flow
+description: Learn how to build a custom email/password sign-up and sign-in flow using the Clerk API.
+---
+
+<Include src="_partials/custom-flows-callout" />
+
+This guide will walk you through how to build a custom email/password sign-up and sign-in flow.
+
+<Steps>
+  ## Enable email and password authentication
+
+  To use email and password authentication, you first need to ensure they are enabled for your application.
+
+  1. In the Clerk Dashboard, navigate to the [**User & authentication**](https://dashboard.clerk.com/last-active?path=user-authentication/user-and-authentication) page.
+  1. Enable **Sign-up with email** and **Sign-in with email**.
+  1. Select the **Password** tab and enable **Sign-up with password**. Leave **Require a password at sign-up** enabled.
+
+  > [!NOTE]
+  > By default, **Email verification code** is enabled for both sign-up and sign-in. This means that when a user signs up using their email address, Clerk sends a one-time code to their email address. The user must then enter this code to verify their email and complete the sign-up process. When the user uses the email address to sign in, they are emailed a one-time code to sign in. If you'd like to use **Email verification link** instead, see the [custom flow for email links](/docs/guides/development/custom-flows/authentication/email-links).
+
+  ## Sign-up flow
+
+  To sign up a user using their email, password, and email verification code, you must:
+
+  1. Initiate the sign-up process by collecting the user's email address and password.
+  1. Prepare the email address verification, which sends a one-time code to the given address.
+  1. Collect the one-time code and attempt to complete the email address verification with it.
+  1. If the email address verification is successful, set the newly created session as the active session.
+
+  <Tabs items={["Next.js", "JavaScript", "Expo", "iOS", "Android"]}>
+    <Tab>
+      This example is written for Next.js App Router but it can be adapted for any React-based framework.
+
+      ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+      'use client'
+
+      import * as React from 'react'
+      import { useSignUp } from '@clerk/nextjs'
+      import { useRouter } from 'next/navigation'
+
+      export default function Page() {
+        const { isLoaded, signUp, setActive } = useSignUp()
+        const [emailAddress, setEmailAddress] = React.useState('')
+        const [password, setPassword] = React.useState('')
+        const [verifying, setVerifying] = React.useState(false)
+        const [code, setCode] = React.useState('')
+        const router = useRouter()
+
+        // Handle submission of the sign-up form
+        const handleSubmit = async (e: React.FormEvent) => {
+          e.preventDefault()
+
+          if (!isLoaded) return
+
+          // Start the sign-up process using the email and password provided
+          try {
+            await signUp.create({
+              emailAddress,
+              password,
+            })
+
+            // Send the user an email with the verification code
+            await signUp.prepareEmailAddressVerification({
+              strategy: 'email_code',
+            })
+
+            // Set 'verifying' true to display second form
+            // and capture the OTP code
+            setVerifying(true)
+          } catch (err: any) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error(JSON.stringify(err, null, 2))
+          }
+        }
+
+        // Handle the submission of the verification form
+        const handleVerify = async (e: React.FormEvent) => {
+          e.preventDefault()
+
+          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,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  await router.push('/')
+                },
+              })
+            } 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: any) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error('Error:', JSON.stringify(err, null, 2))
+          }
+        }
+
+        // Display the verification form to capture the OTP code
+        if (verifying) {
+          return (
+            <>
+              <h1>Verify your email</h1>
+              <form onSubmit={handleVerify}>
+                <label id="code">Enter your verification code</label>
+                <input value={code} id="code" name="code" onChange={(e) => setCode(e.target.value)} />
+                <button type="submit">Verify</button>
+              </form>
+            </>
+          )
+        }
+
+        // Display the initial sign-up form to capture the email and password
+        return (
+          <>
+            <h1>Sign up</h1>
+            <form onSubmit={handleSubmit}>
+              <div>
+                <label htmlFor="email">Enter email address</label>
+                <input
+                  id="email"
+                  type="email"
+                  name="email"
+                  value={emailAddress}
+                  onChange={(e) => setEmailAddress(e.target.value)}
+                />
+              </div>
+              <div>
+                <label htmlFor="password">Enter password</label>
+                <input
+                  id="password"
+                  type="password"
+                  name="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              <div>
+                <button type="submit">Continue</button>
+              </div>
+            </form>
+          </>
+        )
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      <CodeBlockTabs options={["index.html", "main.js"]}>
+        ```html {{ filename: 'index.html', collapsible: true }}
+        <!doctype html>
+        <html lang="en">
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <title>Clerk + JavaScript App</title>
+          </head>
+          <body>
+            <div id="signed-in"></div>
+
+            <div id="sign-up">
+              <h2>Sign up</h2>
+              <form id="sign-up-form">
+                <label for="email">Enter email address</label>
+                <input type="email" name="email" id="sign-up-email" />
+                <label for="password">Enter password</label>
+                <input type="password" name="password" id="sign-up-password" />
+                <button type="submit">Continue</button>
+              </form>
+            </div>
+
+            <form id="verifying" hidden>
+              <h2>Verify your email</h2>
+              <label for="code">Enter your verification code</label>
+              <input id="code" name="code" />
+              <button type="submit" id="verify-button">Verify</button>
+            </form>
+
+            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
+          </body>
+        </html>
+        ```
+
+        ```js {{ filename: 'main.js', collapsible: true }}
+        import { Clerk } from '@clerk/clerk-js'
+
+        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+        const clerk = new Clerk(pubKey)
+        await clerk.load()
+
+        if (clerk.isSignedIn) {
+          // Mount user button component
+          document.getElementById('signed-in').innerHTML = `
+            <div id="user-button"></div>
+          `
+
+          const userbuttonDiv = document.getElementById('user-button')
+
+          clerk.mountUserButton(userbuttonDiv)
+        } else {
+          // Handle the sign-up form
+          document.getElementById('sign-up-form').addEventListener('submit', async (e) => {
+            e.preventDefault()
+
+            const formData = new FormData(e.target)
+            const emailAddress = formData.get('email')
+            const password = formData.get('password')
+
+            try {
+              // Start the sign-up process using the email and password provided
+              await clerk.client.signUp.create({ emailAddress, password })
+              await clerk.client.signUp.prepareEmailAddressVerification()
+              // Hide sign-up form
+              document.getElementById('sign-up').setAttribute('hidden', '')
+              // Show verification form
+              document.getElementById('verifying').removeAttribute('hidden')
+            } catch (error) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(error)
+            }
+          })
+
+          // Handle the verification form
+          document.getElementById('verifying').addEventListener('submit', async (e) => {
+            const formData = new FormData(e.target)
+            const code = formData.get('code')
+
+            try {
+              // Use the code the user provided to attempt verification
+              const signUpAttempt = await clerk.client.signUp.attemptEmailAddressVerification({
+                code,
+              })
+
+              // Now that the user is created, set the session to active.
+              await clerk.setActive({ session: signUpAttempt.createdSessionId })
+            } catch (error) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(error)
+            }
+          })
+        }
+        ```
+      </CodeBlockTabs>
+    </Tab>
+
+    <Tab>
+      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/reference/hooks/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.
+
+      ```tsx {{ filename: 'app/(auth)/_layout.tsx' }}
+      import { Redirect, Stack } from 'expo-router'
+      import { useAuth } from '@clerk/clerk-expo'
+
+      export default function GuestLayout() {
+        const { isSignedIn } = useAuth()
+
+        if (isSignedIn) {
+          return <Redirect href={'/dashboard'} />
+        }
+
+        return <Stack />
+      }
+      ```
+
+      In the `(auth)` group, create a `sign-up.tsx` file with the following code. The [`useSignUp()`](/docs/reference/hooks/use-sign-up) hook is used to create a sign-up flow. The user can sign up using their email and password and will receive an email verification code to confirm their email.
+
+      ```tsx {{ filename: 'app/(auth)/sign-up.tsx', collapsible: true }}
+      import * as React from 'react'
+      import { Text, TextInput, Button, View } from 'react-native'
+      import { useSignUp } from '@clerk/clerk-expo'
+      import { Link, useRouter } from 'expo-router'
+
+      export default function Page() {
+        const { isLoaded, signUp, setActive } = 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)
+          } catch (err) {
+            // See https://clerk.com/docs/guides/development/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,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  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/guides/development/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"
+                placeholderTextColor="#666666"
+                onChangeText={(code) => setCode(code)}
+              />
+              <Button title="Verify" onPress={onVerifyPress} />
+            </>
+          )
+        }
+
+        return (
+          <View>
+            <>
+              <Text>Sign up</Text>
+              <TextInput
+                autoCapitalize="none"
+                value={emailAddress}
+                placeholder="Enter email"
+                placeholderTextColor="#666666"
+                onChangeText={(email) => setEmailAddress(email)}
+              />
+              <TextInput
+                value={password}
+                placeholder="Enter password"
+                placeholderTextColor="#666666"
+                secureTextEntry={true}
+                onChangeText={(password) => setPassword(password)}
+              />
+              <Button title="Continue" onPress={onSignUpPress} />
+              <View style={{ flexDirection: 'row', gap: 4 }}>
+                <Text>Have an account?</Text>
+                <Link href="/sign-in">
+                  <Text>Sign in</Text>
+                </Link>
+              </View>
+            </>
+          </View>
+        )
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      ```swift {{ filename: 'EmailPasswordSignUpView.swift', collapsible: true }}
+      import SwiftUI
+      import Clerk
+
+      struct EmailPasswordSignUpView: View {
+        @State private var email = ""
+        @State private var password = ""
+        @State private var code = ""
+        @State private var isVerifying = false
+
+        var body: some View {
+          if isVerifying {
+            // Display the verification form to capture the OTP code
+            TextField("Enter your verification code", text: $code)
+            Button("Verify") {
+              Task { await verify(code: code) }
+            }
+          } else {
+            // Display the initial sign-up form to capture the email and password
+            TextField("Enter email address", text: $email)
+            SecureField("Enter password", text: $password)
+            Button("Next") {
+              Task { await submit(email: email, password: password) }
+            }
+          }
+        }
+      }
+
+      extension EmailPasswordSignUpView {
+
+        func submit(email: String, password: String) async {
+          do {
+            // Start the sign-up process using the email and password provided
+            let signUp = try await SignUp.create(strategy: .standard(emailAddress: email, password: password))
+
+            // Send the user an email with the verification code
+            try await signUp.prepareVerification(strategy: .emailCode)
+
+            // Set 'isVerifying' true to display second form
+            // and capture the OTP code
+            isVerifying = true
+          } catch {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            dump(error)
+          }
+        }
+
+        func verify(code: String) async {
+          do {
+            // Access the in progress sign up stored on the client
+            guard let inProgressSignUp = Clerk.shared.client?.signUp else { return }
+
+            // Use the code the user provided to attempt verification
+            let signUp = try await inProgressSignUp.attemptVerification(strategy: .emailCode(code: code))
+
+            switch signUp.status {
+            case .complete:
+              // If verification was completed, navigate the user as needed.
+              dump(Clerk.shared.session)
+            default:
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              dump(signUp.status)
+            }
+          } catch {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            dump(error)
+          }
+        }
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      ```kotlin {{ filename: 'EmailPasswordSignUpViewModel.kt', collapsible: true }}
+        import androidx.lifecycle.ViewModel
+        import androidx.lifecycle.viewModelScope
+        import com.clerk.api.Clerk
+        import com.clerk.api.network.serialization.flatMap
+        import com.clerk.api.network.serialization.onFailure
+        import com.clerk.api.network.serialization.onSuccess
+        import com.clerk.api.signup.SignUp
+        import com.clerk.api.signup.attemptVerification
+        import com.clerk.api.signup.prepareVerification
+        import kotlinx.coroutines.flow.MutableStateFlow
+        import kotlinx.coroutines.flow.asStateFlow
+        import kotlinx.coroutines.flow.combine
+        import kotlinx.coroutines.flow.launchIn
+        import kotlinx.coroutines.launch
+
+        class EmailPasswordSignUpViewModel : ViewModel() {
+          private val _uiState =
+            MutableStateFlow<UiState>(UiState.Loading)
+          val uiState = _uiState.asStateFlow()
+
+          init {
+            combine(Clerk.userFlow, Clerk.isInitialized) { user, isInitialized ->
+                _uiState.value =
+                  when {
+                    !isInitialized -> UiState.Loading
+                    user != null -> UiState.Verified
+                    else -> UiState.Unverified
+                  }
+              }
+              .launchIn(viewModelScope)
+          }
+
+          fun submit(email: String, password: String) {
+            viewModelScope.launch {
+              SignUp.create(SignUp.CreateParams.Standard(emailAddress = email, password = password))
+                .flatMap { it.prepareVerification(SignUp.PrepareVerificationParams.Strategy.EmailCode()) }
+                .onSuccess { _uiState.value = UiState.Verifying }
+                .onFailure {
+                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                  // for more info on error handling
+                }
+            }
+          }
+
+          fun verify(code: String) {
+            val inProgressSignUp = Clerk.signUp ?: return
+            viewModelScope.launch {
+              inProgressSignUp
+                .attemptVerification(SignUp.AttemptVerificationParams.EmailCode(code))
+                .onSuccess { _uiState.value = UiState.Verified }
+                .onFailure {
+                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                  // for more info on error handling
+                }
+            }
+          }
+
+          sealed interface UiState {
+            data object Loading : UiState
+
+            data object Unverified : UiState
+
+            data object Verifying : UiState
+
+            data object Verified : UiState
+          }
+        }
+      ```
+
+      ```kotlin {{ filename: 'EmailPasswordSignUpActivity.kt', collapsible: true }}
+      import android.os.Bundle
+      import androidx.activity.ComponentActivity
+      import androidx.activity.compose.setContent
+      import androidx.activity.viewModels
+      import androidx.compose.foundation.layout.Arrangement
+      import androidx.compose.foundation.layout.Box
+      import androidx.compose.foundation.layout.Column
+      import androidx.compose.foundation.layout.fillMaxSize
+      import androidx.compose.material3.Button
+      import androidx.compose.material3.CircularProgressIndicator
+      import androidx.compose.material3.Text
+      import androidx.compose.material3.TextField
+      import androidx.compose.runtime.Composable
+      import androidx.compose.runtime.getValue
+      import androidx.compose.runtime.mutableStateOf
+      import androidx.compose.runtime.remember
+      import androidx.compose.runtime.setValue
+      import androidx.compose.ui.Alignment
+      import androidx.compose.ui.Modifier
+      import androidx.compose.ui.text.input.PasswordVisualTransformation
+      import androidx.compose.ui.unit.dp
+      import androidx.lifecycle.compose.collectAsStateWithLifecycle
+
+      class EmailPasswordSignUpActivity : ComponentActivity() {
+
+        val viewModel: EmailPasswordSignUpViewModel by viewModels()
+
+        override fun onCreate(savedInstanceState: Bundle?) {
+          super.onCreate(savedInstanceState)
+          setContent {
+            val state by viewModel.uiState.collectAsStateWithLifecycle()
+            EmailPasswordSignInView(
+              state = state,
+              onSubmit = viewModel::submit,
+              onVerify = viewModel::verify,
+            )
+          }
+        }
+      }
+
+      @Composable
+      fun EmailPasswordSignInView(
+        state: EmailPasswordSignUpViewModel.UiState,
+        onSubmit: (String, String) -> Unit,
+        onVerify: (String) -> Unit,
+      ) {
+        var email by remember { mutableStateOf("") }
+        var password by remember { mutableStateOf("") }
+        var code by remember { mutableStateOf("") }
+
+        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+          when (state) {
+            EmailPasswordSignUpViewModel.UiState.Unverified -> {
+              Column(
+                verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+                horizontalAlignment = Alignment.CenterHorizontally,
+              ) {
+                TextField(value = email, onValueChange = { email = it }, label = { Text("Email") })
+                TextField(
+                  value = password,
+                  onValueChange = { password = it },
+                  visualTransformation = PasswordVisualTransformation(),
+                  label = { Text("Password") },
+                )
+                Button(onClick = { onSubmit(email, password) }) { Text("Next") }
+              }
+            }
+            EmailPasswordSignUpViewModel.UiState.Verified -> {
+              Text("Verified!")
+            }
+            EmailPasswordSignUpViewModel.UiState.Verifying -> {
+              Column(
+                verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+                horizontalAlignment = Alignment.CenterHorizontally,
+              ) {
+                TextField(
+                  value = code,
+                  onValueChange = { code = it },
+                  label = { Text("Enter your verification code") },
+                )
+                Button(onClick = { onVerify(code) }) { Text("Verify") }
+              }
+            }
+            EmailPasswordSignUpViewModel.UiState.Loading -> CircularProgressIndicator()
+          }
+        }
+      }
+      ```
+    </Tab>
+  </Tabs>
+
+  ## Sign-in flow
+
+  To authenticate a user using their email and password, you must:
+
+  1. Initiate the sign-in process by creating a `SignIn` using the email address and password provided.
+  1. If the attempt is successful, set the newly created session as the active session.
+
+  <Tabs items={["Next.js", "JavaScript", "Expo", "iOS", "Android"]}>
+    <Tab>
+      This example is written for Next.js App Router but it can be adapted for any React-based framework.
+
+      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+      'use client'
+
+      import * as React from 'react'
+      import { useSignIn } from '@clerk/nextjs'
+      import { useRouter } from 'next/navigation'
+
+      export default function SignInForm() {
+        const { isLoaded, signIn, setActive } = useSignIn()
+        const [email, setEmail] = React.useState('')
+        const [password, setPassword] = React.useState('')
+        const router = useRouter()
+
+        // Handle the submission of the sign-in form
+        const handleSubmit = async (e: React.FormEvent) => {
+          e.preventDefault()
+
+          if (!isLoaded) return
+
+          // Start the sign-in process using the email and password provided
+          try {
+            const signInAttempt = await signIn.create({
+              identifier: email,
+              password,
+            })
+
+            // If sign-in process is complete, set the created session as active
+            // and redirect the user
+            if (signInAttempt.status === 'complete') {
+              await setActive({
+                session: signInAttempt.createdSessionId,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  router.push('/')
+                },
+              })
+            } else {
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              console.error(JSON.stringify(signInAttempt, null, 2))
+            }
+          } catch (err: any) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error(JSON.stringify(err, null, 2))
+          }
+        }
+
+        // Display a form to capture the user's email and password
+        return (
+          <>
+            <h1>Sign in</h1>
+            <form onSubmit={(e) => handleSubmit(e)}>
+              <div>
+                <label htmlFor="email">Enter email address</label>
+                <input
+                  onChange={(e) => setEmail(e.target.value)}
+                  id="email"
+                  name="email"
+                  type="email"
+                  value={email}
+                />
+              </div>
+              <div>
+                <label htmlFor="password">Enter password</label>
+                <input
+                  onChange={(e) => setPassword(e.target.value)}
+                  id="password"
+                  name="password"
+                  type="password"
+                  value={password}
+                />
+              </div>
+              <button type="submit">Sign in</button>
+            </form>
+          </>
+        )
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      <CodeBlockTabs options={["index.html", "main.js"]}>
+        ```html {{ filename: 'index.html', collapsible: true }}
+        <!doctype html>
+        <html lang="en">
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <title>Clerk + JavaScript App</title>
+          </head>
+          <body>
+            <div id="signed-in"></div>
+
+            <div id="sign-in">
+              <h2>Sign in</h2>
+              <form id="sign-in-form">
+                <label for="email">Enter email address</label>
+                <input name="email" id="sign-in-email" />
+                <label for="password">Enter password</label>
+                <input name="password" id="sign-in-password" />
+                <button type="submit">Continue</button>
+              </form>
+            </div>
+
+            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
+          </body>
+        </html>
+        ```
+
+        ```js {{ filename: 'main.js', collapsible: true }}
+        import { Clerk } from '@clerk/clerk-js'
+
+        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+        const clerk = new Clerk(pubKey)
+        await clerk.load()
+
+        if (clerk.isSignedIn) {
+          // Mount user button component
+          document.getElementById('signed-in').innerHTML = `
+            <div id="user-button"></div>
+          `
+
+          const userbuttonDiv = document.getElementById('user-button')
+
+          clerk.mountUserButton(userbuttonDiv)
+        } else if (clerk.session?.currentTask) {
+          // Check for pending tasks and display custom UI to help users resolve them
+          // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+          switch (clerk.session.currentTask.key) {
+            case 'choose-organization': {
+              document.getElementById('app').innerHTML = `
+                    <div id="task"></div>
+                  `
+
+              const taskDiv = document.getElementById('task')
+
+              clerk.mountTaskChooseOrganization(taskDiv)
+            }
+          }
+        } else {
+          // Handle the sign-in form
+          document.getElementById('sign-in-form').addEventListener('submit', async (e) => {
+            e.preventDefault()
+
+            const formData = new FormData(e.target)
+            const emailAddress = formData.get('email')
+            const password = formData.get('password')
+
+            try {
+              // Start the sign-in process
+              const signInAttempt = await clerk.client.signIn.create({
+                identifier: emailAddress,
+                password,
+              })
+
+              // If the sign-in is complete, set the user as active
+              if (signInAttempt.status === 'complete') {
+                await clerk.setActive({ session: signInAttempt.createdSessionId })
+
+                location.reload()
+              } else {
+                // If the status is not complete, check why. User may need to
+                // complete further steps.
+                console.error(JSON.stringify(signInAttempt, null, 2))
+              }
+            } catch (error) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(error)
+            }
+          })
+        }
+        ```
+      </CodeBlockTabs>
+    </Tab>
+
+    <Tab>
+      In the `(auth)` group, create a `sign-in.tsx` file with the following code. The [`useSignIn()`](/docs/reference/hooks/use-sign-in) hook is used to create a sign-in flow. The user can sign in using email address and password, or navigate to the sign-up page.
+
+      ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }}
+      import { useSignIn } from '@clerk/clerk-expo'
+      import { Link, useRouter } from 'expo-router'
+      import { Text, TextInput, Button, View } from 'react-native'
+      import React from 'react'
+
+      export default function Page() {
+        const { signIn, setActive, isLoaded } = useSignIn()
+        const router = useRouter()
+
+        const [emailAddress, setEmailAddress] = React.useState('')
+        const [password, setPassword] = React.useState('')
+
+        // Handle the submission of the sign-in form
+        const onSignInPress = React.useCallback(async () => {
+          if (!isLoaded) return
+
+          // Start the sign-in process using the email and password provided
+          try {
+            const signInAttempt = await signIn.create({
+              identifier: emailAddress,
+              password,
+            })
+
+            // If sign-in process is complete, set the created session as active
+            // and redirect the user
+            if (signInAttempt.status === 'complete') {
+              await setActive({
+                session: signInAttempt.createdSessionId,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  router.replace('/')
+                },
+              })
+            } else {
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              console.error(JSON.stringify(signInAttempt, null, 2))
+            }
+          } catch (err) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error(JSON.stringify(err, null, 2))
+          }
+        }, [isLoaded, emailAddress, password])
+
+        return (
+          <View>
+            <Text>Sign in</Text>
+            <TextInput
+              autoCapitalize="none"
+              value={emailAddress}
+              placeholder="Enter email"
+              placeholderTextColor="#666666"
+              onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
+            />
+            <TextInput
+              value={password}
+              placeholder="Enter password"
+              placeholderTextColor="#666666"
+              secureTextEntry={true}
+              onChangeText={(password) => setPassword(password)}
+            />
+            <Button title="Sign in" onPress={onSignInPress} />
+            <View style={{ flexDirection: 'row', gap: 4 }}>
+              <Text>Don't have an account?</Text>
+              <Link href="/sign-up">
+                <Text>Sign up</Text>
+              </Link>
+            </View>
+          </View>
+        )
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      ```swift {{ filename: 'EmailPasswordSignInView.swift', collapsible: true }}
+      import SwiftUI
+      import Clerk
+
+      struct EmailPasswordSignInView: View {
+        @State private var email = ""
+        @State private var password = ""
+
+        var body: some View {
+          TextField("Enter email address", text: $email)
+          SecureField("Enter password", text: $password)
+          Button("Sign In") {
+            Task { await submit(email: email, password: password) }
+          }
+        }
+      }
+
+      extension EmailPasswordSignInView {
+
+        func submit(email: String, password: String) async {
+          do {
+            // Start the sign-in process using the email and password provided
+            let signIn = try await SignIn.create(strategy: .identifier(email, password: password))
+
+            switch signIn.status {
+            case .complete:
+              // If sign-in process is complete, navigate the user as needed.
+              dump(Clerk.shared.session)
+            default:
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              dump(signIn.status)
+            }
+          } catch {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            dump(error)
+          }
+        }
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      ```kotlin {{ filename: 'EmailPasswordSignInViewModel.kt', collapsible: true }}
+        import androidx.lifecycle.ViewModel
+        import androidx.lifecycle.viewModelScope
+        import com.clerk.api.Clerk
+        import com.clerk.api.network.serialization.onFailure
+        import com.clerk.api.network.serialization.onSuccess
+        import com.clerk.api.signin.SignIn
+        import kotlinx.coroutines.flow.MutableStateFlow
+        import kotlinx.coroutines.flow.asStateFlow
+        import kotlinx.coroutines.flow.combine
+        import kotlinx.coroutines.flow.launchIn
+        import kotlinx.coroutines.launch
+
+        class EmailPasswordSignInViewModel : ViewModel() {
+            private val _uiState = MutableStateFlow<UiState>(
+                UiState.SignedOut
+            )
+            val uiState = _uiState.asStateFlow()
+
+            init {
+                combine(Clerk.userFlow, Clerk.isInitialized) { user, isInitialized ->
+                    _uiState.value = when {
+                        !isInitialized -> UiState.Loading
+                        user == null -> UiState.SignedOut
+                        else -> UiState.SignedIn
+                    }
+                }.launchIn(viewModelScope)
+            }
+
+            fun submit(email: String, password: String) {
+                viewModelScope.launch {
+                    SignIn.create(
+                        SignIn.CreateParams.Strategy.Password(
+                            identifier = email,
+                            password = password
+                        )
+                    ).onSuccess {
+                        _uiState.value = UiState.SignedIn
+                    }.onFailure {
+                        // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                        // for more info on error handling
+                    }
+                }
+            }
+
+
+            sealed interface UiState {
+                data object Loading : UiState
+
+                data object SignedOut : UiState
+
+                data object SignedIn : UiState
+            }
+        }
+      ```
+
+      ```kotlin {{ filename: 'EmailPasswordSignInActivity.kt', collapsible: true }}
+        import android.os.Bundle
+        import androidx.activity.ComponentActivity
+        import androidx.activity.compose.setContent
+        import androidx.activity.viewModels
+        import androidx.compose.foundation.layout.*
+        import androidx.compose.material3.*
+        import androidx.compose.runtime.Composable
+        import androidx.compose.runtime.getValue
+        import androidx.compose.runtime.mutableStateOf
+        import androidx.compose.runtime.remember
+        import androidx.compose.runtime.setValue
+        import androidx.compose.ui.*
+        import androidx.compose.ui.text.input.PasswordVisualTransformation
+        import androidx.compose.ui.unit.dp
+        import androidx.lifecycle.compose.collectAsStateWithLifecycle
+        import com.clerk.api.Clerk
+
+        class EmailPasswordSignInActivity : ComponentActivity() {
+
+            val viewModel: EmailPasswordSignInViewModel by viewModels()
+
+            override fun onCreate(savedInstanceState: Bundle?) {
+                super.onCreate(savedInstanceState)
+                setContent {
+                    val state by viewModel.uiState.collectAsStateWithLifecycle()
+                    EmailPasswordSignInView(
+                        state = state,
+                        onSubmit = viewModel::submit
+                    )
+                }
+            }
+        }
+
+        @Composable
+        fun EmailPasswordSignInView(
+            state: EmailPasswordSignInViewModel.UiState,
+            onSubmit: (String, String) -> Unit,
+        ) {
+            var email by remember { mutableStateOf("") }
+            var password by remember { mutableStateOf("") }
+
+            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+
+                when (state) {
+
+                    EmailPasswordSignInViewModel.UiState.SignedOut -> {
+                        Column(
+                            verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                        ) {
+                            TextField(value = email, onValueChange = { email = it }, label = { Text("Email") })
+                            TextField(
+                                value = password,
+                                onValueChange = { password = it },
+                                visualTransformation = PasswordVisualTransformation(),
+                                label = { Text("Password") },
+                            )
+                            Button(onClick = { onSubmit(email, password) }) { Text("Sign in") }
+                        }
+                    }
+
+                    EmailPasswordSignInViewModel.UiState.SignedIn -> {
+                        Text("Current session: ${Clerk.session?.id}")
+                    }
+
+                    EmailPasswordSignInViewModel.UiState.Loading ->
+                        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                            CircularProgressIndicator()
+                        }
+                }
+            }
+        }
+
+      ```
+    </Tab>
+  </Tabs>
+</Steps>
diff --git a/docs/guides/development/custom-flows/authentication/legacy/email-sms-otp.mdx b/docs/guides/development/custom-flows/authentication/legacy/email-sms-otp.mdx
new file mode 100644
index 0000000000..32f4525723
--- /dev/null
+++ b/docs/guides/development/custom-flows/authentication/legacy/email-sms-otp.mdx
@@ -0,0 +1,982 @@
+---
+title: Build a custom email or SMS OTP authentication flow
+description: Learn how build a custom email or SMS one time code (OTP) authentication flow using the Clerk API.
+---
+
+<Include src="_partials/custom-flows-callout" />
+
+Clerk supports passwordless authentication, which lets users sign in and sign up without having to remember a password. Instead, users receive a one-time password (OTP), also known as a one-time code, via email or SMS, which they can use to authenticate themselves.
+
+This guide will walk you through how to build a custom SMS OTP sign-up and sign-in flow. The process for using email OTP is similar, and the differences will be highlighted throughout.
+
+<Include src="_partials/custom-flows/phone-number" />
+
+<Steps>
+  ## Enable SMS OTP
+
+  To use SMS OTP, you first need to enable it for your application.
+
+  1. In the Clerk Dashboard, navigate to the [**User & authentication**](https://dashboard.clerk.com/last-active?path=user-authentication/user-and-authentication) page.
+  1. Select the **Phone** tab and enable **Sign-up with phone** and **Sign-in with phone** and keep the default settings.
+
+  ## Sign-up flow
+
+  To sign up a user using an OTP, you must:
+
+  1. Initiate the sign-up process by collecting the user's identifier, which for this example is a phone number.
+  1. Prepare the verification, which sends a one-time code to the given identifier.
+  1. Attempt to complete the verification with the code the user provides.
+  1. If the verification is successful, set the newly created session as the active session.
+
+  <Tabs items={["Next.js", "JavaScript", "iOS", "Android"]}>
+    <Tab>
+      This example is written for Next.js App Router but it can be adapted to any React-based framework.
+
+      ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+      'use client'
+
+      import * as React from 'react'
+      import { useSignUp } from '@clerk/nextjs'
+      import { useRouter } from 'next/navigation'
+
+      export default function Page() {
+        const { isLoaded, signUp, setActive } = useSignUp()
+        const [verifying, setVerifying] = React.useState(false)
+        const [phone, setPhone] = React.useState('')
+        const [code, setCode] = React.useState('')
+        const router = useRouter()
+
+        async function handleSubmit(e: React.FormEvent) {
+          e.preventDefault()
+
+          if (!isLoaded && !signUp) return null
+
+          try {
+            // Start the sign-up process using the phone number method
+            await signUp.create({
+              phoneNumber: phone,
+            })
+
+            // Start the verification - a SMS message will be sent to the
+            // number with a one-time code
+            await signUp.preparePhoneNumberVerification()
+
+            // Set verifying to true to display second form and capture the OTP code
+            setVerifying(true)
+          } catch (err) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error('Error:', JSON.stringify(err, null, 2))
+          }
+        }
+
+        async function handleVerification(e: React.FormEvent) {
+          e.preventDefault()
+
+          if (!isLoaded && !signUp) return null
+
+          try {
+            // Use the code provided by the user and attempt verification
+            const signUpAttempt = await signUp.attemptPhoneNumberVerification({
+              code,
+            })
+
+            // If verification was completed, set the session to active
+            // and redirect the user
+            if (signUpAttempt.status === 'complete') {
+              await setActive({
+                session: signUpAttempt.createdSessionId,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  await router.push('/')
+                },
+              })
+            } else {
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              console.error(signUpAttempt)
+            }
+          } catch (err) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error('Error:', JSON.stringify(err, null, 2))
+          }
+        }
+
+        if (verifying) {
+          return (
+            <>
+              <h1>Verify your phone number</h1>
+              <form onSubmit={handleVerification}>
+                <label htmlFor="code">Enter your verification code</label>
+                <input value={code} id="code" name="code" onChange={(e) => setCode(e.target.value)} />
+                <button type="submit">Verify</button>
+              </form>
+            </>
+          )
+        }
+
+        return (
+          <>
+            <h1>Sign up</h1>
+            <form onSubmit={handleSubmit}>
+              <label htmlFor="phone">Enter phone number</label>
+              <input
+                value={phone}
+                id="phone"
+                name="phone"
+                type="tel"
+                onChange={(e) => setPhone(e.target.value)}
+              />
+              <button type="submit">Continue</button>
+            </form>
+          </>
+        )
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      <CodeBlockTabs options={["index.html", "main.js"]}>
+        ```html {{ filename: 'index.html', collapsible: true }}
+        <!doctype html>
+        <html lang="en">
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <title>Clerk + JavaScript App</title>
+          </head>
+          <body>
+            <div id="signed-in"></div>
+
+            <div id="task"></div>
+
+            <div id="sign-up">
+              <h2>Sign up</h2>
+              <form id="sign-up-form">
+                <label for="phone">Enter phone number</label>
+                <input type="tel" name="phone" id="sign-up-phone" />
+                <button type="submit">Continue</button>
+              </form>
+            </div>
+
+            <form id="verifying" hidden>
+              <h2>Verify your phone number</h2>
+              <label for="code">Enter your verification code</label>
+              <input id="code" name="code" />
+              <button type="submit" id="verify-button">Verify</button>
+            </form>
+
+            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
+          </body>
+        </html>
+        ```
+
+        ```js {{ filename: 'main.js', collapsible: true }}
+        import { Clerk } from '@clerk/clerk-js'
+
+        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+        const clerk = new Clerk(pubKey)
+        await clerk.load()
+
+        if (clerk.isSignedIn) {
+          // Mount user button component
+          document.getElementById('signed-in').innerHTML = `
+            <div id="user-button"></div>
+          `
+
+          const userbuttonDiv = document.getElementById('user-button')
+
+          clerk.mountUserButton(userbuttonDiv)
+        } else if (clerk.session?.currentTask) {
+          // Check for pending tasks and display custom UI to help users resolve them
+          // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+          switch (clerk.session.currentTask.key) {
+            case 'choose-organization': {
+              document.getElementById('app').innerHTML = `
+                    <div id="task"></div>
+                  `
+
+              const taskDiv = document.getElementById('task')
+
+              clerk.mountTaskChooseOrganization(taskDiv)
+            }
+          }
+        } else {
+          // Handle the sign-up form
+          document.getElementById('sign-up-form').addEventListener('submit', async (e) => {
+            e.preventDefault()
+
+            const formData = new FormData(e.target)
+            const phoneNumber = formData.get('phone')
+
+            try {
+              // Start the sign-up process using the phone number method
+              await clerk.client.signUp.create({ phoneNumber })
+              await clerk.client.signUp.preparePhoneNumberVerification()
+              // Hide sign-up form
+              document.getElementById('sign-up').setAttribute('hidden', '')
+              // Show verification form
+              document.getElementById('verifying').removeAttribute('hidden')
+            } catch (error) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(error)
+            }
+          })
+
+          // Handle the verification form
+          document.getElementById('verifying').addEventListener('submit', async (e) => {
+            const formData = new FormData(e.target)
+            const code = formData.get('code')
+
+            try {
+              // Verify the phone number
+              const verify = await clerk.client.signUp.attemptPhoneNumberVerification({
+                code,
+              })
+
+              // Now that the user is created, set the session to active.
+              await clerk.setActive({ session: verify.createdSessionId })
+            } catch (error) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(error)
+            }
+          })
+        }
+        ```
+      </CodeBlockTabs>
+    </Tab>
+
+    <Tab>
+      ```swift {{ filename: 'SMSOTPSignUpView.swift', collapsible: true }}
+      import SwiftUI
+      import Clerk
+
+      struct SMSOTPSignUpView: View {
+        @State private var phoneNumber = ""
+        @State private var code = ""
+        @State private var isVerifying = false
+
+        var body: some View {
+          if isVerifying {
+            TextField("Enter your verification code", text: $code)
+            Button("Verify") {
+              Task { await verify(code: code) }
+            }
+          } else {
+            TextField("Enter phone number", text: $phoneNumber)
+            Button("Continue") {
+              Task { await submit(phoneNumber: phoneNumber) }
+            }
+          }
+        }
+      }
+
+      extension SMSOTPSignUpView {
+
+        func submit(phoneNumber: String) async {
+          do {
+            // Start the sign-up process using the phone number method.
+            let signUp = try await SignUp.create(strategy: .standard(phoneNumber: phoneNumber))
+
+            // Start the verification - a SMS message will be sent to the
+            // number with a one-time code.
+            try await signUp.prepareVerification(strategy: .phoneCode)
+
+            // Set isVerifying to true to display second form and capture the OTP code.
+            isVerifying = true
+          } catch {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            dump(error)
+          }
+        }
+
+        func verify(code: String) async {
+          do {
+            // Access the in progress sign up stored on the client object.
+            guard let inProgressSignUp = Clerk.shared.client?.signUp else { return }
+
+            // Use the code provided by the user and attempt verification.
+            let signUp = try await inProgressSignUp.attemptVerification(strategy: .phoneCode(code: code))
+
+            switch signUp.status {
+            case .complete:
+              // If verification was completed, navigate the user as needed.
+              dump(Clerk.shared.session)
+            default:
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              dump(signUp.status)
+            }
+          } catch {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            dump(error)
+          }
+        }
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      ```kotlin {{ filename: 'SMSOTPSignUpViewModel.kt', collapsible: true }}
+      import androidx.lifecycle.ViewModel
+      import androidx.lifecycle.viewModelScope
+      import com.clerk.api.Clerk
+      import com.clerk.api.network.serialization.flatMap
+      import com.clerk.api.network.serialization.onFailure
+      import com.clerk.api.network.serialization.onSuccess
+      import com.clerk.api.signup.SignUp
+      import com.clerk.api.signup.attemptVerification
+      import com.clerk.api.signup.prepareVerification
+      import kotlinx.coroutines.flow.MutableStateFlow
+      import kotlinx.coroutines.flow.asStateFlow
+      import kotlinx.coroutines.flow.combine
+      import kotlinx.coroutines.flow.launchIn
+      import kotlinx.coroutines.launch
+
+      class SMSOTPSignUpViewModel : ViewModel() {
+
+      private val _uiState = MutableStateFlow<UiState>(UiState.Unverified)
+      val uiState = _uiState.asStateFlow()
+
+      init {
+        combine(Clerk.isInitialized, Clerk.userFlow) { isInitialized, user ->
+          _uiState.value =
+            when {
+              !isInitialized -> UiState.Loading
+              user == null -> UiState.Unverified
+              else -> UiState.Verified
+            }
+        }
+        .launchIn(viewModelScope)
+      }
+
+      fun submit(phoneNumber: String) {
+        viewModelScope.launch {
+        SignUp.create(SignUp.CreateParams.Standard(phoneNumber = phoneNumber))
+          .flatMap { it.prepareVerification(SignUp.PrepareVerificationParams.Strategy.PhoneCode()) }
+          .onSuccess { _uiState.value = UiState.Verifying }
+          .onFailure {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+          }
+        }
+      }
+
+      fun verify(code: String) {
+        val inProgressSignUp = Clerk.signUp ?: return
+        viewModelScope.launch {
+        inProgressSignUp
+          .attemptVerification(SignUp.AttemptVerificationParams.PhoneCode(code))
+          .onSuccess {
+            if (it.status == SignUp.Status.COMPLETE) {
+              _uiState.value = UiState.Verified
+            } else {
+              // The user may need to complete further steps
+            }
+          }
+          .onFailure {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+          }
+        }
+      }
+
+      sealed interface UiState {
+        data object Loading : UiState
+
+        data object Unverified : UiState
+
+        data object Verifying : UiState
+
+        data object Verified : UiState
+        }
+      }
+      ```
+
+      ```kotlin {{ filename: 'SMSOTPSignUpActivity.kt', collapsible: true }}
+      import android.os.Bundle
+      import androidx.activity.ComponentActivity
+      import androidx.activity.compose.setContent
+      import androidx.activity.viewModels
+      import androidx.compose.foundation.layout.Arrangement
+      import androidx.compose.foundation.layout.Box
+      import androidx.compose.foundation.layout.Column
+      import androidx.compose.foundation.layout.fillMaxSize
+      import androidx.compose.material3.Button
+      import androidx.compose.material3.CircularProgressIndicator
+      import androidx.compose.material3.Text
+      import androidx.compose.material3.TextField
+      import androidx.compose.runtime.Composable
+      import androidx.compose.runtime.getValue
+      import androidx.compose.runtime.mutableStateOf
+      import androidx.compose.runtime.remember
+      import androidx.compose.runtime.setValue
+      import androidx.compose.ui.Alignment
+      import androidx.compose.ui.Modifier
+      import androidx.compose.ui.unit.dp
+      import androidx.lifecycle.compose.collectAsStateWithLifecycle
+
+      class SMSOTPSignUpActivity : ComponentActivity() {
+        val viewModel: SMSOTPSignUpViewModel by viewModels()
+
+        override fun onCreate(savedInstanceState: Bundle?) {
+          super.onCreate(savedInstanceState)
+          setContent {
+            val state by viewModel.uiState.collectAsStateWithLifecycle()
+            SMSOTPSignUpView(state, viewModel::submit, viewModel::verify)
+          }
+        }
+      }
+
+      @Composable
+      fun SMSOTPSignUpView(
+        state: SMSOTPSignUpViewModel.UiState,
+        onSubmit: (String) -> Unit,
+        onVerify: (String) -> Unit,
+      ) {
+        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+        when (state) {
+            SMSOTPSignUpViewModel.UiState.Unverified -> {
+              InputContent(
+                placeholder = "Enter your phone number",
+                buttonText = "Continue",
+                onClick = onSubmit,
+              )
+            }
+            SMSOTPSignUpViewModel.UiState.Verified -> {
+              Text("Verified")
+            }
+            SMSOTPSignUpViewModel.UiState.Verifying -> {
+              InputContent(
+                placeholder = "Enter your verification code",
+                buttonText = "Verify",
+                onClick = onVerify,
+              )
+            }
+
+            SMSOTPSignUpViewModel.UiState.Loading -> {
+            CircularProgressIndicator()
+            }
+          }
+        }
+      }
+
+      @Composable
+      fun InputContent(placeholder: String, buttonText: String, onClick: (String) -> Unit) {
+        var value by remember { mutableStateOf("") }
+        Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+        ) {
+          TextField(placeholder = { Text(placeholder) }, value = value, onValueChange = { value = it })
+          Button(onClick = { onClick(value) }) { Text(buttonText) }
+        }
+      }
+      ```
+    </Tab>
+  </Tabs>
+
+  To create a sign-up flow for email OTP, use the [`prepareEmailAddressVerification`](/docs/reference/javascript/sign-up#prepare-email-address-verification) and [`attemptEmailAddressVerification`](/docs/reference/javascript/sign-up#attempt-email-address-verification). These helpers work the same way as their phone number counterparts do in the previous example. You can find all available methods in the [`SignUp`](/docs/reference/javascript/sign-in) object documentation.
+
+  ## Sign-in flow
+
+  To authenticate a user with an OTP, you must:
+
+  1. Initiate the sign-in process by creating a `SignIn` using the identifier provided, which for this example is a phone number.
+  1. Prepare the first factor verification.
+  1. Attempt verification with the code the user provides.
+  1. If the attempt is successful, set the newly created session as the active session.
+
+  <Tabs items={["Next.js","JavaScript", "iOS", "Android"]}>
+    <Tab>
+      This example is written for Next.js App Router but it can be adapted to any React-based framework.
+
+      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+      'use client'
+
+      import * as React from 'react'
+      import { useSignIn } from '@clerk/nextjs'
+      import { PhoneCodeFactor, SignInFirstFactor } from '@clerk/types'
+      import { useRouter } from 'next/navigation'
+
+      export default function Page() {
+        const { isLoaded, signIn, setActive } = useSignIn()
+        const [verifying, setVerifying] = React.useState(false)
+        const [phone, setPhone] = React.useState('')
+        const [code, setCode] = React.useState('')
+        const router = useRouter()
+
+        async function handleSubmit(e: React.FormEvent) {
+          e.preventDefault()
+
+          if (!isLoaded && !signIn) return null
+
+          try {
+            // Start the sign-in process using the phone number method
+            const { supportedFirstFactors } = await signIn.create({
+              identifier: phone,
+            })
+
+            // Filter the returned array to find the 'phone_code' entry
+            const isPhoneCodeFactor = (factor: SignInFirstFactor): factor is PhoneCodeFactor => {
+              return factor.strategy === 'phone_code'
+            }
+            const phoneCodeFactor = supportedFirstFactors?.find(isPhoneCodeFactor)
+
+            if (phoneCodeFactor) {
+              // Grab the phoneNumberId
+              const { phoneNumberId } = phoneCodeFactor
+
+              // Send the OTP code to the user
+              await signIn.prepareFirstFactor({
+                strategy: 'phone_code',
+                phoneNumberId,
+              })
+
+              // Set verifying to true to display second form
+              // and capture the OTP code
+              setVerifying(true)
+            }
+          } catch (err) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error('Error:', JSON.stringify(err, null, 2))
+          }
+        }
+
+        async function handleVerification(e: React.FormEvent) {
+          e.preventDefault()
+
+          if (!isLoaded && !signIn) return null
+
+          try {
+            // Use the code provided by the user and attempt verification
+            const signInAttempt = await signIn.attemptFirstFactor({
+              strategy: 'phone_code',
+              code,
+            })
+
+            // If verification was completed, set the session to active
+            // and redirect the user
+            if (signInAttempt.status === 'complete') {
+              await setActive({
+                session: signInAttempt.createdSessionId,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    return
+                  }
+
+                  router.push('/')
+                },
+              })
+            } else {
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              console.error(signInAttempt)
+            }
+          } catch (err) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error('Error:', JSON.stringify(err, null, 2))
+          }
+        }
+
+        if (verifying) {
+          return (
+            <>
+              <h1>Verify your phone number</h1>
+              <form onSubmit={handleVerification}>
+                <label htmlFor="code">Enter your verification code</label>
+                <input value={code} id="code" name="code" onChange={(e) => setCode(e.target.value)} />
+                <button type="submit">Verify</button>
+              </form>
+            </>
+          )
+        }
+
+        return (
+          <>
+            <h1>Sign in</h1>
+            <form onSubmit={handleSubmit}>
+              <label htmlFor="phone">Enter phone number</label>
+              <input
+                value={phone}
+                id="phone"
+                name="phone"
+                type="tel"
+                onChange={(e) => setPhone(e.target.value)}
+              />
+              <button type="submit">Continue</button>
+            </form>
+          </>
+        )
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      <CodeBlockTabs options={["index.html", "main.js"]}>
+        ```html {{ filename: 'index.html', collapsible: true }}
+        <!doctype html>
+        <html lang="en">
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <title>Clerk + JavaScript App</title>
+          </head>
+          <body>
+            <div id="signed-in"></div>
+
+            <div id="sign-in">
+              <h2>Sign in</h2>
+              <form id="sign-in-form">
+                <label for="phone">Enter phone number</label>
+                <input type="tel" name="phone" id="sign-in-phone" />
+                <button type="submit">Continue</button>
+              </form>
+            </div>
+
+            <form id="verifying" hidden>
+              <h2>Verify your phone number</h2>
+              <label for="code">Enter your verification code</label>
+              <input id="code" name="code" />
+              <button type="submit" id="verify-button">Verify</button>
+            </form>
+
+            <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
+          </body>
+        </html>
+        ```
+
+        ```js {{ filename: 'main.js', collapsible: true }}
+        import { Clerk } from '@clerk/clerk-js'
+
+        const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+        const clerk = new Clerk(pubKey)
+        await clerk.load()
+
+        if (clerk.isSignedIn) {
+          // Mount user button component
+          document.getElementById('signed-in').innerHTML = `
+            <div id="user-button"></div>
+          `
+
+          const userbuttonDiv = document.getElementById('user-button')
+
+          clerk.mountUserButton(userbuttonDiv)
+        } else {
+          // Handle the sign-in form
+          document.getElementById('sign-in-form').addEventListener('submit', async (e) => {
+            e.preventDefault()
+
+            const formData = new FormData(e.target)
+            const phone = formData.get('phone')
+
+            try {
+              // Start the sign-in process using the user's identifier.
+              // In this case, it's their phone number.
+              const { supportedFirstFactors } = await clerk.client.signIn.create({
+                identifier: phone,
+              })
+
+              // Find the phoneNumberId from all the available first factors for the current sign-in
+              const firstPhoneFactor = supportedFirstFactors.find((factor) => {
+                return factor.strategy === 'phone_code'
+              })
+
+              const { phoneNumberId } = firstPhoneFactor
+
+              // Prepare first factor verification, specifying
+              // the phone code strategy.
+              await clerk.client.signIn.prepareFirstFactor({
+                strategy: 'phone_code',
+                phoneNumberId,
+              })
+
+              // Hide sign-in form
+              document.getElementById('sign-in').setAttribute('hidden', '')
+              // Show verification form
+              document.getElementById('verifying').removeAttribute('hidden')
+            } catch (error) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(error)
+            }
+          })
+
+          // Handle the verification form
+          document.getElementById('verifying').addEventListener('submit', async (e) => {
+            const formData = new FormData(e.target)
+            const code = formData.get('code')
+
+            try {
+              // Verify the phone number
+              const verify = await clerk.client.signIn.attemptFirstFactor({
+                strategy: 'phone_code',
+                code,
+              })
+
+              // Now that the user is created, set the session to active.
+              await clerk.setActive({ session: verify.createdSessionId })
+            } catch (error) {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.error(error)
+            }
+          })
+        }
+        ```
+      </CodeBlockTabs>
+    </Tab>
+
+    <Tab>
+      ```swift {{ filename: 'SMSOTPSignInView.swift', collapsible: true }}
+      import SwiftUI
+      import Clerk
+
+      struct SMSOTPSignInView: View {
+        @State private var phoneNumber = ""
+        @State private var code = ""
+        @State private var isVerifying = false
+
+        var body: some View {
+          if isVerifying {
+            TextField("Enter your verification code", text: $code)
+            Button("Verify") {
+              Task { await verify(code: code) }
+            }
+          } else {
+            TextField("Enter phone number", text: $phoneNumber)
+            Button("Continue") {
+              Task { await submit(phoneNumber: phoneNumber) }
+            }
+          }
+        }
+      }
+
+      extension SMSOTPSignInView {
+
+        func submit(phoneNumber: String) async {
+          do {
+            // Start the sign-in process using the phone number method.
+            let signIn = try await SignIn.create(strategy: .identifier(phoneNumber))
+
+            // Send the OTP code to the user.
+            try await signIn.prepareFirstFactor(strategy: .phoneCode())
+
+            // Set isVerifying to true to display second form
+            // and capture the OTP code.
+            isVerifying = true
+          } catch {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            dump(error)
+          }
+        }
+
+        func verify(code: String) async {
+          do {
+            // Access the in progress sign in stored on the client object.
+            guard let inProgressSignIn = Clerk.shared.client?.signIn else { return }
+
+            // Use the code provided by the user and attempt verification.
+            let signIn = try await inProgressSignIn.attemptFirstFactor(strategy: .phoneCode(code: code))
+
+            switch signIn.status {
+            case .complete:
+              // If verification was completed, navigate the user as needed.
+              dump(Clerk.shared.session)
+            default:
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              dump(signIn.status)
+            }
+          } catch {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            dump(error)
+          }
+        }
+      }
+      ```
+    </Tab>
+
+    <Tab>
+      ```kotlin {{ filename: 'SMSOTPSignInViewModel.kt', collapsible: true }}
+      import androidx.lifecycle.ViewModel
+      import androidx.lifecycle.viewModelScope
+      import com.clerk.api.Clerk
+      import com.clerk.api.network.serialization.flatMap
+      import com.clerk.api.network.serialization.onFailure
+      import com.clerk.api.network.serialization.onSuccess
+      import com.clerk.api.signin.SignIn
+      import com.clerk.api.signin.attemptFirstFactor
+      import com.clerk.api.signin.prepareFirstFactor
+      import kotlinx.coroutines.flow.MutableStateFlow
+      import kotlinx.coroutines.flow.asStateFlow
+      import kotlinx.coroutines.flow.combine
+      import kotlinx.coroutines.flow.launchIn
+      import kotlinx.coroutines.launch
+
+      class SMSOTPSignInViewModel : ViewModel() {
+        private val _uiState = MutableStateFlow<UiState>(UiState.Unverified)
+        val uiState = _uiState.asStateFlow()
+
+        init {
+          combine(Clerk.isInitialized, Clerk.userFlow) { isInitialized, user ->
+              _uiState.value =
+                when {
+                  !isInitialized -> UiState.Loading
+                  user == null -> UiState.Unverified
+                  else -> UiState.Verified
+                }
+            }
+            .launchIn(viewModelScope)
+        }
+
+        fun submit(phoneNumber: String) {
+          viewModelScope.launch {
+            SignIn.create(SignIn.CreateParams.Strategy.PhoneCode(phoneNumber)).flatMap {
+              it
+                .prepareFirstFactor(SignIn.PrepareFirstFactorParams.PhoneCode())
+                .onSuccess { _uiState.value = UiState.Verifying }
+                .onFailure {
+                  // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                  // for more info on error handling
+                }
+            }
+          }
+        }
+
+        fun verify(code: String) {
+          val inProgressSignIn = Clerk.signIn ?: return
+          viewModelScope.launch {
+            inProgressSignIn
+              .attemptFirstFactor(SignIn.AttemptFirstFactorParams.PhoneCode(code))
+              .onSuccess {
+                if (it.status == SignIn.Status.COMPLETE) {
+                  _uiState.value = UiState.Verified
+                } else {
+                  // The user may need to complete further steps
+                }
+              }
+              .onFailure {
+                // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                // for more info on error handling
+              }
+          }
+        }
+
+        sealed interface UiState {
+          data object Loading : UiState
+
+          data object Unverified : UiState
+
+          data object Verifying : UiState
+
+          data object Verified : UiState
+        }
+      }
+      ```
+
+      ```kotlin {{ filename: 'SMSOTPSignInActivity.kt', collapsible: true }}
+      import android.os.Bundle
+      import androidx.activity.ComponentActivity
+      import androidx.activity.compose.setContent
+      import androidx.activity.viewModels
+      import androidx.compose.foundation.layout.Arrangement
+      import androidx.compose.foundation.layout.Box
+      import androidx.compose.foundation.layout.Column
+      import androidx.compose.foundation.layout.fillMaxSize
+      import androidx.compose.material3.Button
+      import androidx.compose.material3.CircularProgressIndicator
+      import androidx.compose.material3.Text
+      import androidx.compose.material3.TextField
+      import androidx.compose.runtime.Composable
+      import androidx.compose.runtime.getValue
+      import androidx.compose.runtime.mutableStateOf
+      import androidx.compose.runtime.remember
+      import androidx.compose.runtime.setValue
+      import androidx.compose.ui.Alignment
+      import androidx.compose.ui.Modifier
+      import androidx.compose.ui.unit.dp
+      import androidx.lifecycle.compose.collectAsStateWithLifecycle
+
+      class SMSOTPSignInActivity : ComponentActivity() {
+        val viewModel: SMSOTPSignInViewModel by viewModels()
+
+        override fun onCreate(savedInstanceState: Bundle?) {
+          super.onCreate(savedInstanceState)
+          setContent {
+            val state by viewModel.uiState.collectAsStateWithLifecycle()
+            SMSOTPSignInView(state, viewModel::submit, viewModel::verify)
+          }
+        }
+      }
+
+      @Composable
+      fun SMSOTPSignInView(
+        state: SMSOTPSignInViewModel.UiState,
+        onSubmit: (String) -> Unit,
+        onVerify: (String) -> Unit,
+      ) {
+        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+          when (state) {
+            SMSOTPSignInViewModel.UiState.Unverified -> {
+              InputContent(
+                placeholder = "Enter your phone number",
+                buttonText = "Continue",
+                onClick = onSubmit,
+              )
+            }
+            SMSOTPSignInViewModel.UiState.Verified -> {
+              Text("Verified")
+            }
+            SMSOTPSignInViewModel.UiState.Verifying -> {
+              InputContent(
+                placeholder = "Enter your verification code",
+                buttonText = "Verify",
+                onClick = onVerify,
+              )
+            }
+
+            SMSOTPSignInViewModel.UiState.Loading -> {
+              CircularProgressIndicator()
+            }
+          }
+        }
+      }
+
+      @Composable
+      fun InputContent(placeholder: String, buttonText: String, onClick: (String) -> Unit) {
+        var value by remember { mutableStateOf("") }
+        Column(
+          horizontalAlignment = Alignment.CenterHorizontally,
+          verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+        ) {
+          TextField(placeholder = { Text(placeholder) }, value = value, onValueChange = { value = it })
+          Button(onClick = { onClick(value) }) { Text(buttonText) }
+        }
+      }
+      ```
+    </Tab>
+  </Tabs>
+
+  To create a sign-in flow for email OTP, pass the value `email_code` as the first factor strategy. You can find all available methods in the [`SignIn`](/docs/reference/javascript/sign-in) object documentation.
+</Steps>
diff --git a/docs/guides/development/custom-flows/authentication/legacy/embedded-email-links.mdx b/docs/guides/development/custom-flows/authentication/legacy/embedded-email-links.mdx
new file mode 100644
index 0000000000..b3117bf16d
--- /dev/null
+++ b/docs/guides/development/custom-flows/authentication/legacy/embedded-email-links.mdx
@@ -0,0 +1,199 @@
+---
+title: Embeddable email links with sign-in tokens
+description: Learn how to build custom embeddable email link sign-in flows to increase user engagement and reduce drop off in transactional emails, SMS's, and more.
+---
+
+<If sdk="expo">
+  > [!WARNING]
+  > Expo does not support email links. You can request this feature on [Clerk's roadmap](https://feedback.clerk.com/).
+</If>
+
+An "email link" is a link that, when visited, will automatically authenticate your user so that they can perform some action on your site with less friction than if they had to sign in manually. You can create email links with Clerk by generating a sign-in token.
+
+Common use cases include:
+
+- Welcome emails when users are added off a waitlist
+- Promotional emails for users
+- Recovering abandoned carts
+- Surveys or questionnaires
+
+This guide will demonstrate how to generate a sign-in token and use it to sign in a user.
+
+<Steps>
+  ## Generate a sign-in token
+
+  [Sign-in tokens](/docs/reference/backend-api/tag/sign-in-tokens/post/sign_in_tokens){{ target: '_blank' }} are JWTs that can be used to sign in to an application without specifying any credentials. A sign-in token can be used **once**, and can be consumed from the Frontend API using the [`ticket`](/docs/reference/javascript/sign-in#sign-in-create-params) strategy, which is demonstrated in the following example.
+
+  > [!NOTE]
+  > By default, sign-in tokens expire in 30 days. You can optionally specify a different duration in seconds using the `expires_in_seconds` property.
+
+  The following example demonstrates a cURL request that creates a valid sign-in token:
+
+  ```bash
+  curl 'https://api.clerk.com/v1/sign_in_tokens' \
+    -X POST \
+    -H 'Authorization: Bearer {{secret}}' \
+    -H 'Content-Type: application/json' \
+    -d '{ "user_id": "user_123" }'
+  ```
+
+  This will return a `url` property, which can be used as your email link. Keep in mind that this link will use the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in) to sign in the user.
+
+  If you would rather use your own sign-in page, you can use the `token` property that is returned. Add the `token` as a query param in any link, such as the following example:
+
+  `https://your-site.com/accept-token?token=<INSERT_TOKEN_HERE>`
+
+  Then, you can embed this link anywhere, such as an email.
+
+  ## Build a custom flow for signing in with a sign-in token
+
+  To handle email links with sign-in tokens, you must set up a page in your frontend that detects the token, signs the user in, and performs any additional actions you need.
+
+  The following example demonstrates basic code that detects a token in the URL query params and uses it to initiate a sign-in with Clerk:
+
+  <Tabs items={["Next.js"]}>
+    <Tab>
+      <CodeBlockTabs options={["App Router", "Pages Router"]}>
+        ```tsx {{ filename: 'app/accept-token/page.tsx' }}
+        'use client'
+        import { useUser, useSignIn } from '@clerk/nextjs'
+        import { useEffect, useState } from 'react'
+        import { useSearchParams } from 'next/navigation'
+
+        export default function Page() {
+          const [loading, setLoading] = useState<boolean>(false)
+          const { signIn, setActive } = useSignIn()
+          const { isSignedIn, user } = useUser()
+
+          // Get the token from the query params
+          const signInToken = useSearchParams().get('token')
+
+          useEffect(() => {
+            if (!signIn || !setActive || !signInToken || user || loading) {
+              return
+            }
+
+            const createSignIn = async () => {
+              setLoading(true)
+              try {
+                // Create the `SignIn` with the token
+                const signInAttempt = await signIn.create({
+                  strategy: 'ticket',
+                  ticket: signInToken as string,
+                })
+
+                // If the sign-in was successful, set the session to active
+                if (signInAttempt.status === 'complete') {
+                  setActive({
+                    session: signInAttempt.createdSessionId,
+                  })
+                } else {
+                  // If the sign-in attempt is not complete, check why.
+                  // User may need to complete further steps.
+                  console.error(JSON.stringify(signInAttempt, null, 2))
+                }
+              } catch (err) {
+                // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                // for more info on error handling
+                console.error('Error:', JSON.stringify(err, null, 2))
+              } finally {
+                setLoading(false)
+              }
+            }
+
+            createSignIn()
+          }, [signIn, setActive, signInToken, user, loading])
+
+          if (!signInToken) {
+            return <div>No token provided.</div>
+          }
+
+          if (!isSignedIn) {
+            // Handle signed out state
+            return null
+          }
+
+          if (loading) {
+            return <div>Signing you in...</div>
+          }
+
+          return <div>Signed in as {user.id}</div>
+        }
+        ```
+
+        ```tsx {{ filename: 'pages/accept-token.tsx' }}
+        import { InferGetServerSidePropsType, GetServerSideProps } from 'next'
+        import { useUser, useSignIn } from '@clerk/nextjs'
+        import { useEffect, useState } from 'react'
+
+        // Get the token from the query param server-side, and pass through props
+        export const getServerSideProps: GetServerSideProps = async (context) => {
+          return {
+            props: { signInToken: context.query.token ? context.query.token : null },
+          }
+        }
+
+        export default function AcceptTokenPage({
+          signInToken,
+        }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+          const [loading, setLoading] = useState<boolean>(false)
+          const { signIn, setActive } = useSignIn()
+          const { isSignedIn, user } = useUser()
+
+          useEffect(() => {
+            if (!signIn || !setActive || !signInToken || user || loading) {
+              return
+            }
+
+            const createSignIn = async () => {
+              setLoading(true)
+              try {
+                // Create the `SignIn` with the token
+                const signInAttempt = await signIn.create({
+                  strategy: 'ticket',
+                  ticket: signInToken as string,
+                })
+
+                // If the sign-in was successful, set the session to active
+                if (signInAttempt.status === 'complete') {
+                  setActive({
+                    session: signInAttempt.createdSessionId,
+                  })
+                } else {
+                  // If the sign-in attempt is not complete, check why.
+                  // User may need to complete further steps.
+                  console.error(JSON.stringify(signInAttempt, null, 2))
+                }
+              } catch (err) {
+                // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                // for more info on error handling
+                console.error('Error:', JSON.stringify(err, null, 2))
+                setLoading(true)
+              } finally {
+                setLoading(false)
+              }
+            }
+
+            createSignIn()
+          }, [signIn, setActive, signInToken, user, loading])
+
+          if (!signInToken) {
+            return <div>No token provided.</div>
+          }
+
+          if (loading) {
+            return <div>Loading...</div>
+          }
+
+          if (!isSignedIn) {
+            // Handle signed out state
+            return null
+          }
+
+          return <div>Signed in as {user.id}</div>
+        }
+        ```
+      </CodeBlockTabs>
+    </Tab>
+  </Tabs>
+</Steps>
diff --git a/docs/guides/development/custom-flows/authentication/legacy/enterprise-connections.mdx b/docs/guides/development/custom-flows/authentication/legacy/enterprise-connections.mdx
new file mode 100644
index 0000000000..d7c464ad09
--- /dev/null
+++ b/docs/guides/development/custom-flows/authentication/legacy/enterprise-connections.mdx
@@ -0,0 +1,170 @@
+---
+title: Build a custom flow for authenticating with enterprise connections
+description: Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports enterprise connections.
+---
+
+<Include src="_partials/custom-flows-callout" />
+
+## Before you start
+
+You must configure your application instance through the Clerk Dashboard for the enterprise connection(s) that you want to use. Visit [the appropriate guide for your platform](/docs/guides/configure/auth-strategies/enterprise-connections/overview) to learn how to configure your instance.
+
+## Create the sign-up and sign-in flow
+
+<Tabs items={["Next.js", "Expo"]}>
+  <Tab>
+    <Include src="_partials/custom-flows/sso-connections-legacy" />
+
+    <CodeBlockTabs options={["Sign in page", "SSO callback page"]}>
+      ```tsx {{ filename: 'app/sign-in/page.tsx' }}
+      'use client'
+
+      import * as React from 'react'
+      import { useSignIn } from '@clerk/nextjs'
+
+      export default function Page() {
+        const { signIn, isLoaded } = useSignIn()
+
+        const signInWithEnterpriseSSO = (e: React.FormEvent) => {
+          e.preventDefault()
+
+          if (!isLoaded) return null
+
+          const email = (e.target as HTMLFormElement).email.value
+
+          signIn
+            .authenticateWithRedirect({
+              identifier: email,
+              strategy: 'enterprise_sso',
+              redirectUrl: '/sign-in/sso-callback',
+              redirectUrlComplete: '/',
+            })
+            .then((res) => {
+              console.log(res)
+            })
+            .catch((err: any) => {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.log(err.errors)
+              console.error(err, null, 2)
+            })
+        }
+
+        return (
+          <form onSubmit={(e) => signInWithEnterpriseSSO(e)}>
+            <input id="email" type="email" name="email" placeholder="Enter email address" />
+            <button>Sign in with Enterprise SSO</button>
+          </form>
+        )
+      }
+      ```
+
+      ```jsx {{ filename: 'app/sign-in/sso-callback/page.tsx' }}
+      import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'
+
+      export default function Page() {
+        // Handle the redirect flow by calling the Clerk.handleRedirectCallback() method
+        // or rendering the prebuilt <AuthenticateWithRedirectCallback/> component.
+        // This is the final step in the custom Enterprise SSO flow.
+        return <AuthenticateWithRedirectCallback />
+      }
+      ```
+    </CodeBlockTabs>
+  </Tab>
+
+  <Tab>
+    The following example **will both sign up _and_ sign in users**, eliminating the need for a separate sign-up page.
+
+    The following example:
+
+    1. Uses the [`useSSO()`](/docs/reference/expo/use-sso) hook to access the `startSSOFlow()` method.
+    1. Calls the `startSSOFlow()` method with the `strategy` param set to `enterprise_sso` and the `identifier` param set to the user's email address that they provided. The optional `redirect_url` param is also set in order to redirect the user once they finish the authentication flow.
+       - If authentication is successful, the `setActive()` method is called to set the active session with the new `createdSessionId`.
+       - If authentication is not successful, you can handle the missing requirements, such as MFA, using the [`signIn`](/docs/reference/javascript/sign-in) or [`signUp`](/docs/reference/javascript/sign-up) object returned from `startSSOFlow()`, depending on if the user is signing in or signing up. These objects include properties, like `status`, that can be used to determine the next steps. See the respective linked references for more information.
+
+    ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }}
+    import React, { useEffect, useState } from 'react'
+    import * as WebBrowser from 'expo-web-browser'
+    import * as AuthSession from 'expo-auth-session'
+    import { useSSO } from '@clerk/clerk-expo'
+    import { View, Button, TextInput, Platform } from 'react-native'
+
+    export const useWarmUpBrowser = () => {
+      useEffect(() => {
+        // Preloads the browser for Android devices to reduce authentication load time
+        // See: https://docs.expo.dev/guides/authentication/#improving-user-experience
+        if (Platform.OS !== 'android') return
+        void WebBrowser.warmUpAsync()
+        return () => {
+          // Cleanup: closes browser when component unmounts
+          void WebBrowser.coolDownAsync()
+        }
+      }, [])
+    }
+
+    // Handle any pending authentication sessions
+    WebBrowser.maybeCompleteAuthSession()
+
+    export default function Page() {
+      useWarmUpBrowser()
+
+      const [email, setEmail] = useState('')
+
+      // Use the `useSSO()` hook to access the `startSSOFlow()` method
+      const { startSSOFlow } = useSSO()
+
+      const onPress = async () => {
+        try {
+          // Start the authentication process by calling `startSSOFlow()`
+          const { createdSessionId, setActive, signIn, signUp } = await startSSOFlow({
+            strategy: 'enterprise_sso',
+            identifier: email,
+            // For web, defaults to current path
+            // For native, you must pass a scheme, like AuthSession.makeRedirectUri({ scheme, path })
+            // For more info, see https://docs.expo.dev/versions/latest/sdk/auth-session/#authsessionmakeredirecturioptions
+            redirectUrl: AuthSession.makeRedirectUri(),
+          })
+
+          // If sign in was successful, set the active session
+          if (createdSessionId) {
+            setActive!({
+              session: createdSessionId,
+              navigate: async ({ session }) => {
+                if (session?.currentTask) {
+                  // Check for tasks and navigate to custom UI to help users resolve them
+                  // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                  console.log(session?.currentTask)
+                  return
+                }
+
+                router.push('/')
+              },
+            })
+          } else {
+            // If there is no `createdSessionId`,
+            // there are missing requirements, such as MFA
+            // Use the `signIn` or `signUp` returned from `startSSOFlow`
+            // to handle next steps
+          }
+        } catch (err) {
+          // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+          // for more info on error handling
+          console.error(JSON.stringify(err, null, 2))
+        }
+      }
+
+      return (
+        <View>
+          <TextInput
+            value={email}
+            onChangeText={setEmail}
+            placeholder="Enter email"
+            placeholderTextColor="#666666"
+          />
+          <Button title="Sign in with SAML" onPress={onPress} />
+        </View>
+      )
+    }
+    ```
+  </Tab>
+</Tabs>
diff --git a/docs/guides/development/custom-flows/authentication/legacy/oauth-connections.mdx b/docs/guides/development/custom-flows/authentication/legacy/oauth-connections.mdx
new file mode 100644
index 0000000000..6d117a5e62
--- /dev/null
+++ b/docs/guides/development/custom-flows/authentication/legacy/oauth-connections.mdx
@@ -0,0 +1,478 @@
+---
+title: Build a custom flow for authenticating with OAuth connections
+description: Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports OAuth connections.
+---
+
+<Include src="_partials/custom-flows-callout" />
+
+## Before you start
+
+You must configure your application instance through the Clerk Dashboard for the social connection(s) that you want to use. Visit [the appropriate guide for your platform](/docs/guides/configure/auth-strategies/social-connections/all-providers) to learn how to configure your instance.
+
+## Create the sign-up and sign-in flow
+
+<Tabs items={["Next.js", "Expo", "iOS", "Android"]}>
+  <Tab>
+    First, in your `.env` file, set the `NEXT_PUBLIC_CLERK_SIGN_IN_URL` environment variable to tell Clerk where the sign-in page is being hosted. Otherwise, your app may default to using the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in) instead. This guide uses the `/sign-in` route.
+
+    ```env {{ filename: '.env' }}
+    NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+    ```
+
+    <Include src="_partials/custom-flows/sso-connections-legacy" />
+
+    <CodeBlockTabs options={["Sign in page", "SSO callback page"]}>
+      ```tsx {{ filename: 'app/sign-in/page.tsx' }}
+      'use client'
+
+      import * as React from 'react'
+      import { OAuthStrategy } from '@clerk/types'
+      import { useSignIn } from '@clerk/nextjs'
+
+      export default function Page() {
+        const { signIn } = useSignIn()
+
+        if (!signIn) return null
+
+        const signInWith = (strategy: OAuthStrategy) => {
+          return signIn
+            .authenticateWithRedirect({
+              strategy,
+              redirectUrl: '/sign-in/sso-callback',
+              redirectUrlComplete: '/sign-in/tasks', // Learn more about session tasks at https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+            })
+            .then((res) => {
+              console.log(res)
+            })
+            .catch((err: any) => {
+              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+              // for more info on error handling
+              console.log(err.errors)
+              console.error(err, null, 2)
+            })
+        }
+
+        // Render a button for each supported OAuth provider
+        // you want to add to your app. This example uses only Google.
+        return (
+          <div>
+            <button onClick={() => signInWith('oauth_google')}>Sign in with Google</button>
+          </div>
+        )
+      }
+      ```
+
+      ```tsx {{ filename: 'app/sign-in/sso-callback/page.tsx' }}
+      import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'
+
+      export default function Page() {
+        // Handle the redirect flow by calling the Clerk.handleRedirectCallback() method
+        // or rendering the prebuilt <AuthenticateWithRedirectCallback/> component.
+        return (
+          <>
+            <AuthenticateWithRedirectCallback />
+
+            {/* Required for sign-up flows
+            Clerk's bot sign-up protection is enabled by default */}
+            <div id="clerk-captcha" />
+          </>
+        )
+      }
+      ```
+    </CodeBlockTabs>
+  </Tab>
+
+  <Tab>
+    The following example **will both sign up _and_ sign in users**, eliminating the need for a separate sign-up page.
+
+    The following example:
+
+    1. Uses the [`useSSO()`](/docs/reference/expo/use-sso) hook to access the `startSSOFlow()` method.
+    1. Calls the `startSSOFlow()` method with the `strategy` param set to `oauth_google`, but you can use any of the [supported OAuth strategies](/docs/reference/javascript/types/sso#o-auth-strategy). The optional `redirect_url` param is also set in order to redirect the user once they finish the authentication flow.
+       - If authentication is successful, the `setActive()` method is called to set the active session with the new `createdSessionId`.
+       - If authentication is not successful, you can [handle the missing requirements](#handle-missing-requirements), such as MFA, using the [`signIn`](/docs/reference/javascript/sign-in) or [`signUp`](/docs/reference/javascript/sign-up) object returned from `startSSOFlow()`, depending on if the user is signing in or signing up. These objects include properties, like `status`, that can be used to determine the next steps. See the respective linked references for more information.
+
+    ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }}
+    import React, { useCallback, useEffect } from 'react'
+    import * as WebBrowser from 'expo-web-browser'
+    import * as AuthSession from 'expo-auth-session'
+    import { useSSO } from '@clerk/clerk-expo'
+    import { View, Button, Platform } from 'react-native'
+
+    // Preloads the browser for Android devices to reduce authentication load time
+    // See: https://docs.expo.dev/guides/authentication/#improving-user-experience
+    export const useWarmUpBrowser = () => {
+      useEffect(() => {
+        if (Platform.OS !== 'android') return
+        void WebBrowser.warmUpAsync()
+        return () => {
+          // Cleanup: closes browser when component unmounts
+          void WebBrowser.coolDownAsync()
+        }
+      }, [])
+    }
+
+    // Handle any pending authentication sessions
+    WebBrowser.maybeCompleteAuthSession()
+
+    export default function Page() {
+      useWarmUpBrowser()
+
+      // Use the `useSSO()` hook to access the `startSSOFlow()` method
+      const { startSSOFlow } = useSSO()
+
+      const onPress = useCallback(async () => {
+        try {
+          // Start the authentication process by calling `startSSOFlow()`
+          const { createdSessionId, setActive, signIn, signUp } = await startSSOFlow({
+            strategy: 'oauth_google',
+            // For web, defaults to current path
+            // For native, you must pass a scheme, like AuthSession.makeRedirectUri({ scheme, path })
+            // For more info, see https://docs.expo.dev/versions/latest/sdk/auth-session/#authsessionmakeredirecturioptions
+            redirectUrl: AuthSession.makeRedirectUri(),
+          })
+
+          // If sign in was successful, set the active session
+          if (createdSessionId) {
+            setActive!({
+              session: createdSessionId,
+              // Check for session tasks and navigate to custom UI to help users resolve them
+              // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+              navigate: async ({ session }) => {
+                if (session?.currentTask) {
+                  console.log(session?.currentTask)
+                  router.push('/sign-in/tasks')
+                  return
+                }
+
+                router.push('/')
+              },
+            })
+          } else {
+            // If there is no `createdSessionId`,
+            // there are missing requirements, such as MFA
+            // See https://clerk.com/docs/guides/development/custom-flows/authentication/oauth-connections#handle-missing-requirements
+          }
+        } catch (err) {
+          // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+          // for more info on error handling
+          console.error(JSON.stringify(err, null, 2))
+        }
+      }, [])
+
+      return (
+        <View>
+          <Button title="Sign in with Google" onPress={onPress} />
+        </View>
+      )
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```swift {{ filename: 'OAuthView.swift', collapsible: true }}
+    import SwiftUI
+    import Clerk
+
+    struct OAuthView: View {
+      var body: some View {
+        // Render a button for each supported OAuth provider
+        // you want to add to your app. This example uses only Google.
+        Button("Sign In with Google") {
+          Task { await signInWithOAuth(provider: .google) }
+        }
+      }
+    }
+
+    extension OAuthView {
+
+      func signInWithOAuth(provider: OAuthProvider) async {
+        do {
+          // Start the sign-in process using the selected OAuth provider.
+          let result = try await SignIn.authenticateWithRedirect(strategy: .oauth(provider: provider))
+
+          // It is common for users who are authenticating with OAuth to use
+          // a sign-in button when they mean to sign-up, and vice versa.
+          // Clerk will handle this transfer for you if possible.
+          // Therefore, a TransferFlowResult can be either a SignIn or SignUp.
+
+          switch result {
+          case .signIn(let signIn):
+            switch signIn.status {
+            case .complete:
+              // If sign-in process is complete, navigate the user as needed.
+              dump(Clerk.shared.session)
+            default:
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              dump(signIn.status)
+            }
+          case .signUp(let signUp):
+            switch signUp.status {
+            case .complete:
+              // If sign-up process is complete, navigate the user as needed.
+              dump(Clerk.shared.session)
+            default:
+              // If the status is not complete, check why. User may need to
+              // complete further steps.
+              dump(signUp.status)
+            }
+          }
+        } catch {
+          // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+          // for more info on error handling.
+          dump(error)
+        }
+      }
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```kotlin {{ filename: 'OAuthViewModel.kt', collapsible: true }}
+    import android.util.Log
+    import androidx.lifecycle.ViewModel
+    import androidx.lifecycle.viewModelScope
+    import com.clerk.api.Clerk
+    import com.clerk.api.network.serialization.longErrorMessageOrNull
+    import com.clerk.api.network.serialization.onFailure
+    import com.clerk.api.network.serialization.onSuccess
+    import com.clerk.api.signin.SignIn
+    import com.clerk.api.signup.SignUp
+    import com.clerk.api.sso.OAuthProvider
+    import com.clerk.api.sso.ResultType
+    import kotlinx.coroutines.flow.MutableStateFlow
+    import kotlinx.coroutines.flow.asStateFlow
+    import kotlinx.coroutines.flow.combine
+    import kotlinx.coroutines.flow.launchIn
+    import kotlinx.coroutines.launch
+
+    class OAuthViewModel : ViewModel() {
+        private val _uiState = MutableStateFlow<UiState>(UiState.Loading)
+        val uiState = _uiState.asStateFlow()
+
+        init {
+            combine(Clerk.isInitialized, Clerk.userFlow) { isInitialized, user ->
+                _uiState.value = when {
+                    !isInitialized -> UiState.Loading
+                    user != null -> UiState.Authenticated
+                    else -> UiState.SignedOut
+                }
+            }.launchIn(viewModelScope)
+        }
+
+        fun signInWithOAuth(provider: OAuthProvider) {
+            viewModelScope.launch {
+                SignIn.authenticateWithRedirect(SignIn.AuthenticateWithRedirectParams.OAuth(provider)).onSuccess {
+                    when(it.resultType) {
+                        ResultType.SIGN_IN -> {
+                            // The OAuth flow resulted in a sign in
+                            if (it.signIn?.status == SignIn.Status.COMPLETE) {
+                                _uiState.value = UiState.Authenticated
+                            } else {
+                              // If the status is not complete, check why. User may need to
+                              // complete further steps.
+                            }
+                        }
+                        ResultType.SIGN_UP -> {
+                            // The OAuth flow resulted in a sign up
+                            if (it.signUp?.status == SignUp.Status.COMPLETE) {
+                                _uiState.value = UiState.Authenticated
+                            } else {
+                              // If the status is not complete, check why. User may need to
+                              // complete further steps.
+                            }
+                        }
+                    }
+                }.onFailure {
+                    // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+                    // for more info on error handling
+                    Log.e("OAuthViewModel", it.longErrorMessageOrNull, it.throwable)
+                }
+            }
+        }
+
+        sealed interface UiState {
+            data object Loading : UiState
+
+            data object SignedOut : UiState
+
+            data object Authenticated : UiState
+        }
+    }
+    ```
+
+    ```kotlin {{ filename: 'OAuthActivity.kt', collapsible: true }}
+    import android.os.Bundle
+    import androidx.activity.ComponentActivity
+    import androidx.activity.compose.setContent
+    import androidx.activity.viewModels
+    import androidx.compose.foundation.layout.Box
+    import androidx.compose.foundation.layout.fillMaxSize
+    import androidx.compose.material3.Button
+    import androidx.compose.material3.CircularProgressIndicator
+    import androidx.compose.material3.Text
+    import androidx.compose.runtime.getValue
+    import androidx.compose.ui.Alignment
+    import androidx.compose.ui.Modifier
+    import androidx.lifecycle.compose.collectAsStateWithLifecycle
+    import com.clerk.api.sso.OAuthProvider
+
+    class OAuthActivity : ComponentActivity() {
+        val viewModel: OAuthViewModel by viewModels()
+
+        override fun onCreate(savedInstanceState: Bundle?) {
+            super.onCreate(savedInstanceState)
+            setContent {
+                val state by viewModel.uiState.collectAsStateWithLifecycle()
+                Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                    when(state) {
+                        OAuthViewModel.UiState.Authenticated -> Text("Authenticated")
+                        OAuthViewModel.UiState.Loading -> CircularProgressIndicator()
+                        OAuthViewModel.UiState.SignedOut -> {
+                            val provider = OAuthProvider.GOOGLE // Or .GITHUB, .SLACK etc.
+                            Button(onClick = {
+                                viewModel.signInWithOAuth(provider)
+                            }) {
+                                Text("Sign in with ${provider.name}")
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    ```
+  </Tab>
+</Tabs>
+
+## Handle missing requirements
+
+Depending on your instance settings, users might need to provide extra information before their sign-up can be completed, such as when a username or accepting legal terms is required. In these cases, the `SignUp` object returns a status of `"missing_requirements"` along with a `missingFields` array. You can create a "Continue" page to collect these missing fields and complete the sign-up flow. Handling the missing requirements will depend on your instance settings. For example, if your instance settings require a phone number, you will need to [handle verifying the phone number](/docs/guides/development/custom-flows/authentication/email-sms-otp#sign-up-flow).
+
+With OAuth flows, it's common for users to try to _sign in_ with an OAuth provider, but they don't have a Clerk account for your app yet. Clerk automatically transfers the flow from the `SignIn` object to the `SignUp` object, which returns the `"missing_requirements"` status and `missingFields` array needed to handle the missing requirements flow. This is why the "Continue" page uses the [`useSignUp()`](/docs/reference/hooks/use-sign-up) hook and treats the missing requirements flow as a sign-up flow.
+
+<Tabs items={["Next.js"]}>
+  <Tab>
+    <CodeBlockTabs options={["Continue page", "SSO callback page"]}>
+      ```tsx {{ filename: 'app/sign-in/continue/page.tsx' }}
+      'use client'
+
+      import { useState } from 'react'
+      import { useSignUp } from '@clerk/nextjs'
+      import { useRouter } from 'next/navigation'
+
+      export default function Page() {
+        const router = useRouter()
+        // Use `useSignUp()` hook to access the `SignUp` object
+        // `missing_requirements` and `missingFields` are only available on the `SignUp` object
+        const { isLoaded, signUp, setActive } = useSignUp()
+        const [formData, setFormData] = useState<Record<string, string>>({})
+
+        if (!isLoaded) return <div>Loading…</div>
+
+        // Protect the page from users who are not in the sign-up flow
+        // such as users who visited this route directly
+        if (!signUp.id) router.push('/sign-in')
+
+        const status = signUp?.status
+        const missingFields = signUp?.missingFields ?? []
+
+        const handleChange = (field: string, value: string) => {
+          setFormData((prev) => ({ ...prev, [field]: value }))
+        }
+
+        const handleSubmit = async (e: React.FormEvent) => {
+          e.preventDefault()
+          try {
+            // Update the `SignUp` object with the missing fields
+            // The logic that goes here will depend on your instance settings
+            // E.g. if your app requires a phone number, you will need to collect and verify it here
+            const res = await signUp?.update(formData)
+            if (res?.status === 'complete') {
+              await setActive({
+                session: res.createdSessionId,
+                navigate: async ({ session }) => {
+                  if (session?.currentTask) {
+                    // Check for tasks and navigate to custom UI to help users resolve them
+                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                    console.log(session?.currentTask)
+                    router.push('/sign-in/tasks')
+                    return
+                  }
+
+                  router.push('/')
+                },
+              })
+            }
+          } catch (err) {
+            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+            // for more info on error handling
+            console.error(JSON.stringify(err, null, 2))
+          }
+        }
+
+        if (status === 'missing_requirements') {
+          // For simplicity, all missing fields in this example are text inputs.
+          // In a real app, you might want to handle them differently:
+          // - legal_accepted: checkbox
+          // - username: text with validation
+          // - phone_number: phone input, etc.
+          return (
+            <div>
+              <h1>Continue sign-up</h1>
+              <form onSubmit={handleSubmit}>
+                {missingFields.map((field) => (
+                  <div key={field}>
+                    <label>
+                      {field}:
+                      <input
+                        type="text"
+                        value={formData[field] || ''}
+                        onChange={(e) => handleChange(field, e.target.value)}
+                      />
+                    </label>
+                  </div>
+                ))}
+
+                {/* Required for sign-up flows
+                Clerk's bot sign-up protection is enabled by default */}
+                <div id="clerk-captcha" />
+
+                <button type="submit">Submit</button>
+              </form>
+            </div>
+          )
+        }
+
+        // Handle other statuses if needed
+        return (
+          <>
+            {/* Required for sign-up flows
+            Clerk's bot sign-up protection is enabled by default */}
+            <div id="clerk-captcha" />
+          </>
+        )
+      }
+      ```
+
+      ```tsx {{ filename: 'app/sign-in/sso-callback/page.tsx' }}
+      import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'
+
+      export default function Page() {
+        // Set the `continueSignUpUrl` to the route of your "Continue" page
+        // Once a user authenticates with the OAuth provider, they will be redirected to that route
+        return (
+          <>
+            <AuthenticateWithRedirectCallback continueSignUpUrl="/sign-in/continue" />
+
+            {/* Required for sign-up flows
+            Clerk's bot sign-up protection is enabled by default */}
+            <div id="clerk-captcha" />
+          </>
+        )
+      }
+      ```
+    </CodeBlockTabs>
+  </Tab>
+</Tabs>
diff --git a/docs/guides/development/custom-flows/authentication/legacy/passkeys.mdx b/docs/guides/development/custom-flows/authentication/legacy/passkeys.mdx
new file mode 100644
index 0000000000..5d40dda194
--- /dev/null
+++ b/docs/guides/development/custom-flows/authentication/legacy/passkeys.mdx
@@ -0,0 +1,197 @@
+---
+title: Build a custom authentication flow using passkeys
+description: Learn how to use the Clerk API to build a custom authentication flow using passkeys.
+---
+
+<Include src="_partials/custom-flows-callout" />
+
+Clerk supports passwordless authentication via [passkeys](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#passkeys), enabling users to sign in without having to remember a password. Instead, users select a passkey associated with their device, which they can use to authenticate themselves.
+
+This guide demonstrates how to use the Clerk API to build a custom user interface for creating, signing users in with, and managing passkeys.
+
+## Enable passkeys
+
+To use passkeys, you must first enable it for your application.
+
+1. In the Clerk Dashboard, navigate to the [**User & authentication**](https://dashboard.clerk.com/last-active?path=user-authentication/user-and-authentication) page.
+1. Select the **Passkeys** tab and enable **Sign-in with passkey**.
+
+### Domain restrictions for passkeys
+
+<Include src="_partials/authentication/passkeys-restriction" />
+
+## Create user passkeys
+
+To create a passkey for a user, you must call [`User.createPasskey()`](/docs/reference/javascript/user#create-passkey), as shown in the following example:
+
+```tsx {{ filename: 'app/components/CustomCreatePasskeysButton.tsx' }}
+export function CreatePasskeyButton() {
+  const { isSignedIn, user } = useUser()
+
+  const createClerkPasskey = async () => {
+    if (!isSignedIn) {
+      // Handle signed out state
+      return
+    }
+
+    try {
+      await user?.createPasskey()
+    } catch (err) {
+      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+      // for more info on error handling
+      console.error('Error:', JSON.stringify(err, null, 2))
+    }
+  }
+
+  return <button onClick={createClerkPasskey}>Create a passkey</button>
+}
+```
+
+## Sign a user in with a passkey
+
+To sign a user into your Clerk app with a passkey, you must call [`SignIn.authenticateWithPasskey()`](/docs/reference/javascript/sign-in#authenticate-with-passkey). This method allows users to choose from their discoverable passkeys, such as hardware keys or passkeys in password managers.
+
+```tsx {{ filename: 'components/SignInWithPasskeyButton.tsx' }}
+export function SignInWithPasskeyButton() {
+  const { signIn } = useSignIn()
+  const router = useRouter()
+
+  const signInWithPasskey = async () => {
+    // 'discoverable' lets the user choose a passkey
+    // without auto-filling any of the options
+    try {
+      const signInAttempt = await signIn?.authenticateWithPasskey({
+        flow: 'discoverable',
+      })
+
+      if (signInAttempt?.status === 'complete') {
+        await setActive({
+          session: signInAttempt.createdSessionId,
+          redirectUrl: '/',
+          navigate: async ({ session }) => {
+            if (session?.currentTask) {
+              // Check for tasks and navigate to custom UI to help users resolve them
+              // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+              console.log(session?.currentTask)
+              return
+            }
+
+            router.push('/')
+          },
+        })
+      } else {
+        // If the status is not complete, check why. User may need to
+        // complete further steps.
+        console.error(JSON.stringify(signInAttempt, null, 2))
+      }
+    } catch (err) {
+      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+      // for more info on error handling
+      console.error('Error:', JSON.stringify(err, null, 2))
+    }
+  }
+
+  return <button onClick={signInWithPasskey}>Sign in with a passkey</button>
+}
+```
+
+## Rename user passkeys
+
+Clerk generates a name based on the device associated with the passkey when it's created. Sometimes users may want to rename a passkey to make it easier to identify.
+
+To rename a user's passkey in your Clerk app, you must call the [`update()`](/docs/reference/javascript/types/passkey-resource#update) method of the passkey object, as shown in the following example:
+
+```tsx {{ filename: 'components/RenamePasskeyUI.tsx' }}
+export function RenamePasskeyUI() {
+  const { user } = useUser()
+  const { passkeys } = user
+
+  const passkeyToUpdateId = useRef<HTMLInputElement>(null)
+  const newPasskeyName = useRef<HTMLInputElement>(null)
+  const [success, setSuccess] = useState(false)
+
+  const renamePasskey = async () => {
+    try {
+      const passkeyToUpdate = passkeys?.find(
+        (pk: PasskeyResource) => pk.id === passkeyToUpdateId.current?.value,
+      )
+
+      await passkeyToUpdate?.update({
+        name: newPasskeyName.current?.value,
+      })
+
+      setSuccess(true)
+    } catch (err) {
+      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+      // for more info on error handling
+      console.error('Error:', JSON.stringify(err, null, 2))
+      setSuccess(false)
+    }
+  }
+
+  return (
+    <>
+      <p>Passkeys:</p>
+      <ul>
+        {passkeys?.map((pk: PasskeyResource) => {
+          return (
+            <li key={pk.id}>
+              Name: {pk.name} | ID: {pk.id}
+            </li>
+          )
+        })}
+      </ul>
+      <input ref={passkeyToUpdateId} type="text" placeholder="Enter the passkey ID" />
+      <input type="text" placeholder="Enter the passkey's new name" ref={newPasskeyName} />
+      <button onClick={renamePasskey}>Rename passkey</button>
+      <p>Passkey updated: {success ? 'Yes' : 'No'}</p>
+    </>
+  )
+}
+```
+
+## Delete user passkeys
+
+To delete a user's passkey from your Clerk app, you must call the [`delete()`](/docs/reference/javascript/types/passkey-resource#delete) method of the passkey object, as shown in the following example:
+
+```tsx {{ filename: 'components/DeletePasskeyUI.tsx' }}
+export function DeletePasskeyUI() {
+  const { user } = useUser()
+  const { passkeys } = user
+
+  const passkeyToDeleteId = useRef<HTMLInputElement>(null)
+  const [success, setSuccess] = useState(false)
+
+  const deletePasskey = async () => {
+    const passkeyToDelete = passkeys?.find((pk: any) => pk.id === passkeyToDeleteId.current?.value)
+    try {
+      await passkeyToDelete?.delete()
+
+      setSuccess(true)
+    } catch (err) {
+      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+      // for more info on error handling
+      console.error('Error:', JSON.stringify(err, null, 2))
+      setSuccess(false)
+    }
+  }
+
+  return (
+    <>
+      <p>Passkeys:</p>
+      <ul>
+        {passkeys?.map((pk: any) => {
+          return (
+            <li key={pk.id}>
+              Name: {pk.name} | ID: {pk.id}
+            </li>
+          )
+        })}
+      </ul>
+      <input ref={passkeyToDeleteId} type="text" placeholder="Enter the passkey ID" />
+      <button onClick={deletePasskey}>Delete passkey</button>
+      <p>Passkey deleted: {success ? 'Yes' : 'No'}</p>
+    </>
+  )
+}
+```
diff --git a/docs/guides/development/custom-flows/authentication/oauth-connections.mdx b/docs/guides/development/custom-flows/authentication/oauth-connections.mdx
index 4a722abfd6..c24a8bc025 100644
--- a/docs/guides/development/custom-flows/authentication/oauth-connections.mdx
+++ b/docs/guides/development/custom-flows/authentication/oauth-connections.mdx
@@ -1,6 +1,7 @@
 ---
 title: Build a custom flow for authenticating with OAuth connections
 description: Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports OAuth connections.
+sdk: nextjs, react, expo, js-frontend, react-router, tanstack-react-start
 ---
 
 <Include src="_partials/custom-flows-callout" />
@@ -21,65 +22,33 @@ You must configure your application instance through the Clerk Dashboard for the
 
     <Include src="_partials/custom-flows/sso-connections" />
 
-    <CodeBlockTabs options={["Sign in page", "SSO callback page"]}>
-      ```tsx {{ filename: 'app/sign-in/page.tsx' }}
-      'use client'
+    ```tsx {{ filename: 'app/sign-in/page.tsx' }}
+    'use client'
 
-      import * as React from 'react'
-      import { OAuthStrategy } from '@clerk/types'
-      import { useSignIn } from '@clerk/nextjs'
+    import * as React from 'react'
+    import { OAuthStrategy } from '@clerk/types'
+    import { useSignIn } from '@clerk/nextjs'
 
-      export default function Page() {
-        const { signIn } = useSignIn()
-
-        if (!signIn) return null
-
-        const signInWith = (strategy: OAuthStrategy) => {
-          return signIn
-            .authenticateWithRedirect({
-              strategy,
-              redirectUrl: '/sign-in/sso-callback',
-              redirectUrlComplete: '/sign-in/tasks', // Learn more about session tasks at https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-            })
-            .then((res) => {
-              console.log(res)
-            })
-            .catch((err: any) => {
-              // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-              // for more info on error handling
-              console.log(err.errors)
-              console.error(err, null, 2)
-            })
-        }
-
-        // Render a button for each supported OAuth provider
-        // you want to add to your app. This example uses only Google.
-        return (
-          <div>
-            <button onClick={() => signInWith('oauth_google')}>Sign in with Google</button>
-          </div>
-        )
+    export default function Page() {
+      const { signIn } = useSignIn()
+
+      const signInWith = async (strategy: OAuthStrategy) => {
+        await signIn.sso({
+          strategy,
+          redirectCallbackUrl: '/sign-in',
+          redirectUrl: '/sign-in/tasks', // Learn more about session tasks at https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+        })
       }
-      ```
-
-      ```tsx {{ filename: 'app/sign-in/sso-callback/page.tsx' }}
-      import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'
 
-      export default function Page() {
-        // Handle the redirect flow by calling the Clerk.handleRedirectCallback() method
-        // or rendering the prebuilt <AuthenticateWithRedirectCallback/> component.
-        return (
-          <>
-            <AuthenticateWithRedirectCallback />
-
-            {/* Required for sign-up flows
-            Clerk's bot sign-up protection is enabled by default */}
-            <div id="clerk-captcha" />
-          </>
-        )
-      }
-      ```
-    </CodeBlockTabs>
+      // Render a button for each supported OAuth provider
+      // you want to add to your app. This example uses only Google.
+      return (
+        <div>
+          <button onClick={() => signInWith('oauth_google')}>Sign in with Google</button>
+        </div>
+      )
+    }
+    ```
   </Tab>
 
   <Tab>
@@ -348,131 +317,90 @@ You must configure your application instance through the Clerk Dashboard for the
 
 ## Handle missing requirements
 
-Depending on your instance settings, users might need to provide extra information before their sign-up can be completed, such as when a username or accepting legal terms is required. In these cases, the `SignUp` object returns a status of `"missing_requirements"` along with a `missingFields` array. You can create a "Continue" page to collect these missing fields and complete the sign-up flow. Handling the missing requirements will depend on your instance settings. For example, if your instance settings require a phone number, you will need to [handle verifying the phone number](/docs/guides/development/custom-flows/authentication/email-sms-otp#sign-up-flow).
+Depending on your instance settings, users might need to provide extra information before their sign-up can be completed, such as when a username or accepting legal terms is required. In these cases, the `SignUp` object returns a status of `"missing_requirements"` along with a `missingFields` array. You can use your existing sign-up page to collect these missing fields and complete the sign-up flow. Handling the missing requirements will depend on your instance settings. For example, if your instance settings require a phone number, you will need to [handle verifying the phone number](/docs/guides/development/custom-flows/authentication/email-sms-otp#sign-up-flow).
 
 With OAuth flows, it's common for users to try to _sign in_ with an OAuth provider, but they don't have a Clerk account for your app yet. Clerk automatically transfers the flow from the `SignIn` object to the `SignUp` object, which returns the `"missing_requirements"` status and `missingFields` array needed to handle the missing requirements flow. This is why the "Continue" page uses the [`useSignUp()`](/docs/reference/hooks/use-sign-up) hook and treats the missing requirements flow as a sign-up flow.
 
 <Tabs items={["Next.js"]}>
   <Tab>
-    <CodeBlockTabs options={["Continue page", "SSO callback page"]}>
-      ```tsx {{ filename: 'app/sign-in/continue/page.tsx' }}
-      'use client'
-
-      import { useState } from 'react'
-      import { useSignUp } from '@clerk/nextjs'
-      import { useRouter } from 'next/navigation'
+    ```tsx {{ filename: 'app/sign-up/page.tsx' }}
+    'use client'
 
-      export default function Page() {
-        const router = useRouter()
-        // Use `useSignUp()` hook to access the `SignUp` object
-        // `missing_requirements` and `missingFields` are only available on the `SignUp` object
-        const { isLoaded, signUp, setActive } = useSignUp()
-        const [formData, setFormData] = useState<Record<string, string>>({})
+    import { useState } from 'react'
+    import { useSignUp } from '@clerk/nextjs'
+    import { useRouter } from 'next/navigation'
 
-        if (!isLoaded) return <div>Loading…</div>
-
-        // Protect the page from users who are not in the sign-up flow
-        // such as users who visited this route directly
-        if (!signUp.id) router.push('/sign-in')
-
-        const status = signUp?.status
-        const missingFields = signUp?.missingFields ?? []
-
-        const handleChange = (field: string, value: string) => {
-          setFormData((prev) => ({ ...prev, [field]: value }))
-        }
-
-        const handleSubmit = async (e: React.FormEvent) => {
-          e.preventDefault()
-          try {
-            // Update the `SignUp` object with the missing fields
-            // The logic that goes here will depend on your instance settings
-            // E.g. if your app requires a phone number, you will need to collect and verify it here
-            const res = await signUp?.update(formData)
-            if (res?.status === 'complete') {
-              await setActive({
-                session: res.createdSessionId,
-                navigate: async ({ session }) => {
-                  if (session?.currentTask) {
-                    // Check for tasks and navigate to custom UI to help users resolve them
-                    // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
-                    console.log(session?.currentTask)
-                    router.push('/sign-in/tasks')
-                    return
-                  }
-
-                  router.push('/')
-                },
-              })
-            }
-          } catch (err) {
-            // See https://clerk.com/docs/guides/development/custom-flows/error-handling
-            // for more info on error handling
-            console.error(JSON.stringify(err, null, 2))
-          }
-        }
+    function snakeToCamel(str: string | undefined): string {
+      return str ? str.replace(/([-_][a-z])/g, (match) => match.toUpperCase().replace(/-|_/, '')) : ''
+    }
 
-        if (status === 'missing_requirements') {
-          // For simplicity, all missing fields in this example are text inputs.
-          // In a real app, you might want to handle them differently:
-          // - legal_accepted: checkbox
-          // - username: text with validation
-          // - phone_number: phone input, etc.
-          return (
-            <div>
-              <h1>Continue sign-up</h1>
-              <form onSubmit={handleSubmit}>
-                {missingFields.map((field) => (
-                  <div key={field}>
-                    <label>
-                      {field}:
-                      <input
-                        type="text"
-                        value={formData[field] || ''}
-                        onChange={(e) => handleChange(field, e.target.value)}
-                      />
-                    </label>
-                  </div>
-                ))}
-
-                {/* Required for sign-up flows
-                Clerk's bot sign-up protection is enabled by default */}
-                <div id="clerk-captcha" />
-
-                <button type="submit">Submit</button>
-              </form>
-            </div>
-          )
+    export default function Page() {
+      const router = useRouter()
+      // Use `useSignUp()` hook to access the `SignUp` object
+      // `missing_requirements` and `missingFields` are only available on the `SignUp` object
+      const { signUp } = useSignUp()
+
+      const handleSubmit = async (formData: FormData) => {
+        const params = Object.fromEntries(formData.entries()) as any
+        // Update the `SignUp` object with the missing fields
+        // The logic that goes here will depend on your instance settings
+        // E.g. if your app requires a phone number, you will need to collect and verify it here
+        await signUp.update(params)
+        if (signUp.status === 'complete') {
+          await signUp.finalize({
+            navigate: async ({ session }) => {
+              if (session?.currentTask) {
+                // Check for tasks and navigate to custom UI to help users resolve them
+                // See https://clerk.com/docs/guides/development/custom-flows/overview#session-tasks
+                console.log(session?.currentTask)
+                router.push('/sign-in/tasks')
+                return
+              }
+
+              router.push('/')
+            },
+          })
         }
-
-        // Handle other statuses if needed
-        return (
-          <>
-            {/* Required for sign-up flows
-            Clerk's bot sign-up protection is enabled by default */}
-            <div id="clerk-captcha" />
-          </>
-        )
       }
-      ```
-
-      ```tsx {{ filename: 'app/sign-in/sso-callback/page.tsx' }}
-      import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'
 
-      export default function Page() {
-        // Set the `continueSignUpUrl` to the route of your "Continue" page
-        // Once a user authenticates with the OAuth provider, they will be redirected to that route
+      if (signUp.status === 'missing_requirements') {
+        // For simplicity, all missing fields in this example are text inputs.
+        // In a real app, you might want to handle them differently:
+        // - legal_accepted: checkbox
+        // - username: text with validation
+        // - phone_number: phone input, etc.
         return (
-          <>
-            <AuthenticateWithRedirectCallback continueSignUpUrl="/sign-in/continue" />
-
-            {/* Required for sign-up flows
-            Clerk's bot sign-up protection is enabled by default */}
-            <div id="clerk-captcha" />
-          </>
+          <div>
+            <h1>Continue sign-up</h1>
+            <form action={handleSubmit}>
+              {signUp.missingFields.map((field) => (
+                <div key={field}>
+                  <label>
+                    {field}:
+                    <input type="text" name={snakeToCamel(field)} />
+                  </label>
+                </div>
+              ))}
+
+              {/* Required for sign-up flows
+              Clerk's bot sign-up protection is enabled by default */}
+              <div id="clerk-captcha" />
+
+              <button type="submit">Submit</button>
+            </form>
+          </div>
         )
       }
-      ```
-    </CodeBlockTabs>
+
+      // Handle other statuses if needed
+      return (
+        <>
+          {/* Required for sign-up flows
+          Clerk's bot sign-up protection is enabled by default */}
+          <div id="clerk-captcha" />
+        </>
+      )
+    }
+    ```
   </Tab>
 </Tabs>
diff --git a/docs/guides/development/custom-flows/authentication/sign-out.mdx b/docs/guides/development/custom-flows/authentication/sign-out.mdx
index 01ee0d2ba1..4f0843eea5 100644
--- a/docs/guides/development/custom-flows/authentication/sign-out.mdx
+++ b/docs/guides/development/custom-flows/authentication/sign-out.mdx
@@ -1,6 +1,7 @@
 ---
 title: Build a custom sign-out flow
 description: Learn how to use the Clerk API to build a custom sign-out flow using Clerk's signOut() function.
+sdk: nextjs, react, expo, js-frontend, react-router, tanstack-react-start, ios, android
 ---
 
 <Include src="_partials/custom-flows-callout" />
diff --git a/docs/manifest.json b/docs/manifest.json
index a6259f5b79..5600524236 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -993,6 +993,50 @@
                               {
                                 "title": "Bot sign-up protection",
                                 "href": "/docs/guides/development/custom-flows/authentication/bot-sign-up-protection"
+                              },
+                              {
+                                "title": "Legacy APIs",
+                                "collapse": true,
+                                "items": [
+                                  [
+                                    {
+                                      "title": "Email & password",
+                                      "href": "/docs/guides/development/custom-flows/authentication/legacy/email-password"
+                                    },
+                                    {
+                                      "title": "Email / SMS OTP",
+                                      "href": "/docs/guides/development/custom-flows/authentication/legacy/email-sms-otp"
+                                    },
+                                    {
+                                      "title": "Email links",
+                                      "href": "/docs/guides/development/custom-flows/authentication/legacy/email-links"
+                                    },
+                                    {
+                                      "title": "Email & password + MFA",
+                                      "href": "/docs/guides/development/custom-flows/authentication/legacy/email-password-mfa"
+                                    },
+                                    {
+                                      "title": "Passkeys",
+                                      "href": "/docs/guides/development/custom-flows/authentication/legacy/passkeys"
+                                    },
+                                    {
+                                      "title": "OAuth connections",
+                                      "href": "/docs/guides/development/custom-flows/authentication/legacy/oauth-connections"
+                                    },
+                                    {
+                                      "title": "Enterprise connections",
+                                      "href": "/docs/guides/development/custom-flows/authentication/legacy/enterprise-connections"
+                                    },
+                                    {
+                                      "title": "Sign-up with application invitations",
+                                      "href": "/docs/guides/development/custom-flows/authentication/legacy/application-invitations"
+                                    },
+                                    {
+                                      "title": "Embedded email links",
+                                      "href": "/docs/guides/development/custom-flows/authentication/legacy/embedded-email-links"
+                                    }
+                                  ]
+                                ]
                               }
                             ]
                           ]
@@ -1602,10 +1646,18 @@
                           "title": "`SignIn`",
                           "href": "/docs/reference/javascript/sign-in"
                         },
+                        {
+                          "title": "`SignInFuture`",
+                          "href": "/docs/reference/javascript/sign-in-future"
+                        },
                         {
                           "title": "`SignUp`",
                           "href": "/docs/reference/javascript/sign-up"
                         },
+                        {
+                          "title": "`SignUpFuture`",
+                          "href": "/docs/reference/javascript/sign-up-future"
+                        },
                         {
                           "title": "`Organization`",
                           "href": "/docs/reference/javascript/organization"
@@ -2947,6 +2999,22 @@
                           "title": "`useStatements()`",
                           "href": "/docs/reference/hooks/use-statements",
                           "tag": "(Beta)"
+                        },
+                        {
+                          "title": "Legacy APIs",
+                          "collapse": true,
+                          "items": [
+                            [
+                              {
+                                "title": "`useSignIn()`",
+                                "href": "/docs/reference/hooks/legacy/use-sign-in"
+                              },
+                              {
+                                "title": "`useSignUp()`",
+                                "href": "/docs/reference/hooks/legacy/use-sign-up"
+                              }
+                            ]
+                          ]
                         }
                       ]
                     ]
diff --git a/docs/reference/hooks/legacy/use-sign-in.mdx b/docs/reference/hooks/legacy/use-sign-in.mdx
new file mode 100644
index 0000000000..3d6c961c55
--- /dev/null
+++ b/docs/reference/hooks/legacy/use-sign-in.mdx
@@ -0,0 +1,10 @@
+---
+title: useSignIn()
+description: Access and manage the current user's sign-in state in your React application with Clerk's useSignIn() hook.
+sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+---
+
+> [!WARNING]
+> This hook uses our legacy API, which will be removed in a future release. We recommend migrating to the new [`useSignIn()`](/docs/reference/hooks/use-sign-in) hook instead.
+
+<Typedoc src="clerk-react/use-sign-in" />
diff --git a/docs/reference/hooks/legacy/use-sign-up.mdx b/docs/reference/hooks/legacy/use-sign-up.mdx
new file mode 100644
index 0000000000..042c814aa9
--- /dev/null
+++ b/docs/reference/hooks/legacy/use-sign-up.mdx
@@ -0,0 +1,10 @@
+---
+title: useSignUp()
+description: Access and manage the current user's sign-up state in your React application with Clerk's useSignUp() hook.
+sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+---
+
+> [!WARNING]
+> This hook uses our legacy API, which will be removed in a future release. We recommend migrating to the new [`useSignUp()`](/docs/reference/hooks/use-sign-up) hook instead.
+
+<Typedoc src="clerk-react/use-sign-up" />
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index bddec03f46..cd120990be 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -4,4 +4,29 @@ description: Access and manage the current user's sign-in state in your React ap
 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-sign-in" />
+The `useSignIn()` hook provides access to the [`SignInFuture`](/docs/reference/javascript/sign-in-future) object, which allows you to check the current state of a sign-in attempt and manage the sign-in flow. You can use this to create a [custom sign-in flow](/docs/guides/development/custom-flows/overview#sign-in-flow).
+
+## Returns
+
+<Properties>
+  - `signIn`
+  - [`SignInFuture`](/docs/reference/javascript/sign-in-future)
+
+  The current active `SignInFuture` instance, for use in custom flows.
+
+  ---
+
+  - `errors`
+  - `Errors`
+
+  The errors that occurred during the last API request.
+
+  ---
+
+  - `fetchStatus`
+  - `'idle' | 'fetching'`
+
+  The fetch status of the underlying `SignInFuture` resource.
+</Properties>
+
+## Examples
diff --git a/docs/reference/hooks/use-sign-up.mdx b/docs/reference/hooks/use-sign-up.mdx
index e9d38edece..ede88cb98c 100644
--- a/docs/reference/hooks/use-sign-up.mdx
+++ b/docs/reference/hooks/use-sign-up.mdx
@@ -4,4 +4,27 @@ description: Access and manage the current user's sign-up state in your React ap
 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-sign-up" />
+The `useSignUp()` hook provides access to the [`SignUpFuture`](/docs/reference/javascript/sign-up-future) object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. You can use this to create a [custom sign-up flow](/docs/guides/development/custom-flows/overview#sign-up-flow).
+
+## Returns
+
+<Properties>
+  - `SignUp`
+  - [`SignUpFuture`](/docs/reference/javascript/sign-up-future)
+
+  The current active `SignUpFuture` instance, for use in custom flows.
+
+  ---
+
+  - `errors`
+  - `Errors`
+
+  The errors that occurred during the last API request.
+
+  ---
+
+  - `fetchStatus`
+  - `'idle' | 'fetching'`
+
+  The fetch status of the underlying `SignUpFuture` resource.
+</Properties>
diff --git a/docs/reference/javascript/sign-in-future.mdx b/docs/reference/javascript/sign-in-future.mdx
new file mode 100644
index 0000000000..0e84bd44df
--- /dev/null
+++ b/docs/reference/javascript/sign-in-future.mdx
@@ -0,0 +1,495 @@
+---
+title: '`SignInFuture`'
+description: The current active `SignIn` instance, for use in custom flows.
+sdk: js-frontend
+---
+
+<Include src="_partials/custom-flows/future-api-callout" />
+
+The `SignInFuture` class holds the state of the current sign-in and provides helper methods to navigate and complete the sign-in process. It is used to manage the sign-in lifecycle, including the first and second factor verification, and the creation of a new session.
+
+## Properties
+
+<Properties>
+  - `createdSessionId`
+  - `null | string`
+
+  The identifier of the session that was created upon completion of the current sign-in. The value of this property is `null` if the sign-in status is not `'complete'`.
+
+  ---
+
+  - `existingSession?`
+  - `{ sessionId: string }`
+
+  TKTKTK
+
+  ---
+
+  - `firstFactorVerification`
+  - `VerificationResource`
+
+  The state of the verification process for the selected first factor. Initially, this property contains an empty verification object, since there is no first factor selected.
+
+  ---
+
+  - `id?`
+  - `string`
+
+  The unique identifier for the current sign-in attempt.
+
+  ---
+
+  - `identifier`
+  - `null | string`
+
+  The authentication identifier value for the current sign-in. `null` if the `strategy` is `'oauth_<provider>'` or `'enterprise_sso'`.
+
+  ---
+
+  - `isTransferable`
+  - `boolean`
+
+  Indicates that there is not a matching user for the first-factor verification used, and that the sign-in can be transferred to a sign-up.
+
+  ---
+
+  - `secondFactorVerification`
+  - `VerificationResource`
+
+  The state of the verification process for the selected second factor. Initially, this property contains an empty verification object, since there is no second factor selected.
+
+  ---
+
+  - `status`
+  - `SignInStatus`
+
+  The current status of the sign-in.
+
+  ---
+
+  - `supportedFirstFactors`
+  - `SignInFirstFactor[]`
+
+  Array of the first factors that are supported in the current sign-in. Each factor contains information about the verification strategy that can be used.
+
+  ---
+
+  - `supportedSecondFactors`
+  - `SignInSecondFactor[]`
+
+  Array of the second factors that are supported in the current sign-in. Each factor contains information about the verification strategy that can be used. his property is populated only when the first factor is verified.
+
+  ---
+
+  - `userData`
+  - `UserData`
+
+  An object containing information about the user of the current sign-in. This property is populated only once an identifier is given to the `SignIn` object through `signIn.create()` or another method that populates the `identifier` property.
+</Properties>
+
+## Methods
+
+### `create()`
+
+Creates a new `SignIn` instance initialized with the provided parameters. The instance maintains the sign-in lifecycle state through its `status` property, which updates as the authentication flow progresses.
+
+What you must pass to `params` depends on which [sign-in options](/docs/guides/configure/auth-strategies/sign-up-sign-in-options) you have enabled in your app's settings in the Clerk Dashboard.
+
+You can complete the sign-in process in one step if you supply the required fields to `create()`. Otherwise, Clerk's sign-in process provides great flexibility and allows users to easily create multi-step sign-in flows.
+
+> [!WARNING]
+> Once the sign-in process is complete, call the `signIn.finalize()` method to set the newly created session as the active session.
+
+```ts
+function create(params: SignInFutureCreateParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureCreateParams`
+
+TKTKTK
+
+<Properties>
+  - `actionCompleteRedirectUrl?`
+  - `string`
+
+  The URL that the user will be redirected to, after successful authorization from the OAuth provider and Clerk sign-in.
+
+  ---
+
+  - `identifier?`
+  - `string`
+
+  The authentication identifier for the sign-in. This can be the value of the user's email address, phone number, username, or Web3 wallet address.
+
+  ---
+
+  - `redirectUrl?`
+  - `string`
+
+  The full URL or path that the OAuth provider should redirect to after successful authorization on their part.
+
+  ---
+
+  - `strategy?`
+  - `OAuthStrategy | "saml" | "enterprise_sso"`
+
+  The first factor verification strategy to use in the sign-in flow. Depends on the `identifier` value. Each authentication identifier supports different verification strategies.
+
+  ---
+
+  - `ticket?`
+  - `string`
+
+  The [ticket _or token_](/docs/guides/development/custom-flows/authentication/application-invitations) generated from the Backend API. **Required** if `strategy` is set to `'ticket'`.
+
+  ---
+
+  - `transfer?`
+  - `boolean`
+
+  When set to `true`, the `SignIn` will attempt to retrieve information from the active `SignUp` instance and use it to complete the sign-in process. This is useful when you want to seamlessly transition a user from a sign-up attempt to a sign-in attempt.
+</Properties>
+
+### `emailCode.sendCode()`
+
+Used to send an email code to sign-in
+
+```ts
+function sendCode(params: SignInFutureEmailCodeSendParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureEmailCodeSendParams`
+
+TKTKTK
+
+<Properties>
+  - `emailAddress?`
+  - `string`
+
+  The user's email address. Only supported if [Email address](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#email) is enabled.
+
+  ---
+
+  - `emailAddressId?`
+  - `string`
+
+  The ID for the user's email address that will receive an email with the one-time authentication code.
+</Properties>
+
+### `emailCode.verifyCode()`
+
+Used to verify a code sent via email to sign-in
+
+```ts
+function verifyCode(params: SignInFutureEmailCodeVerifyParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureEmailCodeVerifyParams`
+
+TKTKTK
+
+<Properties>
+  - `code`
+  - `string`
+
+  The one-time code that was sent to the user.
+</Properties>
+
+### `emailLink.sendLink()`
+
+Used to send an email link to sign-in
+
+```ts
+function sendLink(params: SignInFutureEmailLinkSendParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureEmailLinkSendParams`
+
+TKTKTK
+
+<Properties>
+  - `verificationUrl`
+  - `string`
+
+  The full URL that the user will be redirected to when they visit the email link.
+</Properties>
+
+### `emailLink.waitForVerification()`
+
+Will wait for verification to complete or expire
+
+```ts
+function waitForVerification(): Promise<{ error: unknown }>
+```
+
+### `finalize()`
+
+Used to convert a sign-in with `status === 'complete'` into an active session. Will cause anything observing the session state (such as the `useUser()` hook) to update automatically.
+
+```ts
+function finalize(params?: SignInFutureFinalizeParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureFinalizeParams`
+
+TKTKTK
+
+<Properties>
+  - `navigate?`
+  - `SetActiveNavigate`
+
+  TKTKTK
+</Properties>
+
+### `mfa.sendPhoneCode()`
+
+Used to send a phone code as a second factor to sign-in
+
+```ts
+function sendPhoneCode(): Promise<{ error: unknown }>
+```
+
+### `mfa.verifyBackupCode()`
+
+Used to verify a backup code as a second factor to sign-in
+
+```ts
+function verifyBackupCode(params: SignInFutureBackupCodeVerifyParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureBackupCodeVerifyParams`
+
+TKTKTK
+
+<Properties>
+  - `code`
+  - `string`
+
+  The backup code that was provided to the user when they set up two-step authentication.
+</Properties>
+
+### `mfa.verifyPhoneCode()`
+
+Used to verify a phone code sent as a second factor to sign-in
+
+```ts
+function verifyPhoneCode(params: SignInFutureMFAPhoneCodeVerifyParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureMFAPhoneCodeVerifyParams`
+
+TKTKTK
+
+<Properties>
+  - `code`
+  - `string`
+
+  The one-time code that was sent to the user as part of the `signIn.mfa.sendPhoneCode()` method.
+</Properties>
+
+### `mfa.verifyTOTP()`
+
+Used to verify a TOTP code as a second factor to sign-in
+
+```ts
+function verifyTOTP(params: SignInFutureTOTPVerifyParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureTOTPVerifyParams`
+
+TKTKTK
+
+<Properties>
+  - `code`
+  - `string`
+
+  The TOTP generated by the user's authenticator app.
+</Properties>
+
+### `password()`
+
+Used to submit a password to sign-in.
+
+```ts
+function password(params: SignInFuturePasswordParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFuturePasswordParams`
+
+TKTKTK
+
+<Properties>
+  - `password`
+  - `string`
+
+  The user's password. Only supported if [password](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#password) is enabled.
+</Properties>
+
+### `phoneCode.sendCode()`
+
+Used to send a phone code to sign-in
+
+```ts
+function sendCode(params: SignInFuturePhoneCodeSendParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFuturePhoneCodeSendParams`
+
+TKTKTK
+
+<Properties>
+  - `channel?`
+  - `PhoneCodeChannel`
+
+  The mechanism to use to send the code to the provided phone number. Defaults to `'sms'`.
+</Properties>
+
+### `phoneCode.verifyCode()`
+
+Used to verify a code sent via phone to sign-in
+
+```ts
+function verifyCode(params: SignInFuturePhoneCodeVerifyParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFuturePhoneCodeVerifyParams`
+
+TKTKTK
+
+<Properties>
+  - `code`
+  - `string`
+
+  The one-time code that was sent to the user.
+</Properties>
+
+### `resetPasswordEmailCode.sendCode()`
+
+Used to send a password reset code to the first email address on the account
+
+```ts
+function sendCode(): Promise<{ error: unknown }>
+```
+
+### `resetPasswordEmailCode.submitPassword()`
+
+Used to submit a new password, and move the `signIn.status` to `'complete'`.
+
+```ts
+function submitPassword(params: SignInFutureResetPasswordSubmitParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureResetPasswordSubmitParams`
+
+TKTKTK
+
+<Properties>
+  - `password`
+  - `string`
+
+  The new password for the user.
+
+  ---
+
+  - `signOutOfOtherSessions?`
+  - `boolean`
+
+  If `true`, signs the user out of all other authenticated sessions.
+</Properties>
+
+### `resetPasswordEmailCode.verifyCode()`
+
+Used to verify a password reset code sent via email. Will cause `signIn.status` to become `'needs_new_password'`.
+
+```ts
+function verifyCode(params: SignInFutureEmailCodeVerifyParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureEmailCodeVerifyParams`
+
+TKTKTK
+
+<Properties>
+  - `code`
+  - `string`
+
+  The one-time code that was sent to the user.
+</Properties>
+
+### `sso()`
+
+Used to perform OAuth authentication.
+
+```ts
+function sso(params: SignInFutureSSOParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureSSOParams`
+
+TKTKTK
+
+<Properties>
+  - `flow?`
+  - `"auto" | "modal"`
+
+  TKTKTK
+
+  ---
+
+  - `redirectCallbackUrl`
+  - `string`
+
+  TODO @revamp-hooks: This should be handled by FAPI instead.
+
+  ---
+
+  - `redirectUrl`
+  - `string`
+
+  The URL to redirect to after the user has completed the SSO flow.
+
+  ---
+
+  - `strategy`
+  - `OAuthStrategy | "saml" | "enterprise_sso"`
+
+  TKTKTK
+</Properties>
+
+### `ticket()`
+
+Used to perform a ticket-based sign-in.
+
+```ts
+function ticket(params?: SignInFutureTicketParams): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureTicketParams`
+
+TKTKTK
+
+<Properties>
+  - `ticket`
+  - `string`
+
+  The [ticket _or token_](/docs/guides/development/custom-flows/authentication/application-invitations) generated from the Backend API.
+</Properties>
+
+### `web3()`
+
+Used to perform a Web3-based sign-in.
+
+```ts
+function web3(params: SignInFutureWeb3Params): Promise<{ error: unknown }>
+```
+
+#### `SignInFutureWeb3Params`
+
+TKTKTK
+
+<Properties>
+  - `strategy`
+  - `"web3_base_signature" | "web3_metamask_signature" | "web3_coinbase_wallet_signature" | "web3_okx_wallet_signature"`
+
+  The verification strategy to validate the user's sign-in request.
+</Properties>
diff --git a/docs/reference/javascript/sign-up-future.mdx b/docs/reference/javascript/sign-up-future.mdx
new file mode 100644
index 0000000000..8f2531099b
--- /dev/null
+++ b/docs/reference/javascript/sign-up-future.mdx
@@ -0,0 +1,519 @@
+---
+title: '`SignUpFuture`'
+description: The current active `SignUp` instance, for use in custom flows.
+sdk: js-frontend
+---
+
+<Include src="_partials/custom-flows/future-api-callout" />
+
+The `SignUpFuture` object holds the state of the current sign-up attempt and provides methods to drive custom sign-up flows, including email/phone verification, password, SSO, ticket-based, and Web3-based account creation.
+
+## Properties
+
+<Properties>
+  - `abandonAt`
+  - `null | number`
+
+  The epoch numerical time when the sign-up was abandoned by the user.
+
+  ---
+
+  - `createdSessionId`
+  - `null | string`
+
+  The identifier of the newly-created session. This attribute is populated only when the sign-up is complete.
+
+  ---
+
+  - `createdUserId`
+  - `null | string`
+
+  The identifier of the newly-created user. This attribute is populated only when the sign-up is complete.
+
+  ---
+
+  - `emailAddress`
+  - `null | string`
+
+  The `emailAddress` supplied to the current sign-up. Only supported if [email address](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#email) is enabled in the instance settings.
+
+  ---
+
+  - `existingSession?`
+  - `{ sessionId: string }`
+
+  TKTKTK
+
+  ---
+
+  - `firstName`
+  - `null | string`
+
+  The `firstName` supplied to the current sign-up. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `hasPassword`
+  - `boolean`
+
+  The value of this attribute is true if a password was supplied to the current sign-up. Only supported if [password](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#password) is enabled in the instance settings.
+
+  ---
+
+  - `id?`
+  - `string`
+
+  The unique identifier of the current sign-up.
+
+  ---
+
+  - `isTransferable`
+  - `boolean`
+
+  Indicates that there is a matching user for provided identifier, and that the sign-up can be transferred to a sign-in.
+
+  ---
+
+  - `lastName`
+  - `null | string`
+
+  The `lastName` supplied to the current sign-up. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `legalAcceptedAt`
+  - `null | number`
+
+  The epoch numerical time when the user agreed to the [legal compliance](/docs/guides/secure/legal-compliance) documents.
+
+  ---
+
+  - `missingFields`
+  - `SignUpField[]`
+
+  An array of all the fields whose values are not supplied yet but they are mandatory in order for a sign-up to be marked as complete.
+
+  ---
+
+  - `optionalFields`
+  - `SignUpField[]`
+
+  An array of all the fields that can be supplied to the sign-up, but their absence does not prevent the sign-up from being marked as complete.
+
+  ---
+
+  - `phoneNumber`
+  - `null | string`
+
+  The `phoneNumber` supplied to the current sign-up in E.164 format. Only supported if [phone number](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#phone) is enabled in the instance settings.
+
+  ---
+
+  - `requiredFields`
+  - `SignUpField[]`
+
+  An array of all the required fields that need to be supplied and verified in order for this sign-up to be marked as complete and converted into a user.
+
+  ---
+
+  - `status`
+  - `SignUpStatus`
+
+  The status of the current sign-up.
+
+  ---
+
+  - `unsafeMetadata`
+  - `SignUpUnsafeMetadata`
+
+  Metadata that can be read and set from the frontend. Once the sign-up is complete, the value of this field will be automatically copied to the newly created user's unsafe metadata. One common use case for this attribute is to use it to implement custom fields that can be collected during sign-up and will automatically be attached to the created User object.
+
+  ---
+
+  - `unverifiedFields`
+  - `SignUpIdentificationField[]`
+
+  An array of all the fields whose values have been supplied, but they need additional verification in order for them to be accepted. Examples of such fields are `email_address` and `phone_number`.
+
+  ---
+
+  - `username`
+  - `null | string`
+
+  The `username` supplied to the current sign-up. Only supported if [username](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#username) is enabled in the instance settings.
+
+  ---
+
+  - `web3Wallet`
+  - `null | string`
+
+  The Web3 wallet address supplied to the current sign-up, made up of 0x + 40 hexadecimal characters. Only supported if [Web3 authentication](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#web3-authentication) is enabled in the instance settings.
+</Properties>
+
+## Methods
+
+### `create()`
+
+Creates a new `SignUp` instance initialized with the provided parameters. The instance maintains the sign-up lifecycle state through its `status` property, which updates as the authentication flow progresses. Will also deactivate any existing sign-up process the client may already have in progress.
+
+What you must pass to `params` depends on which [sign-up options](/docs/guides/configure/auth-strategies/sign-up-sign-in-options) you have enabled in your app's settings in the Clerk Dashboard.
+
+You can complete the sign-up process in one step if you supply the required fields to `create()`. Otherwise, Clerk's sign-up process provides great flexibility and allows users to easily create multi-step sign-up flows.
+
+> [!WARNING]
+> Once the sign-up process is complete, call the `signUp.finalize()` method to set the newly created session as the active session.
+
+```ts
+function create(params: SignUpFutureCreateParams): Promise<{ error: unknown }>
+```
+
+#### `SignUpFutureCreateParams`
+
+TKTKTK
+
+<Properties>
+  - `emailAddress?`
+  - `string`
+
+  The user's email address. Only supported if [Email address](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#email) is enabled. Keep in mind that the email address requires an extra verification process.
+
+  ---
+
+  - `firstName?`
+  - `string`
+
+  The user's first name. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `lastName?`
+  - `string`
+
+  The user's last name. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `legalAccepted?`
+  - `boolean`
+
+  A boolean indicating whether the user has agreed to the [legal compliance](/docs/guides/secure/legal-compliance) documents.
+
+  ---
+
+  - `phoneNumber?`
+  - `string`
+
+  The user's phone number in [E.164 format](https://en.wikipedia.org/wiki/E.164). Only supported if [phone number](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#phone) is enabled. Keep in mind that the phone number requires an extra verification process.
+
+  ---
+
+  - `ticket?`
+  - `string`
+
+  The [ticket _or token_](/docs/guides/development/custom-flows/authentication/application-invitations) generated from the Backend API. **Required** if `strategy` is set to `'ticket'`.
+
+  ---
+
+  - `transfer?`
+  - `boolean`
+
+  When set to `true`, the `SignUp` will attempt to retrieve information from the active `SignIn` instance and use it to complete the sign-up process. This is useful when you want to seamlessly transition a user from a sign-in attempt to a sign-up attempt.
+
+  ---
+
+  - `unsafeMetadata?`
+  - `SignUpUnsafeMetadata`
+
+  Metadata that can be read and set from the frontend. Once the sign-up is complete, the value of this field will be automatically copied to the newly created user's unsafe metadata. One common use case for this attribute is to use it to implement custom fields that can be collected during sign-up and will automatically be attached to the created User object.
+
+  ---
+
+  - `username?`
+  - `string`
+
+  The user's username. Only supported if [username](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#username) is enabled in the instance settings.
+
+  ---
+
+  - `web3Wallet?`
+  - `string`
+
+  The Web3 wallet address, made up of 0x + 40 hexadecimal characters. **Required** if [Web3 authentication](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#web3-authentication) is enabled.
+</Properties>
+
+### `finalize()`
+
+Used to convert a sign-up with `status === 'complete'` into an active session. Will cause anything observing the session state (such as the `useUser()` hook) to update automatically.
+
+```ts
+function finalize(params?: SignUpFutureFinalizeParams): Promise<{ error: unknown }>
+```
+
+#### `SignUpFutureFinalizeParams`
+
+TKTKTK
+
+<Properties>
+  - `navigate?`
+  - `SetActiveNavigate`
+
+  TKTKTK
+</Properties>
+
+### `password()`
+
+Used to sign up using an email address and password.
+
+```ts
+function password(params: SignUpFuturePasswordParams): Promise<{ error: unknown }>
+```
+
+#### `SignUpFuturePasswordParams`
+
+TKTKTK
+
+<Properties>
+  - `password`
+  - `string`
+
+  The user's password. Only supported if [password](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#password) is enabled.
+</Properties>
+
+### `sso()`
+
+Used to create an account using an OAuth connection.
+
+```ts
+function sso(params: SignUpFutureSSOParams): Promise<{ error: unknown }>
+```
+
+#### `SignUpFutureSSOParams`
+
+TKTKTK
+
+<Properties>
+  - `redirectCallbackUrl`
+  - `string`
+
+  TODO @revamp-hooks: This should be handled by FAPI instead.
+
+  ---
+
+  - `redirectUrl`
+  - `string`
+
+  The URL or path to navigate to after the OAuth or SAML flow completes. Can be provided as a relative URL (such as `/dashboard`), in which case it will be prefixed with the base URL of the current page.
+
+  ---
+
+  - `strategy`
+  - `string`
+
+  The strategy to use for authentication.
+</Properties>
+
+### `ticket()`
+
+Used to perform a ticket-based sign-up.
+
+```ts
+function ticket(params?: SignUpFutureTicketParams): Promise<{ error: unknown }>
+```
+
+#### `SignUpFutureTicketParams`
+
+TKTKTK
+
+<Properties>
+  - `firstName?`
+  - `string`
+
+  The user's first name. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `lastName?`
+  - `string`
+
+  The user's last name. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `legalAccepted?`
+  - `boolean`
+
+  A boolean indicating whether the user has agreed to the [legal compliance](/docs/guides/secure/legal-compliance) documents.
+
+  ---
+
+  - `ticket`
+  - `string`
+
+  The [ticket _or token_](/docs/guides/development/custom-flows/authentication/application-invitations) generated from the Backend API. **Required** if `strategy` is set to `'ticket'`.
+
+  ---
+
+  - `unsafeMetadata?`
+  - `SignUpUnsafeMetadata`
+
+  Metadata that can be read and set from the frontend. Once the sign-up is complete, the value of this field will be automatically copied to the newly created user's unsafe metadata. One common use case for this attribute is to use it to implement custom fields that can be collected during sign-up and will automatically be attached to the created User object.
+</Properties>
+
+### `update()`
+
+Updates the current `SignUp`.
+
+```ts
+function update(params: SignUpFutureUpdateParams): Promise<{ error: unknown }>
+```
+
+#### `SignUpFutureUpdateParams`
+
+TKTKTK
+
+<Properties>
+  - `firstName?`
+  - `string`
+
+  The user's first name. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `lastName?`
+  - `string`
+
+  The user's last name. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `legalAccepted?`
+  - `boolean`
+
+  A boolean indicating whether the user has agreed to the [legal compliance](/docs/guides/secure/legal-compliance) documents.
+
+  ---
+
+  - `unsafeMetadata?`
+  - `SignUpUnsafeMetadata`
+
+  Metadata that can be read and set from the frontend. Once the sign-up is complete, the value of this field will be automatically copied to the newly created user's unsafe metadata. One common use case for this attribute is to use it to implement custom fields that can be collected during sign-up and will automatically be attached to the created User object.
+</Properties>
+
+### `verifications.sendEmailCode()`
+
+Used to send an email code to verify an email address.
+
+```ts
+function sendEmailCode(): Promise<{ error: unknown }>
+```
+
+### `verifications.sendPhoneCode()`
+
+Used to send a phone code to verify a phone number.
+
+```ts
+function sendPhoneCode(params: SignUpFuturePhoneCodeSendParams): Promise<{ error: unknown }>
+```
+
+#### `SignUpFuturePhoneCodeSendParams`
+
+TKTKTK
+
+<Properties>
+  - `channel?`
+  - `PhoneCodeChannel`
+
+  The mechanism to use to send the code to the provided phone number. Defaults to `'sms'`.
+
+  ---
+
+  - `phoneNumber?`
+  - `string`
+
+  The user's phone number in [E.164 format](https://en.wikipedia.org/wiki/E.164). Only supported if [phone number](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#phone) is enabled. Keep in mind that the phone number requires an extra verification process.
+</Properties>
+
+### `verifications.verifyEmailCode()`
+
+Used to verify a code sent via email.
+
+```ts
+function verifyEmailCode(params: SignUpFutureEmailCodeVerifyParams): Promise<{ error: unknown }>
+```
+
+#### `SignUpFutureEmailCodeVerifyParams`
+
+TKTKTK
+
+<Properties>
+  - `code`
+  - `string`
+
+  The code that was sent to the user.
+</Properties>
+
+### `verifications.verifyPhoneCode()`
+
+Used to verify a code sent via phone.
+
+```ts
+function verifyPhoneCode(params: SignUpFuturePhoneCodeVerifyParams): Promise<{ error: unknown }>
+```
+
+#### `SignUpFuturePhoneCodeVerifyParams`
+
+TKTKTK
+
+<Properties>
+  - `code`
+  - `string`
+
+  The code that was sent to the user.
+</Properties>
+
+### `web3()`
+
+Used to perform a Web3-based sign-up.
+
+```ts
+function web3(params: SignUpFutureWeb3Params): Promise<{ error: unknown }>
+```
+
+#### `SignUpFutureWeb3Params`
+
+TKTKTK
+
+<Properties>
+  - `firstName?`
+  - `string`
+
+  The user's first name. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `lastName?`
+  - `string`
+
+  The user's last name. Only supported if [First and last name](/docs/guides/configure/auth-strategies/sign-up-sign-in-options#user-model) is enabled in the instance settings.
+
+  ---
+
+  - `legalAccepted?`
+  - `boolean`
+
+  A boolean indicating whether the user has agreed to the [legal compliance](/docs/guides/secure/legal-compliance) documents.
+
+  ---
+
+  - `strategy`
+  - `"web3_base_signature" | "web3_metamask_signature" | "web3_coinbase_wallet_signature" | "web3_okx_wallet_signature"`
+
+  The verification strategy to validate the user's sign-up request.
+
+  ---
+
+  - `unsafeMetadata?`
+  - `SignUpUnsafeMetadata`
+
+  Metadata that can be read and set from the frontend. Once the sign-up is complete, the value of this field will be automatically copied to the newly created user's unsafe metadata. One common use case for this attribute is to use it to implement custom fields that can be collected during sign-up and will automatically be attached to the created User object.
+</Properties>