{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "clerk-sign-up", "title": "Clerk Sign Up", "description": "Multi-step sign-up form with name, email, password and email verification via OTP input. Includes password strength indicator.", "dependencies": [ "@clerk/nextjs" ], "registryDependencies": [], "files": [ { "path": "registry/default/blocks/clerk/clerk-sign-up/components/elements/clerk-sign-up.tsx", "content": "\"use client\";\n\nimport { useRouter } from \"next/navigation\";\nimport type * as React from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { useClerk, useSignUp } from \"@clerk/nextjs\";\n\nfunction cn(...classes: (string | boolean | undefined)[]) {\n return classes.filter(Boolean).join(\" \");\n}\n\nfunction EyeIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n );\n}\n\nfunction EyeOffIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction CheckIcon({ className }: { className?: string }) {\n return (\n \n \n \n );\n}\n\nfunction GoogleIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction GitHubIcon({ className }: { className?: string }) {\n return (\n \n \n \n );\n}\n\nfunction MicrosoftIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction AppleIcon({ className }: { className?: string }) {\n return (\n \n \n \n );\n}\n\nconst oauthIcons: Record<\n string,\n (props: { className?: string }) => React.ReactNode\n> = {\n oauth_google: GoogleIcon,\n oauth_github: GitHubIcon,\n oauth_apple: AppleIcon,\n oauth_microsoft: MicrosoftIcon,\n};\n\nconst oauthLabels: Record = {\n oauth_google: \"Google\",\n oauth_github: \"GitHub\",\n oauth_apple: \"Apple\",\n oauth_microsoft: \"Microsoft\",\n};\n\nfunction ArrowLeftIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n );\n}\n\nexport interface ClerkSignUpProps {\n className?: string;\n showOAuth?: boolean;\n heading?: string;\n subheading?: string;\n redirectUrl?: string;\n signInUrl?: string;\n afterSSOUrl?: string;\n}\n\ntype PasswordRequirement = {\n label: string;\n met: boolean;\n};\n\nfunction getPasswordRequirements(password: string): PasswordRequirement[] {\n return [\n { label: \"8+ characters\", met: password.length >= 8 },\n { label: \"Uppercase letter\", met: /[A-Z]/.test(password) },\n { label: \"Number\", met: /\\d/.test(password) },\n ];\n}\n\nexport function ClerkSignUp({\n className,\n showOAuth = true,\n heading = \"Create your account\",\n subheading = \"Welcome! Please fill in the details to get started.\",\n redirectUrl = \"/\",\n signInUrl = \"/sign-in\",\n afterSSOUrl = \"/sso-callback\",\n}: ClerkSignUpProps) {\n const { signUp, fetchStatus } = useSignUp();\n const clerk = useClerk();\n const router = useRouter();\n\n // biome-ignore lint/suspicious/noExplicitAny: accessing clerk environment internals for social provider detection\n const socialStrategies: string[] | undefined = (clerk as any).clerkjs\n ?.environment?.userSettings?.socialProviderStrategies;\n const oauthProviders = socialStrategies\n ? socialStrategies.map((s: string) => ({ strategy: s }))\n : undefined;\n\n const [step, setStep] = useState<\"form\" | \"verify\">(\"form\");\n const [firstName, setFirstName] = useState(\"\");\n const [lastName, setLastName] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [showPassword, setShowPassword] = useState(false);\n const [error, setError] = useState(null);\n\n const [otp, setOtp] = useState(Array(6).fill(\"\"));\n const otpRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n const requirements = getPasswordRequirements(password);\n const allRequirementsMet = requirements.every((r) => r.met);\n const canContinue =\n firstName.trim() !== \"\" &&\n lastName.trim() !== \"\" &&\n email.trim() !== \"\" &&\n allRequirementsMet;\n\n const isFetching = fetchStatus === \"fetching\";\n\n const handleOAuth = useCallback(\n async (strategy: string) => {\n setError(null);\n const { error: ssoError } = await signUp.sso({\n strategy: strategy as \"oauth_google\",\n redirectUrl,\n redirectCallbackUrl: afterSSOUrl,\n });\n if (ssoError) {\n setError(ssoError.message ?? \"OAuth failed. Please try again.\");\n }\n },\n [signUp, afterSSOUrl, redirectUrl],\n );\n\n const handleContinue = useCallback(async () => {\n if (!canContinue) return;\n setError(null);\n const { error: pwError } = await signUp.password({\n emailAddress: email,\n password,\n firstName,\n lastName,\n });\n if (pwError) {\n setError(pwError.message ?? \"Sign up failed.\");\n return;\n }\n const { error: sendError } = await signUp.verifications.sendEmailCode();\n if (sendError) {\n setError(sendError.message ?? \"Failed to send verification code.\");\n return;\n }\n setStep(\"verify\");\n }, [canContinue, signUp, email, password, firstName, lastName]);\n\n const handleOtpChange = useCallback(\n (index: number, value: string) => {\n if (value.length > 1) {\n const chars = value.slice(0, 6).split(\"\");\n const next = [...otp];\n chars.forEach((char, i) => {\n if (index + i < 6) next[index + i] = char;\n });\n setOtp(next);\n const focusIndex = Math.min(index + chars.length, 5);\n otpRefs.current[focusIndex]?.focus();\n return;\n }\n\n if (!/^\\d*$/.test(value)) return;\n\n const next = [...otp];\n next[index] = value;\n setOtp(next);\n\n if (value && index < 5) {\n otpRefs.current[index + 1]?.focus();\n }\n },\n [otp],\n );\n\n const handleOtpKeyDown = useCallback(\n (index: number, e: React.KeyboardEvent) => {\n if (e.key === \"Backspace\" && !otp[index] && index > 0) {\n otpRefs.current[index - 1]?.focus();\n }\n },\n [otp],\n );\n\n const otpCode = otp.join(\"\");\n const canVerify = otpCode.length === 6;\n\n const handleVerify = useCallback(async () => {\n if (!canVerify) return;\n setError(null);\n const { error: verifyError } = await signUp.verifications.verifyEmailCode({\n code: otpCode,\n });\n if (verifyError) {\n setError(verifyError.message ?? \"Verification failed.\");\n return;\n }\n const { error: finalizeError } = await signUp.finalize();\n if (finalizeError) {\n setError(finalizeError.message ?? \"Failed to complete sign up.\");\n return;\n }\n router.push(redirectUrl);\n }, [canVerify, signUp, otpCode, router, redirectUrl]);\n\n const handleResend = useCallback(async () => {\n setOtp(Array(6).fill(\"\"));\n otpRefs.current[0]?.focus();\n await signUp.verifications.sendEmailCode();\n }, [signUp]);\n\n return (\n \n
\n {step === \"verify\" && (\n {\n setStep(\"form\");\n setError(null);\n }}\n className=\"mb-4 inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground\"\n >\n \n Back\n \n )}\n \n {step === \"form\" ? heading : \"Verify your email\"}\n \n \n {step === \"form\"\n ? subheading\n : `Enter the verification code sent to ${email}`}\n

\n
\n\n {step === \"form\" && (\n
\n {showOAuth && (\n <>\n
\n {!oauthProviders ? (\n <>\n
\n
\n \n ) : (\n oauthProviders.map(({ strategy }) => {\n const Icon = oauthIcons[strategy];\n const label =\n oauthLabels[strategy] ?? strategy.replace(\"oauth_\", \"\");\n if (!Icon) return null;\n return (\n handleOAuth(strategy)}\n className=\"flex flex-1 items-center justify-center gap-2 rounded-lg border border-border bg-card px-3 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-accent\"\n >\n \n {label}\n \n );\n })\n )}\n
\n\n
\n
\n \n or\n \n
\n
\n \n )}\n\n
\n
\n
\n \n First name\n \n setFirstName(e.target.value)}\n className=\"h-9 w-full rounded-lg border border-border bg-background px-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary\"\n />\n
\n
\n \n Last name\n \n setLastName(e.target.value)}\n className=\"h-9 w-full rounded-lg border border-border bg-background px-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary\"\n />\n
\n
\n\n
\n \n Email address\n \n setEmail(e.target.value)}\n className=\"h-9 w-full rounded-lg border border-border bg-background px-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary\"\n />\n
\n\n
\n \n Password\n \n
\n setPassword(e.target.value)}\n className=\"h-9 w-full rounded-lg border border-border bg-background px-3 pr-9 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary\"\n />\n setShowPassword((prev) => !prev)}\n className=\"absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground\"\n >\n {showPassword ? (\n \n ) : (\n \n )}\n \n
\n\n {password.length > 0 && (\n \n {requirements.map((req) => (\n \n \n {req.label}\n \n ))}\n \n )}\n
\n
\n\n
\n\n {error && (\n \n {error}\n

\n )}\n\n \n {isFetching ? \"Creating account...\" : \"Continue\"}\n \n\n \n Already have an account?{\" \"}\n router.push(signInUrl)}\n className=\"font-medium text-primary underline-offset-4 hover:underline\"\n >\n Sign in\n \n

\n
\n )}\n\n {step === \"verify\" && (\n
\n
\n {otp.map((digit, index) => (\n {\n otpRefs.current[index] = el;\n }}\n data-slot=\"otp-input\"\n type=\"text\"\n inputMode=\"numeric\"\n maxLength={1}\n value={digit}\n onChange={(e) => handleOtpChange(index, e.target.value)}\n onKeyDown={(e) => handleOtpKeyDown(index, e)}\n onFocus={(e) => e.target.select()}\n className={cn(\n \"h-11 w-10 rounded-lg border bg-background text-center text-lg font-medium text-foreground outline-none transition-colors\",\n digit\n ? \"border-primary\"\n : \"border-border focus:border-primary focus:ring-1 focus:ring-primary\",\n )}\n />\n ))}\n
\n\n {error && (\n \n {error}\n

\n )}\n\n \n {isFetching ? \"Verifying...\" : \"Verify\"}\n \n\n \n Didn't receive a code?{\" \"}\n \n Resend\n \n

\n
\n )}\n\n \n \n Secured by\n clerk\n \n
\n
\n );\n}\n", "type": "registry:component" } ], "docs": "A complete sign-up form with registration and email verification steps. Features 6-digit OTP input with auto-focus and password requirements indicator. Wire up with Clerk's useSignUp() hook.", "categories": [ "clerk" ], "type": "registry:block" }