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.
useSignUp()
returns
Name | Type | Description |
---|---|---|
isLoaded | boolean | A boolean that is set to false until Clerk loads and initializes. |
setActive() | (params: SetActiveParams) => Promise<void> | A function that sets the active session. |
setSession() (deprecated) | Deprecated. | Deprecated in favor of setActive() . |
signUp | SignUp | An object that contains the current sign-up attempt status and methods to create a new sign-up attempt. |
SetActiveParams
Name | Type | Description |
---|---|---|
session | Session | string | null | The session resource or session ID (string version) to be set as active. If null , the current session is deleted. |
organization | Organization | string | null | The organization resource or organization ID (string version) to be set as active in the current session. If null , the currently active organization is removed as active. |
beforeEmit? | (session?: Session | null) => void | Promise<any> | 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 with useSignUp()
Use the useSignUp()
hook to access the SignUp
object and check the current state of a sign-up.
sign-up-step.tsximport { useSignUp } from "@clerk/clerk-react"; export default function SignUpStep() { const { isLoaded, signUp } = useSignUp(); if (!isLoaded) { // Add logic to handle loading state return null; } return <div>The current sign-up attempt status is {signUp.status}.</div>; }
The status
property of the SignUp
object can be one of the following values:
Values | Descriptiom |
---|---|
complete | The user has been created and custom flow can proceed to setActive() to create session. |
abandoned | The sign-up attempt will be abandoned if it was started more than 24 hours previously. |
missing_requirements | A 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. |
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 pre-built 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, check out the custom flow guides(opens in a new tab).
Last updated on February 22, 2024