Custom sign-up UI
A custom registration screen needs to track the active attempt and advance it through verification.
Clerk · Interface
SignUpResource
SignUpResource represents Clerk's current sign-up attempt and provides its state plus methods for managing registration. It is used to implement custom sign-up flows after Clerk has loaded.
How it works
SignUpResource represents the active sign-up attempt exposed by Clerk. It provides the attempt's current state and operations for creating or managing a custom sign-up flow; the resource is available after Clerk finishes loading.
Syntax
type SignUpResource = { ... }Returns
A SignUpResource object representing the current sign-up attempt, exposed after the authentication state has loaded.
Key points
- The resource combines the active attempt's status with operations for progressing the sign-up flow.
- Use it when a UI needs to determine where the current registration attempt stands.
- It is intended for application-controlled registration experiences rather than passive data inspection.
- The same resource supports several verification patterns, including password, code, link, and MFA-based flows.
- It is useful when the application's registration screens need more control than prebuilt Clerk components provide.
Common mistakes
- Do not read the sign-up resource as ready until the loading flag is true.
- The specifically documented legacy React hook should not be selected for new integrations; use the current hook instead.
Example: Read the current sign-up attempt
import { useSignUp } from '@clerk/react'
export function SignUpStatus() {
const { isLoaded, signUp } = useSignUp()
if (!isLoaded) return <p>Loading…</p>
return <p>{signUp.status ?? 'No active sign-up'}</p>
}This component waits for Clerk to load, then reads the current sign-up attempt from the returned resource.
When to use it
Multi-method registration
An application supports several registration methods and must coordinate their state.
Advanced authentication UX
The built-in sign-up components do not provide enough control over the product's authentication experience.
Interview questions
QWhat does SignUpResource represent?
SignUpResource is the object representing the current sign-up attempt. It exposes the attempt state and methods used to manage a sign-up flow.
Follow-up: How would you avoid rendering sign-up state too early? Check the loading flag first and render the resource only after Clerk reports that it is loaded.
QWhen would an application use SignUpResource?
A custom flow obtains the resource through Clerk's sign-up API and uses it to inspect progress and perform the required sign-up operations. This supports flows such as email/password, code-based verification, email links, and MFA.
Follow-up: Why use a custom flow? It gives the application more control when Clerk's prebuilt components do not match the required authentication experience.
QHow should loading be handled when consuming the resource?
The resource is not immediately ready during initialization. The application should handle the unloaded state before accessing the current sign-up attempt.
Follow-up: What can happen to the loading state later? It may return to false while Clerk updates authentication state, so the UI should treat loading as an ongoing state rather than a one-time startup event.
Related
useSignUp()signUpisLoadedClientresetSignUp()