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
This function returns a discriminated union type. There are multiple variants of this type available which you can select by clicking on one of the tabs.
- Name
isLoaded
- Type
false
- Description
A boolean that indicates whether Clerk has completed initialization. Initially
false
, becomestrue
once Clerk loads.
- Name
setActive
- Type
undefined
- Description
A function that sets the active session.
- Name
signUp
- Type
undefined
- Description
An object that contains the current sign-up attempt status and methods to create a new sign-up attempt.
- Name
isLoaded
- Type
true
- Description
A boolean that indicates whether Clerk has completed initialization. Initially
false
, becomestrue
once Clerk loads.
- Name
setActive()
- Type
(setActiveParams) => Promise<void>
- Description
A function that sets the active session.
- Name
signUp
- Type
SignUpResource
- Description
An object that contains the current sign-up attempt status and methods to create a new sign-up attempt.
Examples
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>;
}
"use client";
import { useSignUp } from "@clerk/nextjs";
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>;
}
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