Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to


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.


Check the current sign-up status

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

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(} /> </div> <div> <label htmlFor="password">Password</label> <input type="password" value={password} onChange={(e) => setPassword(} /> </div> <div> <button>Sign up</button> </div> </form> ); }
isLoadedA boolean that is set to false until Clerk loads and initializes.
setActive()A function that sets the active session. In most cases, this should be used over setSession().
setSession()A function that sets the active session.
signUpAn object that contains the current sign-up attempt status and methods to create a new sign-up attempt.

What did you think of this content?

Clerk © 2023