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.
Usage
Check the current sign-up status
pages/sign-up.tsximport { 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
pages/signup.tsximport { 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(e.target.value)} /> </div> <div> <label htmlFor="password">Password</label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <div> <button>Sign up</button> </div> </form> ); }
Check the current sign-up status
sign-up-step.tsximport { useSignUp } from "@clerk/clerk-react"; 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
signup.tsximport { useSignUp } from "@clerk/clerk-react"; 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(e.target.value)} /> </div> <div> <label htmlFor="password">Password</label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <div> <button>Sign up</button> </div> </form> ); }
Values | Description |
---|---|
isLoaded | A boolean that is set to false until Clerk loads and initializes. |
setActive() | A function that sets the active session. |
setSession() (deprecated) | Deprecated in favor of setActive() . |
signUp | An object that contains the current sign-up attempt status and methods to create a new sign-up attempt. |
Result status
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. |