Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

useSignUp()

The useSignUp() hook gives you access to the SignUp object, which allows you to check the current state of a sign-up. This is also useful for creating a custom sign-up flow.

Usage

Check the current sign-up status

pages/sign-up.tsx
import { useSignUp } from "@clerk/nextjs"; export default function SignUpStep() { const { isLoaded, signUp } = useSignUp(); if (!isLoaded) { // handle loading state return null; } return <div>The current sign-up attempt status is {signUp.status}.</div>; }

Sign up a user with a custom flow

pages/signup.tsx
import { useSignUp } from "@clerk/nextjs"; import { useState } from "react"; export default function SignUp() { const [emailAddress, setEmailAddress] = useState(""); const [password, setPassword] = useState(""); const { isLoaded, signUp, setActive } = useSignUp(); if (!isLoaded) { // handle loading state return null; } async function submit(e) { e.preventDefault(); // Check the sign up response to // decide what to do next. await signUp .create({ emailAddress, password, }) .then((result) => { if (result.status === "complete") { console.log(result); setActive({ session: result.createdSessionId }); } else { console.log(result); } }) .catch((err) => console.error("error", err.errors[0].longMessage)); } return ( <form onSubmit={submit}> <div> <label htmlFor="email">Email</label> <input type="email" value={emailAddress} onChange={(e) => setEmailAddress(e.target.value)} /> </div> <div> <label htmlFor="password">Password</label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <div> <button>Sign up</button> </div> </form> ); }
ValuesDescription
isLoadedA boolean that is set to false until Clerk loads and initializes.
setActive()A function that sets the active session.
setSession() (deprecated)Deprecated in favor of setActive().
signUpAn object that contains the current sign-up attempt status and methods to create a new sign-up attempt.

Result status

ValuesDescriptiom
completeThe user has been created and custom flow can proceed to setActive() to create session.
abandonedThe sign-up attempt will be abandoned if it was started more than 24 hours previously.
missing_requirementsA requirement from the Email, Phone, Username(opens in a new tab) settings is missing. For example, in the Clerk Dashboard, the Password setting is required but a password was not provided in the custom flow.

What did you think of this content?

Clerk © 2024