feat: add signup flow wizard and page
This commit is contained in:
@@ -0,0 +1,10 @@
|
|||||||
|
import { Suspense } from "react"
|
||||||
|
import SignupWizard from "@/components/auth/signup-wizard"
|
||||||
|
|
||||||
|
export default function SignupPage() {
|
||||||
|
return (
|
||||||
|
<Suspense>
|
||||||
|
<SignupWizard />
|
||||||
|
</Suspense>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from "react"
|
||||||
|
import { ArrowLeft, Loader2, Mail } from "lucide-react"
|
||||||
|
import { authClient } from "@/lib/auth-client"
|
||||||
|
import OtpInput from "./otp-input"
|
||||||
|
|
||||||
|
interface OtpVerificationStepProps {
|
||||||
|
email: string
|
||||||
|
onSuccess: () => void
|
||||||
|
onBack: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OtpVerificationStep({
|
||||||
|
email,
|
||||||
|
onSuccess,
|
||||||
|
onBack,
|
||||||
|
}: OtpVerificationStepProps) {
|
||||||
|
const [otp, setOtp] = useState("")
|
||||||
|
const [error, setError] = useState("")
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [resendTimer, setResendTimer] = useState(300) // 5 minutes
|
||||||
|
const [canResend, setCanResend] = useState(false)
|
||||||
|
|
||||||
|
// Countdown timer
|
||||||
|
useEffect(() => {
|
||||||
|
if (resendTimer <= 0) {
|
||||||
|
setCanResend(true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setResendTimer((prev) => prev - 1)
|
||||||
|
}, 1000)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}, [resendTimer])
|
||||||
|
|
||||||
|
const formatTime = (seconds: number) => {
|
||||||
|
const mins = Math.floor(seconds / 60)
|
||||||
|
const secs = seconds % 60
|
||||||
|
return `${mins}:${secs.toString().padStart(2, "0")}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleVerify = useCallback(async () => {
|
||||||
|
if (otp.length !== 6) return
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
setError("")
|
||||||
|
|
||||||
|
const { error } = await authClient.emailOtp.verifyEmail({
|
||||||
|
email,
|
||||||
|
otp,
|
||||||
|
})
|
||||||
|
|
||||||
|
setIsLoading(false)
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
setError(
|
||||||
|
error.code === "TOO_MANY_ATTEMPTS"
|
||||||
|
? "Too many attempts. Please request a new code."
|
||||||
|
: "Invalid code. Please try again.",
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
onSuccess()
|
||||||
|
}, [otp, email, onSuccess])
|
||||||
|
|
||||||
|
// Auto-submit when all digits entered
|
||||||
|
useEffect(() => {
|
||||||
|
if (otp.length === 6) {
|
||||||
|
handleVerify()
|
||||||
|
}
|
||||||
|
}, [otp, handleVerify])
|
||||||
|
|
||||||
|
const handleResend = async () => {
|
||||||
|
setError("")
|
||||||
|
await authClient.emailOtp.sendVerificationOtp({
|
||||||
|
email,
|
||||||
|
type: "email-verification",
|
||||||
|
})
|
||||||
|
setResendTimer(300)
|
||||||
|
setCanResend(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="text-center mb-2">
|
||||||
|
<Mail className="h-10 w-10 text-[#eb3779] mx-auto mb-3" />
|
||||||
|
<h1 className="text-lg font-bold text-[#ebe4f1]">
|
||||||
|
Verify your email
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs text-[#ebe4f1]/50 mt-1">
|
||||||
|
We sent a 6-digit code to{" "}
|
||||||
|
<strong className="text-[#ebe4f1]">{email}</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-2 text-center">
|
||||||
|
Verification code
|
||||||
|
</label>
|
||||||
|
<OtpInput
|
||||||
|
value={otp}
|
||||||
|
onChange={setOtp}
|
||||||
|
disabled={isLoading}
|
||||||
|
error={error}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center text-xs">
|
||||||
|
{canResend ? (
|
||||||
|
<button
|
||||||
|
onClick={handleResend}
|
||||||
|
className="text-[#eb3779] hover:underline"
|
||||||
|
>
|
||||||
|
Resend code
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<span className="text-[#ebe4f1]/40">
|
||||||
|
Resend code in{" "}
|
||||||
|
<span className="text-[#eb3779] font-semibold">
|
||||||
|
{formatTime(resendTimer)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleVerify}
|
||||||
|
disabled={isLoading || otp.length !== 6}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||||
|
Verify
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onBack}
|
||||||
|
className="flex items-center justify-center gap-1.5 w-full text-xs text-[#ebe4f1]/50 hover:text-[#ebe4f1] transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-3 w-3" />
|
||||||
|
Back to signup
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { KeyRound, Check, Loader2, Fingerprint } from "lucide-react"
|
||||||
|
import { authClient } from "@/lib/auth-client"
|
||||||
|
|
||||||
|
interface PasskeySetupStepProps {
|
||||||
|
onSuccess: () => void
|
||||||
|
onSkip: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PasskeySetupStep({
|
||||||
|
onSuccess,
|
||||||
|
onSkip,
|
||||||
|
}: PasskeySetupStepProps) {
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [error, setError] = useState("")
|
||||||
|
|
||||||
|
const isPasskeySupported =
|
||||||
|
typeof window !== "undefined" &&
|
||||||
|
"PublicKeyCredential" in window
|
||||||
|
|
||||||
|
const handleAddPasskey = async () => {
|
||||||
|
setIsLoading(true)
|
||||||
|
setError("")
|
||||||
|
|
||||||
|
const { error } = await authClient.passkey.addPasskey({
|
||||||
|
name: "Primary passkey",
|
||||||
|
})
|
||||||
|
|
||||||
|
setIsLoading(false)
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
setError(
|
||||||
|
error.message ||
|
||||||
|
"Failed to set up passkey. You can try again later.",
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
onSuccess()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="text-center mb-2">
|
||||||
|
<KeyRound className="h-10 w-10 text-[#eb3779] mx-auto mb-3" />
|
||||||
|
<h1 className="text-lg font-bold text-[#ebe4f1]">
|
||||||
|
Set up a passkey
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs text-[#ebe4f1]/50 mt-1 leading-relaxed">
|
||||||
|
Sign in faster with biometrics or your device's security
|
||||||
|
key. No password needed.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Benefits list */}
|
||||||
|
<div className="bg-white/[0.02] rounded-lg p-3.5 space-y-2">
|
||||||
|
<div className="flex items-center gap-2 text-xs text-[#ebe4f1]/60">
|
||||||
|
<Check className="h-3.5 w-3.5 text-[#22c55e] shrink-0" />
|
||||||
|
Faster sign-in with fingerprint or face
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-xs text-[#ebe4f1]/60">
|
||||||
|
<Check className="h-3.5 w-3.5 text-[#22c55e] shrink-0" />
|
||||||
|
More secure than passwords
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-xs text-[#ebe4f1]/60">
|
||||||
|
<Check className="h-3.5 w-3.5 text-[#22c55e] shrink-0" />
|
||||||
|
Works across your devices
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="text-red-400 text-xs text-center bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isPasskeySupported ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={handleAddPasskey}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Fingerprint className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Set up passkey
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onSkip}
|
||||||
|
className="w-full py-2.5 rounded-lg border border-white/10 text-[#ebe4f1]/60 text-sm hover:bg-white/[0.03] transition-colors"
|
||||||
|
>
|
||||||
|
Skip for now
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-xs text-[#ebe4f1]/40 mb-3">
|
||||||
|
Passkeys are not supported on this device.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={onSkip}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors"
|
||||||
|
>
|
||||||
|
Continue
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { Loader2 } from "lucide-react"
|
||||||
|
import { authClient } from "@/lib/auth-client"
|
||||||
|
import { signupSchema, type SignupInput } from "@/lib/auth/validation"
|
||||||
|
import SocialButtons from "./social-buttons"
|
||||||
|
import PasswordStrengthMeter from "./password-strength"
|
||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
interface SignupFormStepProps {
|
||||||
|
onSuccess: (email: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SignupFormStep({ onSuccess }: SignupFormStepProps) {
|
||||||
|
const [name, setName] = useState("")
|
||||||
|
const [email, setEmail] = useState("")
|
||||||
|
const [password, setPassword] = useState("")
|
||||||
|
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||||
|
const [serverError, setServerError] = useState("")
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setErrors({})
|
||||||
|
setServerError("")
|
||||||
|
|
||||||
|
const result = signupSchema.safeParse({ name, email, password })
|
||||||
|
if (!result.success) {
|
||||||
|
const fieldErrors: Record<string, string> = {}
|
||||||
|
result.error.issues.forEach((issue) => {
|
||||||
|
const field = issue.path[0] as string
|
||||||
|
fieldErrors[field] = issue.message
|
||||||
|
})
|
||||||
|
setErrors(fieldErrors)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
const { error } = await authClient.signUp.email({
|
||||||
|
name,
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
})
|
||||||
|
setIsLoading(false)
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
setServerError(
|
||||||
|
error.message || "Something went wrong. Please try again.",
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
onSuccess(email)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="text-center mb-2">
|
||||||
|
<h1 className="text-lg font-bold text-[#ebe4f1]">
|
||||||
|
Create your account
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs text-[#ebe4f1]/50 mt-1">
|
||||||
|
Choose how you'd like to sign up
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SocialButtons callbackURL="/signup?step=passkey" />
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex-1 h-px bg-white/[0.08]" />
|
||||||
|
<span className="text-[11px] text-[#ebe4f1]/40 uppercase">
|
||||||
|
or use email
|
||||||
|
</span>
|
||||||
|
<div className="flex-1 h-px bg-white/[0.08]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{serverError && (
|
||||||
|
<div className="text-red-400 text-xs text-center bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
|
||||||
|
{serverError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-1">
|
||||||
|
Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="Your name"
|
||||||
|
className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
|
||||||
|
/>
|
||||||
|
{errors.name && (
|
||||||
|
<p className="text-red-400 text-xs mt-1">{errors.name}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-1">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder="you@example.com"
|
||||||
|
className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
|
||||||
|
/>
|
||||||
|
{errors.email && (
|
||||||
|
<p className="text-red-400 text-xs mt-1">{errors.email}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-[#ebe4f1]/60 block mb-1">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
placeholder="Min. 10 characters"
|
||||||
|
className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
|
||||||
|
/>
|
||||||
|
{errors.password && (
|
||||||
|
<p className="text-red-400 text-xs mt-1">
|
||||||
|
{errors.password}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<PasswordStrengthMeter password={password} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||||
|
Continue
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p className="text-center text-xs text-[#ebe4f1]/50">
|
||||||
|
Already have an account?{" "}
|
||||||
|
<Link href="/login" className="text-[#eb3779] hover:underline">
|
||||||
|
Sign in
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react"
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation"
|
||||||
|
import StepIndicator from "./step-indicator"
|
||||||
|
import SignupFormStep from "./signup-form-step"
|
||||||
|
import OtpVerificationStep from "./otp-verification-step"
|
||||||
|
import PasskeySetupStep from "./passkey-setup-step"
|
||||||
|
|
||||||
|
export default function SignupWizard() {
|
||||||
|
const router = useRouter()
|
||||||
|
const searchParams = useSearchParams()
|
||||||
|
const stepParam = searchParams.get("step")
|
||||||
|
|
||||||
|
const [step, setStep] = useState<1 | 2 | 3>(() => {
|
||||||
|
if (stepParam === "otp") return 2
|
||||||
|
if (stepParam === "passkey") return 3
|
||||||
|
return 1
|
||||||
|
})
|
||||||
|
const [email, setEmail] = useState("")
|
||||||
|
|
||||||
|
// Update URL when step changes
|
||||||
|
useEffect(() => {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
if (step === 2) params.set("step", "otp")
|
||||||
|
if (step === 3) params.set("step", "passkey")
|
||||||
|
const query = params.toString()
|
||||||
|
router.replace(`/signup${query ? `?${query}` : ""}`, {
|
||||||
|
scroll: false,
|
||||||
|
})
|
||||||
|
}, [step, router])
|
||||||
|
|
||||||
|
const handleSignupSuccess = (userEmail: string) => {
|
||||||
|
setEmail(userEmail)
|
||||||
|
setStep(2)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleOtpSuccess = () => {
|
||||||
|
setStep(3)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePasskeyComplete = () => {
|
||||||
|
router.push("/")
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePasskeySkip = () => {
|
||||||
|
router.push("/")
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-5">
|
||||||
|
<StepIndicator currentStep={step} totalSteps={3} />
|
||||||
|
|
||||||
|
{step === 1 && (
|
||||||
|
<SignupFormStep onSuccess={handleSignupSuccess} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{step === 2 && (
|
||||||
|
<OtpVerificationStep
|
||||||
|
email={email}
|
||||||
|
onSuccess={handleOtpSuccess}
|
||||||
|
onBack={() => setStep(1)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{step === 3 && (
|
||||||
|
<PasskeySetupStep
|
||||||
|
onSuccess={handlePasskeyComplete}
|
||||||
|
onSkip={handlePasskeySkip}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user