useSignIn
Access the SignIn object inside of your components.
Overview
The useSignIn
hook gives you access to the SignIn object inside your components.
You can use the methods of the SignIn
object to create your own custom sign in flow, as an alternative to using Clerk's pre-built <SignIn/> component.
The SignIn
object will also contain the state of the sign in attempt that is currently in progress, giving you the chance to examine all the details and act accordingly.
Usage
Getting access to the SignIn object from inside one of your components is easy. Note that the useSignIn
hook can only be used inside a <ClerkProvider/> context.
The following example accesses the SignIn
object to check the current sign in attempt's status.
1import { useSignIn } from "@clerk/clerk-react";23function SignInStep() {4const { isLoaded, signIn } = useSignIn();56if (!isLoaded) {7// handle loading state8return null;9}1011return (12<div>13The current sign in attempt status14is {signIn.status}.15</div>16);17}
A more involved example follows below. In this example, we show an approach to create your own custom form for signing in your users.
1import { useSignIn } from "@clerk/clerk-react";2import { useState } from "react";34export default function SignIn() {5const [email, setEmail] = useState("");6const [password, setPassword] = useState("");78const { isLoaded, signIn, setActive } = useSignIn();910if (!isLoaded) {11return null;12}1314async function submit(e) {15e.preventDefault();16await signIn17.create({18identifier: email,19password,20})21.then((result) => {22if (result.status === "complete") {23console.log(result);24setActive({session: result.createdSessionId});25}26else{27console.log(result);28}29})30.catch((err) => console.error("error", err.errors[0].longMessage));31}3233return (34<form onSubmit={submit}>35<div>36<label htmlFor="email">Email</label>37<input38type="email"39value={email}40onChange={(e) => setEmail(e.target.value)}41/>42</div>43<div>44<label htmlFor="password">Password</label>45<input46type="password"47value={password}48onChange={(e) => setPassword(e.target.value)}49/>50</div>51<div>52<button>Sign in</button>53</div>54</form>55);56}57