--- name: signup description: Register a new user in the Todo app using Next.js frontend form, Better Auth integration, and FastAPI route. Use this skill whenever a new user wants to create an account, with Claude code orchestrating validation, security checks, and workflow automation. license: Complete terms in LICENSE.txt --- # Signup Skill This skill provides functionality to register new users in the Todo app. ## Purpose Register a new user in the Todo app when they want to create an account. This skill handles the complete user registration flow from form submission to account creation. ## When to Use Use this skill whenever a new user wants to create an account in the Todo app. This includes: - New user registration flows - Account creation with email verification - Social login integration (if enabled) - Profile setup during registration - Welcome workflow automation ## Implementation Overview The signup functionality is implemented using: - Next.js frontend form for user registration - Better Auth integration for secure authentication - FastAPI route for backend processing - Claude code for validation, security checks, and workflow automation ## Detailed Implementation ### 1. Next.js Signup Form Component Create a signup form component in your Next.js application: ```jsx \/\/ components\/SignupForm.jsx import { useState } from 'react'; import { signUp } from 'better-auth\/client'; const SignupForm = ({ onSuccess }) => { const [formData, setFormData] = useState({ email: '', password: '', confirmPassword: '', firstName: '', lastName: '' }); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); const [generalError, setGeneralError] = useState(''); const handleChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); \/\/ Clear error when user starts typing if (errors[name]) { setErrors(prev => { const newErrors = { ...prev }; delete newErrors[name]; return newErrors; }); } }; const validateForm = () => { const newErrors = {}; \/\/ Email validation if (!formData.email) { newErrors.email = 'Email is required'; } else if (!\/\S+@\S+\.\S+\/.test(formData.email)) { newErrors.email = 'Email address is invalid'; } \/\/ Password validation if (!formData.password) { newErrors.password = 'Password is required'; } else if (formData.password.length < 8) { newErrors.password = 'Password must be at least 8 characters'; } else if (!\/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)\/.test(formData.password)) { newErrors.password = 'Password must contain uppercase, lowercase, and number'; } \/\/ Confirm password validation if (!formData.confirmPassword) { newErrors.confirmPassword = 'Please confirm your password'; } else if (formData.password !== formData.confirmPassword) { newErrors.confirmPassword = 'Passwords do not match'; } \/\/ First name validation if (!formData.firstName.trim()) { newErrors.firstName = 'First name is required'; } else if (formData.firstName.trim().length < 2) { newErrors.firstName = 'First name must be at least 2 characters'; } \/\/ Last name validation if (!formData.lastName.trim()) { newErrors.lastName = 'Last name is required'; } else if (formData.lastName.trim().length < 2) { newErrors.lastName = 'Last name must be at least 2 characters'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = async (e) => { e.preventDefault(); if (!validateForm()) { return; } setIsSubmitting(true); setGeneralError(''); try { \/\/ Call Better Auth signup const response = await signUp('email', { email: formData.email, password: formData.password, firstName: formData.firstName, lastName: formData.lastName, redirect: false }); if (response?.error) { setGeneralError(response.error.message || 'An error occurred during signup'); } else { \/\/ Registration successful onSuccess && onSuccess(response); } } catch (error) { setGeneralError('An unexpected error occurred. Please try again.'); console.error('Signup error:', error); } finally { setIsSubmitting(false); } }; return (

First Name <\/label> {errors.firstName && (

{errors.firstName}<\/p> )} <\/div>

Last Name <\/label> {errors.lastName && (

{errors.lastName}<\/p> )} <\/div>

Email Address <\/label> {errors.email && (

{errors.email}<\/p> )} <\/div>

Password <\/label> {errors.password && (

{errors.password}<\/p> )} <\/div>

Confirm Password <\/label> {errors.confirmPassword && (

{errors.confirmPassword}<\/p> )} <\/div> {generalError && (

{generalError}<\/div> <\/div> )}