-
Notifications
You must be signed in to change notification settings - Fork 484
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
27ced83
commit bcd202f
Showing
1 changed file
with
90 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). |