useSignUp

Access the SignUp object inside your components.

Overview

The useSignUp hook gives you access to the SignUp object inside your components.

You can use the methods of the SignUp object to create your own custom sign up flow, as an alternative to using Clerk's pre-built <SignUp/> component.

The SignUp object will also contain the state of the sign up attempt that is currently in progress, giving you the chance to examine all the details and act accordingly.

Usage

Getting access to the SignUp object from inside one of your components is easy. Note that the useSignUp hook can only be used inside a <ClerkProvider/> context.

The following example accesses the SignUp object to check the current sign up attempt's status.

Typescript

For better type support, we highly recommend updating to at least Typescript 4.6. Applications using Typescript will benefit significantly from Typescript's new Control Flow Analysis for Dependent Parameters when using our hooks.

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

3
function SignUpStep() {
4
  const { isLoaded, signUp } = useSignUp();
5

6
  if (!isLoaded) {
7
    // handle loading state
8
    return null;
9
  }
10
  
11
  return (
12
    <div>
13
      The current sign up attempt status 
14
      is {signUp.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 registering users.

We recommend using the <SignUp/> component instead of building your own custom registration form. It gives you a ready-made form and handles each step of the sign up flow.

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

3
function SignUpForm() {
4
  const [emailAddress, setEmailAddress] = useState('');
5
  const [password, setPassword] = useState('');
6
  
7
  const { isLoaded, signUp } = useSignUp();
8
  
9
  if (!isLoaded) {
10
    // handle loading state
11
    return null;
12
  }
13
  
14
  async function submit(e) {
15
    e.preventDefault();
16
    // Check the sign up response to 
17
    // decide what to do next.
18
    await signUp.create({
19
      emailAddress,
20
      password,
21
    })
22
    .then((result) => {
23
        if (result.status === "complete") {
24
            console.log(result);
25
            setActive({session: result.createdSessionId});
26
        }
27
        else{
28
            console.log(result);
29
        }
30
      })
31
      .catch((err) => console.error("error", err.errors[0].longMessage));
32
  }
33
  
34
  return (
35
    <form onSubmit={submit}>
36
      <div>
37
        <label htmlFor="email">Email</label>
38
        <input 
39
          type="email" 
40
          value={emailAddress} 
41
          onChange={e => setEmailAddress(e.target.value)} 
42
        />
43
      </div>
44
      <div>
45
        <label htmlFor="password">Password</label>
46
        <input
47
          type="password"
48
          value={password}
49
          onChange={e => setPassword(e.target.value)}
50
        />
51
      </div>
52
      <div>
53
        <button>Sign up</button>
54
      </div>
55
    </form>
56
  );
57
}