Search…
useSignIn
Access the SignIn object inside 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

Make sure you've followed the installation guide for Clerk React before running the snippets below.
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.
1
import { useSignIn } from "@clerk/clerk-react";
2
3
// Your component must be rendered as a
4
// descendant of <ClerkProvider />.
5
function SignInStep() {
6
const signIn = useSignIn();
7
8
return (
9
<div>
10
The current sign in attempt status
11
is {signIn.status}.
12
</div>
13
);
14
}
Copied!
A more involved example follows below. In this example, we show an approach to create your own custom form for signing in your users.
We recommend using the <SignIn/> component instead of building your own custom sign in form. It gives you a ready-made form and handles each step of the sign in flow.
1
import { useSignIn } from "@clerk/clerk-react";
2
3
// Your component must be rendered as a
4
// descendant of <ClerkProvider />.
5
function SignInForm() {
6
const [email, setEmail] = useState('');
7
const [password, setPassword] = useState('');
8
9
const signIn = useSignIn();
10
11
async function submit(e) {
12
e.preventDefault();
13
14
// Check the sign in response to
15
// decide what to do next.
16
await signIn.create({
17
identifier: email,
18
password,
19
});
20
}
21
22
return (
23
<form onSubmit={submit}>
24
<div>
25
<label htmlFor="email">Email</label>
26
<input
27
type="email"
28
value={email}
29
onChange={e => setEmail(e.target.value)}
30
/>
31
</div>
32
<div>
33
<label htmlFor="password">Password</label>
34
<input
35
type="password"
36
value={password}
37
onChange={e => setPassword(e.target.value)}
38
/>
39
</div>
40
<div>
41
<button>Sign in</button>
42
</div>
43
</form>
44
);
45
}
Copied!
Last modified 3mo ago
Copy link
Edit on GitHub