From bcd202f9d0fa9d96a15c6431c55631a5421230ea Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 14 Nov 2024 16:47:16 -0800
Subject: [PATCH] add useSignIn page

---
 docs/references/vue/use-sign-in.mdx | 90 +++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 docs/references/vue/use-sign-in.mdx

diff --git a/docs/references/vue/use-sign-in.mdx b/docs/references/vue/use-sign-in.mdx
new file mode 100644
index 0000000000..ddcd9f2569
--- /dev/null
+++ b/docs/references/vue/use-sign-in.mdx
@@ -0,0 +1,90 @@
+---
+title: '`useSignIn()`'
+description: Clerk's useSignIn() composable provides access to the SignIn object, which allows you to check the current state of a sign-in.
+---
+
+The `useSignIn()` composable provides access to the [`SignIn`](/docs/references/javascript/sign-in/sign-in) object, which allows you to check the current state of a sign-in. This is also useful for creating a [custom sign-in flow.](#create-a-custom-sign-in-flow-with-use-sign-in)
+
+## `useSignIn()` returns
+
+<Properties>
+  - `isLoaded`
+  - `boolean`
+
+  A boolean that is set to `false` until Clerk loads and initializes.
+
+  ---
+
+  - `setActive()`
+  - <code>(params: [SetActiveParams](#set-active-params)) => Promise\<void></code>
+
+  A function that sets the active session.
+
+  ---
+
+  - `signIn`
+  - [`SignIn`](/docs/references/javascript/sign-in/sign-in)
+
+  An object that contains the current sign-in attempt status and methods to create a new sign-in attempt.
+</Properties>
+
+### `SetActiveParams`
+
+<Properties>
+  - `session`
+  - <code>[Session](/docs/references/javascript/session) | string | null</code>
+
+  The session resource or session ID (string version) to be set as active. If `null`, the current session is deleted.
+
+  ---
+
+  - `organization`
+  - <code>[Organization](/docs/references/javascript/organization/organization) | string | null</code>
+
+  The organization resource or organization ID/slug (string version) to be set as active in the current session. If `null`, the currently active organization is removed as active.
+
+  ---
+
+  - `beforeEmit?`
+  - `(session?: Session | null) => void | Promise<any>`
+
+  Callback run just before the active session and/or organization is set to the passed object. Can be used to composable up for pre-navigation actions.
+</Properties>
+
+## How to use the `useSignIn()` composable
+
+### Check the current state of a sign-in with `useSignIn()`
+
+Use the `useSignIn()` composable to check the current state of a sign-in.
+
+```vue {{ filename: 'pages/sign-in-step.vue' }}
+<script setup>
+import { useSignIn } from '@clerk/vue'
+
+const { isLoaded, signIn } = useSignIn()
+</script>
+
+<template>
+  <div v-if="!isLoaded">
+    <!-- Add logic to handle loading state -->
+  </div>
+
+  <div v-else>
+    The current sign in attempt status is {{ signIn.status }}.
+  </div>
+</template>
+```
+
+The `status` property of the `SignIn` object can be one of the following values:
+
+| Values | Descriptiom |
+| - | - |
+| `complete` | The user has been signed in and custom flow can proceed to `setActive()` to create session. |
+| `needs_first_factor` | The First Factor verification is missing. One of `email_link`, `email_code`, `phone_code`, `web3_metamask_signature`, `web3_coinbase_wallet_signature` or `oauth_provider` is required to verify user. See [First Factor](/docs/references/javascript/sign-in/first-factor) for details. |
+| `needs_second_factor` | The Second Factor verification is missing. The Second Factor is an optional step to provide additional verification and includes `phone_code` and `totp`. See [Second Factor](/docs/references/javascript/sign-in/second-factor) for details. |
+| `needs_identifier` | The user's identifier (email address, phone number, username, etc.) hasn't been provided. |
+| `needs_new_password` | The user needs to set a new password. |
+
+### Create a custom sign-in flow with `useSignIn()`
+
+The `useSignIn()` composable can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` composable to create custom flows, check out the [custom flow guides](/docs/custom-flows/overview).