useSignIn()
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.
Usage
Check the current sign-in status
pages/index.tsximport { 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
pages/signin.tsximport { 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(e.target.value)} /> </div> <div> <label htmlFor="password">Password</label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <div> <button>Sign in</button> </div> </form> ); }
Check the current sign-in status
pages/sign-in-step.tsximport { useSignIn } from "@clerk/clerk-react"; 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
pages/signin.tsximport { useSignIn } from "@clerk/clerk-react"; 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(e.target.value)} /> </div> <div> <label htmlFor="password">Password</label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <div> <button>Sign in</button> </div> </form> ); }
Values | Description |
---|---|
isLoaded | A boolean that is set to false until Clerk loads and initializes. |
setActive() | A function that sets the active session. |
setSession() (deprecated) | Deprecated in favor of setActive() . |
signIn | An object that contains the current sign-in attempt status and methods to create a new sign-in attempt. |
Result Status
Values | Descriptiom |
---|---|
complete | The user has been signed in and custom flow can proceed to setActive() to create session. |
needs_factor_one | 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_factor_two | 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 unqiue identifier for the user was missing. |
Last updated on November 27, 2023