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. In most cases, this should be used over setSession() . |
setSession() | A function that sets the active session. |
signIn | An object that contains the current sign-in attempt status and methods to create a new sign-in attempt. |