[V0_FILE]typescriptreact:file="app/verify/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/privacy/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowLeft } from "lucide-react" export default function PrivacyPage() { return (

Last updated: {new Date().toLocaleDateString()}

1. Information We Collect

We collect information you provide directly to us, such as when you create an account, including your name, email address, phone number, and password.

2. How We Use Your Information

We use the information we collect to provide, maintain, and improve our services, communicate with you, and ensure the security of your account.

3. Information Sharing

We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except as described in this privacy policy.

4. Data Security

We implement appropriate security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.

5. Your Rights

You have the right to access, update, or delete your personal information. You may also opt out of certain communications from us.

6. Contact Us

If you have any questions about this Privacy Policy, please contact us at privacy@example.com.

) } [V0_FILE]typescriptreact:file="app/api/auth/login/route.ts" import { type NextRequest, NextResponse } from "next/server" import bcrypt from "bcryptjs" import { users } from "@/lib/auth" export async function POST(request: NextRequest) { try { const { email, password } = await request.json() // Validate input if (!email || !password) { return NextResponse.json({ error: "Email and password are required" }, { status: 400 }) } // Find user const user = users.find((u) => u.email === email) if (!user) { return NextResponse.json({ error: "Invalid email or password" }, { status: 401 }) } // Check password const isValidPassword = await bcrypt.compare(password, user.password) if (!isValidPassword) { return NextResponse.json({ error: "Invalid email or password" }, { status: 401 }) } // Check if email is verified if (!user.isVerified) { return NextResponse.json({ error: "Please verify your email address", needsVerification: true }, { status: 401 }) } // Create session const sessionData = { id: user.id, name: user.name, email: user.email, phone: user.phone, } const response = NextResponse.json({ message: "Login successful", user: sessionData }, { status: 200 }) // Set session cookie response.cookies.set("session", JSON.stringify(sessionData), { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "lax", maxAge: 60 * 60 * 24 * 7, // 7 days }) return response } catch (error) { console.error("Login error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="lib/auth.ts" // Simple in-memory user storage (in production, use a real database) export interface User { id: string name: string email: string phone: string password: string isVerified: boolean verificationToken?: string createdAt: string } export const users: User[] = [] export function generateVerificationToken(): string { return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) } export function findUserByEmail(email: string): User | undefined { return users.find((user) => user.email === email) } export function findUserById(id: string): User | undefined { return users.find((user) => user.id === id) } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Sparkles, Shield, Mail, Users } from "lucide-react" export default function HomePage() { return (

{/* Hero Section */}

Welcome to Our Platform

Join thousands of users in our secure, feature-rich platform. Create your account today and unlock amazing possibilities! ✨

{/* Features Section */}

Why Choose Us? 🌟

🔒 Secure & Safe Your data is protected with enterprise-grade security. We use advanced encryption and follow best practices.

📧 Email Verified Secure email verification system ensures authentic users and protects against spam and fraud.

👥 Community Join a vibrant community of users. Connect, share, and grow together in our platform.

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isQuickEdit="true" import { redirect } from "next/navigation" import { cookies } from "next/headers" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { LogOut, User, Mail, Phone } from "lucide-react" async function getUser() { const cookieStore = await cookies() const sessionCookie = cookieStore.get("session") if (!sessionCookie) { redirect("/login") } try { // In a real app, you'd verify the JWT token here const userData = JSON.parse(sessionCookie.value) return userData } catch (error) { redirect("/login") } } async function logout() { "use server" const cookieStore = await cookies() cookieStore.delete("session") redirect("/login") } export default async function DashboardPage() { const user = await getUser() return (

🎯

Dashboard

{/* Welcome Banner */}

👋

Welcome back, {user.name}! 🎉

Ready to explore your dashboard?

👤 Profile Info Your account details

Name: {user.name}

Email: {user.email}

Phone: {user.phone}

✅ Account Status Your account information

Email Verified: ✅ Verified

Account Type: ⭐ Premium

Member Since: {new Date().toLocaleDateString()}

⚡ Quick Actions Common tasks and settings

📊 Recent Activity Your recent account activity

🎉

Account created

Welcome to our platform!

{new Date().toLocaleDateString()}

✅

Email verified

Email address confirmed

{new Date().toLocaleDateString()}

🔐

First login

Successfully signed in

{new Date().toLocaleDateString()}

) } [V0_FILE]typescriptreact:file="package.json" isFixed="true" isQuickEdit="true" { "name": "auth-system", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "autoprefixer": "^10.4.20", "bcryptjs": "^2.4.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.0.0", "next-themes": "^0.4.6", "nodemailer": "^6.9.7", "react": "^18.2.0", "react-day-picker": "9.8.0", "react-dom": "^18.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "^3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/bcryptjs": "^2.4.6", "@types/node": "^20.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "eslint": "^8.0.0", "eslint-config-next": "15.0.0", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5.0.0" } } [V0_FILE]typescriptreact:file="lib/email-service.ts" // Simple email service that works in Next.js environment export async function sendEmailWithSMTP(to: string, subject: string, html: string) { try { // Using a simple SMTP service like Resend or SendGrid const response = await fetch("https://api.resend.com/emails", { method: "POST", headers: { Authorization: `Bearer ${process.env.RESEND_API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ from: process.env.FROM_EMAIL || "udayanmonda9091.com", to: [udayanmondal2000@gmail.com], subject: subject, html: html, }), }) if (response.ok) { const data = await response.json() console.log("✅ Email sent successfully:", data) return true } else { const error = await response.text() console.error("❌ Email service error:", error) return false } } catch (error) { console.error("❌ Email sending failed:", error) return false } } // Alternative: Using EmailJS (client-side service) export async function sendEmailWithEmailJS(to: string, verificationUrl: string) { try { const response = await fetch("https://api.emailjs.com/api/v1.0/email/send", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ service_id: process.env.EMAILJS_SERVICE_ID, template_id: process.env.EMAILJS_TEMPLATE_ID, user_id: process.env.EMAILJS_PUBLIC_KEY, template_params: { to_email: to, verification_url: verificationUrl, subject: "🔐 Verify Your Email Address", }, }), }) return response.ok } catch (error) { console.error("EmailJS error:", error) return false } } [V0_FILE]typescriptreact:file="app/signup/success/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/api/auth/signup/route.ts" import { type NextRequest, NextResponse } from "next/server" import bcrypt from "bcryptjs" import { sendVerificationEmail } from "@/lib/email" import { users, generateVerificationToken } from "@/lib/auth" export async function POST(request: NextRequest) { try { const { name, email, phone, password } = await request.json() // Validate input if (!name || !email || !phone || !password) { return NextResponse.json({ error: "All fields are required" }, { status: 400 }) } // Check if user already exists const existingUser = users.find((user) => user.email === email) if (existingUser) { return NextResponse.json({ error: "User with this email already exists" }, { status: 400 }) } // Hash password const hashedPassword = await bcrypt.hash(password, 12) // Generate verification token const verificationToken = generateVerificationToken() // Create user const newUser = { id: Date.now().toString(), name, email, phone, password: hashedPassword, isVerified: false, verificationToken, createdAt: new Date().toISOString(), } users.push(newUser) // Send verification email (this will always succeed, either via email service or console logging) try { await sendVerificationEmail(email, verificationToken) } catch (emailError) { console.error("Email sending failed, but user was created:", emailError) // Don't fail the signup if email fails - user is still created } // Return success with token for development mode const response = { message: "User created successfully. Please check your email for verification.", ...(process.env.NODE_ENV === "development" && { token: verificationToken }), } return NextResponse.json(response, { status: 201 }) } catch (error) { console.error("Signup error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/signup/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Alert, AlertDescription } from "@/components/ui/alert" import { Eye, EyeOff, Loader2 } from "lucide-react" interface FormData { name: string email: string phone: string password: string confirmPassword: string agreeToPrivacy: boolean } interface FormErrors { name?: string email?: string phone?: string password?: string confirmPassword?: string agreeToPrivacy?: string general?: string } export default function SignUpPage() { const router = useRouter() const [formData, setFormData] = useState({ name: "", email: "", phone: "", password: "", confirmPassword: "", agreeToPrivacy: false, }) const [errors, setErrors] = useState({}) const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const validateForm = (): boolean => { const newErrors: FormErrors = {} // Name validation if (!formData.name.trim()) { newErrors.name = "Name is required" } else if (formData.name.trim().length < 2) { newErrors.name = "Name must be at least 2 characters" } // Email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!formData.email) { newErrors.email = "Email is required" } else if (!emailRegex.test(formData.email)) { newErrors.email = "Please enter a valid email address" } // Phone validation const phoneRegex = /^\+?[\d\s\-$$$$]{10,}$/ if (!formData.phone) { newErrors.phone = "Phone number is required" } else if (!phoneRegex.test(formData.phone.replace(/\s/g, ""))) { newErrors.phone = "Please enter a valid phone number" } // Password validation const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/ if (!formData.password) { newErrors.password = "Password is required" } else if (!passwordRegex.test(formData.password)) { newErrors.password = "Password must be at least 8 characters with uppercase, lowercase, number, and special character" } // Confirm password validation if (!formData.confirmPassword) { newErrors.confirmPassword = "Please confirm your password" } else if (formData.password !== formData.confirmPassword) { newErrors.confirmPassword = "Passwords do not match" } // Privacy policy validation if (!formData.agreeToPrivacy) { newErrors.agreeToPrivacy = "You must agree to the privacy policy" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) { return } setIsLoading(true) setErrors({}) try { const response = await fetch("/api/auth/signup", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name: formData.name, email: formData.email, phone: formData.phone, password: formData.password, }), }) const data = await response.json() if (!response.ok) { setErrors({ general: data.error || "Something went wrong" }) return } // Redirect to success page with email and token (for development) const params = new URLSearchParams({ email: formData.email, ...(data.token && { token: data.token }), }) router.push(`/signup/success?${params.toString()}`) } catch (error) { setErrors({ general: "Network error. Please try again." }) } finally { setIsLoading(false) } } const handleInputChange = (field: keyof FormData, value: string | boolean) => { setFormData((prev) => ({ ...prev, [field]: value })) // Clear error when user starts typing if (errors[field]) { setErrors((prev) => ({ ...prev, [field]: undefined })) } } return (

🎉 Create Account Join our amazing community today!

{errors.general && ( {errors.general} )}

👤 Full Name handleInputChange("name", e.target.value)} className={`${errors.name ? "border-red-500 focus:border-red-500" : "border-purple-300 focus:border-purple-500"} rounded-lg`} placeholder="Enter your full name" /> {errors.name && (

⚠️ {errors.name}

)}

📧 Email handleInputChange("email", e.target.value)} className={`${errors.email ? "border-red-500 focus:border-red-500" : "border-purple-300 focus:border-purple-500"} rounded-lg`} placeholder="Enter your email" /> {errors.email && (

⚠️ {errors.email}

)}

📱 Phone Number handleInputChange("phone", e.target.value)} className={`${errors.phone ? "border-red-500 focus:border-red-500" : "border-purple-300 focus:border-purple-500"} rounded-lg`} placeholder="Enter your phone number" /> {errors.phone && (

⚠️ {errors.phone}

)}

🔐 Password

handleInputChange("password", e.target.value)} className={`${errors.password ? "border-red-500 focus:border-red-500" : "border-purple-300 focus:border-purple-500"} rounded-lg pr-10`} placeholder="Enter your password" />

{errors.password && (

⚠️ {errors.password}

)}

🔒 Must contain uppercase, lowercase, number, and special character

🔐 Confirm Password

handleInputChange("confirmPassword", e.target.value)} className={`${errors.confirmPassword ? "border-red-500 focus:border-red-500" : "border-purple-300 focus:border-purple-500"} rounded-lg pr-10`} placeholder="Confirm your password" />

{errors.confirmPassword && (

⚠️ {errors.confirmPassword}

)}

handleInputChange("agreeToPrivacy", checked as boolean)} className="border-purple-300" /> I agree to the{" "} Privacy Policy

{errors.agreeToPrivacy && (

⚠️ {errors.agreeToPrivacy}

)}

Already have an account?{" "} Sign in here 👋

) } [V0_FILE]typescriptreact:file="lib/email.ts" // Reliable email service using Resend API export async function sendVerificationEmail(email: string, token: string) { const verificationUrl = `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"}/verify?token=${token}` // Create beautiful HTML email template const emailHtml = ` Verify Your Email

Verify Your Email Address

Hi there! 👋

We're excited to have you on board! To complete your registration and secure your account, please verify your email address by clicking the button below:

✅ Verify My Email

Or copy and paste this link into your browser:

${verificationUrl}

⏰ Important: This link will expire in 24 hours for security reasons.

If you didn't create an account with us, you can safely ignore this email.

` const emailText = ` Welcome to Our Platform! Thank you for signing up! Please verify your email address by visiting this link: ${verificationUrl} This link will expire in 24 hours for security reasons. If you didn't create an account, you can safely ignore this email. Best regards, Your App Team ` // Try Resend first (most reliable) if (process.env.RESEND_API_KEY) { try { const success = await sendWithResend(email, emailHtml, emailText) if (success) { console.log(`✅ Email sent successfully via Resend to ${email}`) return true } } catch (error) { console.error("Resend failed:", error) } } // Try SMTP.js as fallback (works directly in browser) try { const success = await sendWithSMTPJS(email, verificationUrl) if (success) { console.log(`✅ Email sent successfully via SMTP.js to ${email}`) return true } } catch (error) { console.error("SMTP.js failed:", error) } // Development fallback - always show the link console.log(` 📧 EMAIL VERIFICATION REQUIRED ========================================== To: ${email} Subject: 🔐 Verify Your Email Address 🔗 VERIFICATION LINK: ${verificationUrl} ⏰ This link expires in 24 hours ========================================== 💡 INSTRUCTIONS: 1. Copy the verification link above 2. Paste it in your browser 3. Your email will be verified 📧 EMAIL NOT DELIVERED? - Check your spam/junk folder - Make sure ${email} is correct - Try using a different email provider ========================================== `) return true // Always return true so signup doesn't fail } // Resend email service (most reliable) async function sendWithResend(email: string, html: string, text: string) { const response = await fetch("https://api.resend.com/emails", { method: "POST", headers: { Authorization: `Bearer ${process.env.RESEND_API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ from: "onboarding@resend.dev", // This works without domain verification to: [email], subject: "🔐 Verify Your Email Address - Action Required", html: html, text: text, }), }) if (!response.ok) { const error = await response.text() throw new Error(`Resend API error: ${response.status} - ${error}`) } const result = await response.json() console.log("Resend response:", result) return true } // SMTP.js fallback (works in browser) async function sendWithSMTPJS(email: string, verificationUrl: string) { // This would work with SMTP.js library loaded in the browser // For now, we'll use a simple webhook approach try { const response = await fetch("/api/send-email", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ to: email, subject: "🔐 Verify Your Email Address", verificationUrl: verificationUrl, }), }) return response.ok } catch (error) { console.error("Webhook email failed:", error) return false } } [V0_FILE]typescriptreact:file="app/api/send-email/route.ts" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { to, subject, verificationUrl } = await request.json() // Using a free email service API (Formspree, EmailJS, etc.) // This is a backup method that works without complex setup const emailData = { service_id: "gmail", // You can use gmail, outlook, etc. template_id: "template_verification", user_id: "your_public_key", template_params: { to_email: to, subject: subject, verification_url: verificationUrl, message: `Please verify your email by clicking this link: ${verificationUrl}`, }, } // Try EmailJS API const response = await fetch("https://api.emailjs.com/api/v1.0/email/send", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(emailData), }) if (response.ok) { return NextResponse.json({ success: true, message: "Email sent successfully" }) } else { // If EmailJS fails, log the email details for manual verification console.log(` 📧 EMAIL VERIFICATION NEEDED ========================================== To: ${to} Subject: ${subject} Verification URL: ${verificationUrl} ========================================== `) return NextResponse.json({ success: true, message: "Email logged for verification (check console)", }) } } catch (error) { console.error("Email API error:", error) return NextResponse.json({ success: false, error: "Failed to send email" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/signup/success/page.tsx" "use client" import { useSearchParams } from "next/navigation" import Link from "next/link" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Alert, AlertDescription } from "@/components/ui/alert" import { Mail, CheckCircle, Copy, ExternalLink, AlertTriangle } from "lucide-react" import { useState, useEffect } from "react" export default function SignupSuccessPage() { const searchParams = useSearchParams() const email = searchParams.get("email") || "your email" const token = searchParams.get("token") const [copied, setCopied] = useState(false) const [verificationUrl, setVerificationUrl] = useState("") useEffect(() => { if (token && typeof window !== "undefined") { setVerificationUrl(`${window.location.origin}/verify?token=${token}`) } }, [token]) const copyToClipboard = async (text: string) => { try { await navigator.clipboard.writeText(text) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error("Failed to copy:", err) } } return (

🎉 Account Created! Please verify your email to continue

Check Your Email 📧

We've sent a verification link to {email}

{/* Email Instructions */} Next Steps:

Check your email inbox (including spam/junk folder)
Look for an email from "onboarding@resend.dev"
Click the "Verify My Email" button
Return here to sign in

{/* Direct Verification Link */} {verificationUrl && ( 🚀 Quick Verification:

If you don't receive the email, you can verify directly using this link:

{verificationUrl}

)} {/* Troubleshooting */} 📧 Email Not Received?

Check your spam/junk folder
Make sure {email} is spelled correctly
Try refreshing your email
Use the direct verification link above
Contact support if issues persist

{/* Action Buttons */}

{verificationUrl && ( )}

Having trouble? The verification link is also available in your browser console.

) } [V0_FILE]typescriptreact:file="components/email-setup-guide.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Button } from "@/components/ui/button" import { ExternalLink, Mail, Settings, CheckCircle } from "lucide-react" import Link from "next/link" export function EmailSetupGuide() { return (

Email Service Setup Guide Choose an email service to enable real email delivery to Gmail and other providers {/* Resend Setup */}

Option 1: Resend (Recommended)

Most reliable, easy setup, 3,000 free emails per month

Go to{" "} resend.com
Sign up for a free account
Go to API Keys section
Create a new API key
Add to your .env.local file:{" "} RESEND_API_KEY=your_key_here

Pro tip: Resend works immediately with their default domain. No additional setup required!

{/* Current Status */} Current Status: The app works in development mode with console logging. Set up an email service above for production email delivery. {/* Quick Test */}

Quick Test

After setting up an email service, test it by creating a new account

) } [V0_FILE]typescriptreact:file="app/email-setup/page.tsx" import { EmailSetupGuide } from "@/components/email-setup-guide" export default function EmailSetupPage() { return (

) } [V0_FILE]typescriptreact:file=".env.local" # Email Service Configuration # Resend (Recommended - Easy setup, reliable delivery) # 1. Go to https://resend.com # 2. Sign up for free account (3,000 emails/month) # 3. Get API key from dashboard # 4. Uncomment and add your key below: # RESEND_API_KEY=re_your_api_key_here # Base URL for verification links NEXT_PUBLIC_BASE_URL=http://localhost:3000 # In production, use your actual domain: # NEXT_PUBLIC_BASE_URL=https://yourdomain.com # Development mode (no setup required) # The app will work without any email service setup # Verification links will be shown in console and success page [V0_FILE]typescriptreact:file="app/verify/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { useSearchParams, useRouter } from "next/navigation" import { Suspense } from "react" import VerifyContent from "./verify-content" function VerifyLoading() { return (

Verifying your email...

Please wait while we verify your account

) } export default function VerifyPage() { const searchParams = useSearchParams() const router = useRouter() const [status, setStatus] = useState<"loading" | "success" | "error">("loading") const [message, setMessage] = useState("") useEffect(() => { const token = searchParams.get("token") if (!token) { setStatus("error") setMessage("Invalid verification link") return } const verifyEmail = async () => { try { const response = await fetch("/api/auth/verify", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ token }), }) const data = await response.json() if (response.ok) { setStatus("success") setMessage("Email verified successfully!") } else { setStatus("error") setMessage(data.error || "Verification failed") } } catch (error) { setStatus("error") setMessage("Network error. Please try again.") } } verifyEmail() }, [searchParams]) return ( }> ) } [V0_FILE]typescriptreact:file="app/verify/verify-content.tsx" "use client" import { useEffect, useState } from "react" import { useSearchParams, useRouter } from "next/navigation" import Link from "next/link" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Alert, AlertDescription } from "@/components/ui/alert" import { CheckCircle, XCircle, Loader2, ArrowRight } from "lucide-react" export default function VerifyContent() { const searchParams = useSearchParams() const router = useRouter() const [status, setStatus] = useState<"loading" | "success" | "error">("loading") const [message, setMessage] = useState("") useEffect(() => { const token = searchParams.get("token") if (!token) { setStatus("error") setMessage("Invalid verification link. The token is missing.") return } const verifyEmail = async () => { try { console.log("Verifying token:", token) const response = await fetch("/api/auth/verify", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ token }), }) const data = await response.json() console.log("Verification response:", data) if (response.ok) { setStatus("success") setMessage("Your email has been successfully verified! You can now sign in to your account.") // Auto-redirect to login after 3 seconds setTimeout(() => { router.push("/login") }, 3000) } else { setStatus("error") setMessage(data.error || "Verification failed. The link may be expired or invalid.") } } catch (error) { console.error("Verification error:", error) setStatus("error") setMessage("Network error occurred. Please check your connection and try again.") } } // Add a small delay to show loading state setTimeout(() => { verifyEmail() }, 1000) }, [searchParams, router]) return (

{status === "loading" && "🔄 Verifying Email..."} {status === "success" && "🎉 Email Verified!"} {status === "error" && "❌ Verification Failed"} {status === "loading" && "Please wait while we verify your email address"} {status === "success" && "Your account is now active and ready to use"} {status === "error" && "There was a problem verifying your email"} {status === "loading" && (

Processing your verification...

)} {status === "success" && ( <>

✨

Congratulations! 🎊

{message}

✅ Your account is now verified and active!

🚀 You'll be automatically redirected to login in 3 seconds...

)} {status === "error" && ( <>

💔

Verification Failed

{message}

💡 What you can do:

• Check if the link is complete and not broken
• Try signing up again with the same email
• Contact support if the problem persists

)}

) } [V0_FILE]typescriptreact:file="app/api/auth/verify/route.ts" import { type NextRequest, NextResponse } from "next/server" import { users } from "@/lib/auth" export async function POST(request: NextRequest) { try { const { token } = await request.json() console.log("Received verification request for token:", token) if (!token) { return NextResponse.json({ error: "Verification token is required" }, { status: 400 }) } // Find user with verification token const user = users.find((u) => u.verificationToken === token && !u.isVerified) console.log("Found user:", user ? `${user.email} (ID: ${user.id})` : "No user found") console.log( "All users:", users.map((u) => ({ email: u.email, token: u.verificationToken, verified: u.isVerified })), ) if (!user) { return NextResponse.json( { error: "Invalid or expired verification token. The link may have already been used or is no longer valid.", }, { status: 400 }, ) } // Mark user as verified user.isVerified = true user.verificationToken = undefined // Remove the token after use console.log("User verified successfully:", user.email) return NextResponse.json( { message: "Email verified successfully", user: { id: user.id, email: user.email, name: user.name, }, }, { status: 200 }, ) } catch (error) { console.error("Verification error:", error) return NextResponse.json({ error: "Internal server error during verification" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Eye, EyeOff, Loader2 } from "lucide-react" interface LoginData { email: string password: string } interface LoginErrors { email?: string password?: string general?: string } export default function LoginPage() { const router = useRouter() const [formData, setFormData] = useState({ email: "", password: "", }) const [errors, setErrors] = useState({}) const [showPassword, setShowPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const validateForm = (): boolean => { const newErrors: LoginErrors = {} if (!formData.email) { newErrors.email = "Email is required" } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) { newErrors.email = "Please enter a valid email address" } if (!formData.password) { newErrors.password = "Password is required" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) { return } setIsLoading(true) setErrors({}) try { const response = await fetch("/api/auth/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) const data = await response.json() if (!response.ok) { setErrors({ general: data.error || "Login failed" }) return } if (data.needsVerification) { setErrors({ general: "Please verify your email address first. Check your inbox for the verification link, or try signing up again.", }) return } // Redirect to dashboard on successful login router.push("/dashboard") } catch (error) { setErrors({ general: "Network error. Please try again." }) } finally { setIsLoading(false) } } const handleInputChange = (field: keyof LoginData, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) // Clear error when user starts typing if (errors[field]) { setErrors((prev) => ({ ...prev, [field]: undefined })) } } return (

👋 Welcome Back! Sign in to your account

{errors.general && ( ⚠️ {errors.general} )}

📧 Email handleInputChange("email", e.target.value)} className={`${errors.email ? "border-red-500 focus:border-red-500" : "border-indigo-300 focus:border-indigo-500"} rounded-lg`} placeholder="Enter your email" /> {errors.email && (

⚠️ {errors.email}

)}

🔐 Password

handleInputChange("password", e.target.value)} className={`${errors.password ? "border-red-500 focus:border-red-500" : "border-indigo-300 focus:border-indigo-500"} rounded-lg pr-10`} placeholder="Enter your password" />

{errors.password && (

⚠️ {errors.password}

)}

🤔 Forgot your password?

Don't have an account?{" "} Sign up here 🚀

) }

1. Information We Collect

2. How We Use Your Information

3. Information Sharing

4. Data Security

5. Your Rights

6. Contact Us

Welcome to Our Platform

Why Choose Us? 🌟

Welcome back, {user.name}! 🎉

🎉 Welcome to Our Platform!

Verify Your Email Address

Check Your Email 📧

Option 1: Resend (Recommended)

Quick Test

Verifying your email...

Congratulations! 🎊

Verification Failed

💡 What you can do: