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.

1
import { useSignIn } from "@clerk/clerk-react";
2

3
function SignInStep() {
4
  const { isLoaded, signIn } = useSignIn();
5
  
6
  if (!isLoaded) {
7
    // handle loading state
8
    return null;
9
  }
10
  
11
  return (
12
    <div>
13
      The current sign in attempt status 
14
      is {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.

1
import { useSignIn } from "@clerk/clerk-react";
2
import { useState } from "react";
3

4
export default function SignIn() {
5
  const [email, setEmail] = useState("");
6
  const [password, setPassword] = useState("");
7

8
  const { isLoaded, signIn, setActive } = useSignIn();
9

10
  if (!isLoaded) {
11
    return null;
12
  }
13

14
  async function submit(e) {
15
    e.preventDefault();
16
    await signIn
17
      .create({
18
        identifier: email,
19
        password,
20
      })
21
      .then((result) => {
22
        if (result.status === "complete") {
23
            console.log(result);
24
            setActive({session: result.createdSessionId});
25
        }
26
        else{
27
            console.log(result);
28
        }
29
      })
30
      .catch((err) => console.error("error", err.errors[0].longMessage));
31
  }
32

33
  return (
34
    <form onSubmit={submit}>
35
      <div>
36
        <label htmlFor="email">Email</label>
37
        <input
38
          type="email"
39
          value={email}
40
          onChange={(e) => setEmail(e.target.value)}
41
        />
42
      </div>
43
      <div>
44
        <label htmlFor="password">Password</label>
45
        <input
46
          type="password"
47
          value={password}
48
          onChange={(e) => setPassword(e.target.value)}
49
        />
50
      </div>
51
      <div>
52
        <button>Sign in</button>
53
      </div>
54
    </form>
55
  );
56
}
57