The useSignUp() hook provides access to the SignUpJavaScript Icon 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.
The following example uses the useSignUp() hook to access the SignUpJavaScript Icon 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.
app/sign-up/page.tsx
'use client'import { useSignUp } from'@clerk/nextjs'exportdefaultfunctionPage() {const { isLoaded,signUp } =useSignUp()// Handle loading stateif (!isLoaded) return <div>Loading...</div>return <div>The current sign-up attempt status is {signUp?.status}.</div>}
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.