useSignUp() and useSignIn()

Overview

If our Clerk Hosted Pages and Prebuilt Components don't meet your needs, you can build a fully custom sign-up or sign-in flow using the React hooks useSignUp() and useSignIn() respectively.

The useSignUp() hook gives you access to the SignUp object and its available methods in order to build a custom sign-up flow. The SignUp object will also contain the state of the sign-up attempt that is currently in progress, which gives you the ability 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.

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

3
// Your component must be rendered as a 
4
// descendant of <ClerkProvider />
5
export default function SignUpStep() {
6
  const { isLoaded, signUp } = useSignUp();
7

8
  if (!isLoaded) {
9
    // Handle loading state
10
    return null;
11
  }
12
  
13
  return (
14
    <div>
15
      The current sign up attempt status 
16
      is {signUp.status}.
17
    </div>
18
  );
19
}

In a more involved example, we show an approach to create a custom form for registering users, in this case with a Password strategy.

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

3
// Your component must be rendered as a 
4
// descendant of <ClerkProvider />
5
export default function SignUpForm() {
6
  const { isLoaded, signUp } = useSignUp();
7

8
  const handleSubmit = async (event) => {
9
    const formData = new FormData(event.target);
10
    const emailAddress = formData.get('email');
11
    const password = formData.get('password');
12

13
    event.preventDefault();
14

15
    // Check response for next step
16
    const response = await signUp.create({
17
      emailAddress,
18
      password
19
    });
20
  };
21

22
  if (!isLoaded) {
23
    // Handle loading state
24
    return null;
25
  }
26

27
  return (
28
    <form onSubmit={handleSubmit}>
29
      <div>
30
        <label htmlFor="email">Email</label>
31
        <input id="email" name="email" type="email" />
32
      </div>
33
      <div>
34
        <label htmlFor="password">Password</label>
35
        <input id="password" name="password" type="password" />
36
      </div>
37
      <button>Sign up</button>
38
    </form>
39
  );
40
}

The useSignIn() hook gives you access to the SignIn object and its available methods in order to build a custom sign-in flow. The SignIn object will also contain the state of the sign-in attempt that is currently in progress, which gives you the ability to example 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.

import { useSignIn } from '@clerk/clerk-react';

// Your component must be rendered as a 
// descendant of <ClerkProvider />
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>
  );
}

In a more involved example, we show an approach to create a custom form for signing in users, in this case with a Password strategy.

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

3
// Your component must be rendered as a
4
// descendant of <ClerkProvider />
5
export default function SignInForm() {
6
  const { isLoaded, signIn } = useSignIn();
7

8
  const handleSubmit = async (event) => {
9
    const formData = new FormData(event.target);
10
    const emailAddress = formData.get('email');
11
    const password = formData.get('password');
12

13
    event.preventDefault();
14

15
    // Check response for next step
16
    const response = await signIn.create({
17
      identifier: emailAddress,
18
      password,
19
    });
20
  };
21

22
  if (!isLoaded) {
23
    // Handle loading state
24
    return null;
25
  }
26

27
  return (
28
    <form onSubmit={handleSubmit}>
29
      <div>
30
        <label htmlFor="email">Email</label>
31
        <input id="email" name="email" type="email" />
32
      </div>
33
      <div>
34
        <label htmlFor="password">Password</label>
35
        <input id="password" name="password" type="password" />
36
      </div>
37
      <button>Sign in</button>
38
    </form>
39
  );
40
}