User registration page
Add a hosted-style registration experience to a Next.js application.
Clerk · Component
SignUp
Clerk's SignUp component renders a ready-made user-registration interface. Its behavior follows Clerk Dashboard settings, supports rendering-time customization, and can show required session tasks after registration.
How it works
Render Clerk's prebuilt registration UI in a page. Its available sign-up methods and social providers come from Clerk Dashboard settings, while component properties can customize the rendered experience; required post-registration session tasks are also shown.
Syntax
<SignUp />Returns
Renders a UI for signing up users.
Key points
- Use SignUp to provide Clerk's registration interface without building the form and flow yourself.
- Configure enabled registration behavior at the Clerk instance level rather than assuming the component's defaults.
- Dashboard configuration can determine both local authentication choices and available social providers.
- Pass supported properties when rendering to tailor the component for the page or application.
- Post-registration session requirements appear in the component until the user completes them.
Common mistakes
- A signed-in user cannot see the component unless the application permits multiple sessions.
- With single-session behavior, Clerk redirects an already signed-in user to the Home URL instead of rendering sign-up.
Example: Basic Next.js sign-up page
import { SignUp } from '@clerk/nextjs'
export default function SignUpPage() {
return <SignUp />
}Render the prebuilt sign-up interface in a Next.js page.
When to use it
Social sign-up
Expose configured OAuth or other social providers during onboarding.
Post-registration session tasks
Collect required follow-up authentication steps after account creation.
Interview questions
QWhat controls the SignUp component's behavior?
SignUp is a prebuilt UI component for registering users. The instance's Clerk Dashboard settings determine enabled sign-up options and social connections, and component properties provide additional customization.
Follow-up: What happens after registration if extra requirements remain? The component displays required session tasks that the user must complete.
QHow is SignUp rendered in a Next.js page?
Place the component in a page and render it, for example with the package's SignUp export and an empty component invocation. The page then displays Clerk's registration UI.
Follow-up: How would you adapt the implementation to another Clerk framework? Use that framework's documented SignUp export and page/component convention while preserving the same component role.
QWhat occurs when a signed-in user visits the sign-up route?
SignUp cannot render for an already signed-in user when only one session is allowed. In that case Clerk redirects the user to the Home URL; multiple-session applications are the exception.
Follow-up: Why might a sign-up route appear to skip its UI? Check the current authentication state and the application's multiple-session setting before debugging the component itself.
Related
SignInsession taskssign-up optionssocial connections