Error handling

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."


import { useState } from "react";
import { useSignUp } from "@clerk/clerk-react";
 
function Example() {
  const [error, setError] = useState(null);
 
  const { signUp } = useSignUp();
 
  const signUpUser = async () => {
    const response = await signUp
      ?.create({
        identifier: "example@email.com",
        password: "Tester01!",
      })
      .then((res) => console.log("response", res))
      .catch((err) => setError(err.errors[0].message));
  };
 
  return (
    <div>
      <button onClick={signUpUser}>Sign Up</button>
      <div>
        <error>{error}</error>
      </div>
    </div>
  );
}


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

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


import { useState } from "react";
import { useSignIn } from "@clerk/clerk-react";
 
function Example() {
  const [error, setError] = useState(null);
 
  const { signIn } = useSignIn();
 
  const signInUser = async () => {
    const response = await signIn.create({
      identifier: emailAddress,
      password,
    })    
    .then((result) => console.log("result", result))
    .catch((err) => setError("error", err.errors[0].message));
  };
 
  return (
    <div>
      <button onClick={signInUser}>Sign In</button>
      <div>
        <error>{error}</error>
      </div>
    </div>
  );
}


const { client } = window.Clerk;
 
const signIn = await client.signIn.create({
  identifier: emailAddress,
  password,
  })    
  .then((result) => console.log("result", result))
  .catch((err) => console.error("error", err.errors[0].message));

Special error cases

User locked

If you have Account Lockout enabled on your instance and the user reaches the maximum allowed attempts for password or backup code verification, you will receive an HTTP status of 403 (Forbidden) and the following error payload:


{
  "errors": [
    {
      "message": "Account locked",
      "long_message": "Your account is locked. You will be able to try again in 30 minutes. For more information, please contact support.",
      "code": "user_locked",
      "meta": {
        "duration_in_seconds": 1800
      }
    }
  ]
}

The remaining duration will vary depending on your configuration. You can opt to render the error message returned as-is or format the supplied duration_in_seconds as per your liking.