Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to


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.


Check the current sign-in status

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

Sign in a user with a custom flow

import { useSignIn } from "@clerk/nextjs"; import { useState } from "react"; export default function SignIn() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const { isLoaded, signIn, setActive } = useSignIn(); if (!isLoaded) { return null; } async function submit(e) { e.preventDefault(); await signIn .create({ identifier: email, password, }) .then((result) => { if (result.status === "complete") { console.log(result); setActive({ session: result.createdSessionId }); } else { console.log(result); } }) .catch((err) => console.error("error", err.errors[0].longMessage)); } return ( <form onSubmit={submit}> <div> <label htmlFor="email">Email</label> <input type="email" value={email} onChange={(e) => setEmail(} /> </div> <div> <label htmlFor="password">Password</label> <input type="password" value={password} onChange={(e) => setPassword(} /> </div> <div> <button>Sign in</button> </div> </form> ); }
isLoadedA boolean that is set to false until Clerk loads and initializes.
setActive()A function that sets the active session. In most cases, this should be used over setSession().
setSession()A function that sets the active session.
signInAn object that contains the current sign-in attempt status and methods to create a new sign-in attempt.

What did you think of this content?

Clerk © 2023