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));