Error Handling

Provide your users with useful information about the errors being returned from Sign In and Sign Up requests.

When using the signUp() or signIn() functions, proper error handling can help you provide your users with useful feedback.

Example

A user is attempting to sign up with your application, but they are attempting to use a password that has been found in an online data breach. This will return a 422 error code with the message: "Password has been found in an online data breach. For account safety, please use a different password."

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

4
function Example() {
5
  const [error, setError] = useState(null);
6

7
  const { signUp } = useSignUp();
8

9
  const signUpUser = async () => {
10
    const response = await signUp
11
      ?.create({
12
        identifier: "example@email.com",
13
        password: "Tester01!",
14
      })
15
      .then((res) => console.log("response", res))
16
      .catch((err) => setError(err.errors[0].message));
17
  };
18

19
  return (
20
    <div>
21
      <button onClick={signUpUser}>Sign Up</button>
22
      <div>
23
        <error>{error}</error>
24
      </div>
25
    </div>
26
  );
27
}

1
const { client } = window.Clerk;
2

3
const signUp = await client.signUp.create({
4
  identifier: "example@email.com",
5
  password: "Tester01!",
6
})
7
  .then((res) => console.log("response", res))
8
  .catch((err) => setError(err.errors[0].message));
9

Errors returned from the signIn() function are handled in a similar way:

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

4
function Example() {
5
  const [error, setError] = useState(null);
6

7
  const { signIn } = useSignIn();
8

9
  const signInUser = async () => {
10
    const response = await signIn.create({
11
      identifier: emailAddress,
12
      password,
13
    })    
14
    .then((result) => console.log("result", result))
15
    .catch((err) => setError("error", err.errors[0].message));
16
  };
17

18
  return (
19
    <div>
20
      <button onClick={signInUser}>Sign In</button>
21
      <div>
22
        <error>{error}</error>
23
      </div>
24
    </div>
25
  );
26
}

1
const { client } = window.Clerk;
2

3
const signIn = await client.signIn.create({
4
  identifier: emailAddress,
5
  password,
6
  })    
7
  .then((result) => console.log("result", result))
8
  .catch((err) => console.error("error", err.errors[0].message));