Skip to main content
Docs

useSignIn()

The useSignIn() hook provides access to the 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.

Returns

This function returns a discriminated union type. There are multiple variants of this type available which you can select by clicking on one of the tabs.

  • Name
    isLoaded
    Type
    false
    Description

    A boolean that indicates whether Clerk has completed initialization. Initially false, becomes true once Clerk loads.

  • Name
    setActive
    Type
    undefined
    Description

    A function that sets the active session.

  • Name
    signIn
    Type
    undefined
    Description

    An object that contains the current sign-in attempt status and methods to create a new sign-in attempt.

  • Name
    isLoaded
    Type
    true
    Description

    A boolean that indicates whether Clerk has completed initialization. Initially false, becomes true once Clerk loads.

  • Name
    setActive()
    Type
    () => Promise<void>
    Description

    A function that sets the active session.

  • Name
    signIn
    Type
    Description

    An object that contains the current sign-in attempt status and methods to create a new sign-in attempt.

Examples

Check the current state of a sign-in

The following example uses the useSignIn() hook to access the object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The isLoaded property is used to handle the loading state.

src/pages/SignInPage.tsx
import { useSignIn } from "@clerk/clerk-react";

export default function SignInPage() {
  const { isLoaded, signIn } = useSignIn();

  if (!isLoaded) {
    // Handle loading state
    return null;
  }

  return <div>The current sign-in attempt status is {signIn?.status}.</div>;
}
app/sign-in/page.tsx
"use client";

import { useSignIn } from "@clerk/nextjs";

export default function SignInPage() {
  const { isLoaded, signIn } = useSignIn();

  if (!isLoaded) {
    // Handle loading state
    return null;
  }

  return <div>The current sign-in attempt status is {signIn?.status}.</div>;
}

Create a custom sign-in flow with useSignIn()

The useSignIn() hook 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() hook to create custom flows, see the custom flow guides.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on