useSignIn() | Clerk

The useSignIn() hook provides access to the SignIn object, which allows you to check the current state of a sign-in. This is also useful for creating a custom sign-in flow.

Name	Type	Description
`isLoaded`	`boolean`	A boolean that is set to `false` until Clerk loads and initializes.
`setActive()`	`(params: SetActiveParams) => Promise<void>`	A function that sets the active session.
`setSession()` (deprecated)	Deprecated.	Deprecated in favor of `setActive()`.
`signIn`	`SignIn`	An object that contains the current sign-in attempt status and methods to create a new sign-in attempt.

`SetActiveParams`

Name	Type	Description
`session`	`Session \| string \| null`	The session resource or session ID (string version) to be set as active. If `null`, the current session is deleted.
`organization`	`Organization \| string \| null`	The organization resource or organization ID (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 hook up for pre-navigation actions.

Use the useSignIn() hook to check the current state of a sign-in.

pages/sign-in-step.tsx
import { useSignIn } from "@clerk/clerk-react";
 
export default function SignInStep() {
  const { isLoaded, signIn } = useSignIn();
 
  if (!isLoaded) {
    // Add logic to handle loading state
    return null;
  }
 
  return <div>The current sign in attempt status is {signIn.status}.</div>;
}

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` or `oauth_provider` is required to verify user. See 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 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.

The useSignIn() hook can also be used to build fully custom sign-in flows, if Clerk's pre-built 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() hook to create custom flows, check out the custom flow guides(opens in a new tab).

Last updated on February 22, 2024

useSignIn() returns

SetActiveParams

How to use the useSignIn() hook

Check the current state of a sign-in with useSignIn()

Create a custom sign-in flow with useSignIn()

`useSignIn()` returns

`SetActiveParams`

How to use the `useSignIn()` hook

Check the current state of a sign-in with `useSignIn()`

Create a custom sign-in flow with `useSignIn()`