useSignUp()
The useSignUp() hook provides access to the SignUp object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. You can use this to create a custom sign-up flow.
Returns
- Name
isLoaded- Type
boolean- Description
- Name
setActive()- Type
(params: SetActiveParams) => Promise<void>- Description
A function that sets the active session.
- Name
signUp- Type
SignUp- Description
An object that contains the current sign-up attempt status and methods to create a new sign-up attempt.
- Name
session- Type
Session | string | null- Description
The session resource or session ID (string version) to be set as active. If
null, the current session is deleted.
- Name
organization- Type
Organization | string | null- Description
The organization resource or organization ID/slug (string version) to be set as active in the current session. If
null, the currently active organization is removed as active.
- Name
beforeEmit?- Type
(session?: Session | null) => void | Promise<any>- Description
Callback run just before the active session and/or organization is set to the passed object. Can be used to hook up for pre-navigation actions.
How to use the useSignUp() hook
Check the current state of a sign-up
The following example uses the useSignUp() hook to access the SignUp object, which contains the current sign-up attempt status and methods to create a new sign-up attempt. The isLoaded property is used to handle the loading state.
import { useSignUp } from '@clerk/clerk-react'
export default function SignUpPage() {
const { isLoaded, signUp } = useSignUp()
if (!isLoaded) {
// Handle loading state
return null
}
return <div>The current sign-up attempt status is {signUp?.status}.</div>
}SignUp status values
The status property of the SignUp object can be one of the following values:
- Name
complete- Type
string- Description
The user has been created and the custom flow can proceed to
setActive()to create a session.
- Name
abandoned- Type
string- Description
The sign-up attempt will be abandoned if it was started more than 24 hours previously.
- Name
missing_requirements- Type
string- Description
A requirement is missing from the Email, Phone, Username settings. For example, in the Clerk Dashboard, the Password setting is required but a password wasn't provided in the custom flow.
Create a custom sign-up flow with useSignUp()
The useSignUp() hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the useSignUp() hook to create custom flows, see the custom flow guides.
Feedback
Last updated on