Skip to content

Commit

Permalink
add useSignIn page
Browse files Browse the repository at this point in the history
  • Loading branch information
wobsoriano committed Dec 13, 2024
1 parent 27ced83 commit bcd202f
Showing 1 changed file with 90 additions and 0 deletions.
90 changes: 90 additions & 0 deletions docs/references/vue/use-sign-in.mdx
Original file line number Diff line number Diff line change
@@ -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).

0 comments on commit bcd202f

Please sign in to comment.