fix(auth): update error handling to use react-hot-toast

Readme.md

@@ -62,24 +62,61 @@ We're excited to be part of **Social Winter of Code 2026**! This is a great oppo
 
 ## 🏗️ Architecture
 
-```
-┌─────────────────────────────────────────────────────────────┐
-│                    Frontend (Client)                         │
-│         React 19 + TypeScript + Tailwind CSS + Vite         │
-│                    Deployed on Vercel                        │
-└─────────────────────────────────────────────────────────────┘
-                              ↓
-┌─────────────────────────────────────────────────────────────┐
-│                  Backend (Node.js Server)                    │
-│          Express.js + Prisma + MongoDB + Socket.io          │
-│                    Deployed on Fly.io                        │
-└─────────────────────────────────────────────────────────────┘
-                              ↓
-┌─────────────────────────────────────────────────────────────┐
-│               AI Backend (Python FastAPI)                    │
-│          FastAPI + LangChain + Pinecone + Groq              │
-│                    Deployed on Fly.io                        │
-└─────────────────────────────────────────────────────────────┘
+```mermaid
+flowchart TD
+    %% Define Styles
+    classDef frontend fill:#e1f5fe,stroke:#01579b,stroke-width:2px;
+    classDef backend fill:#fff3e0,stroke:#e65100,stroke-width:2px;
+    classDef aibackend fill:#f3e5f5,stroke:#4a148c,stroke-width:2px;
+    classDef db fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px;
+    classDef external fill:#eee,stroke:#333,stroke-width:2px;
+
+    subgraph Client ["🖥️ Frontend (Vercel)"]
+        direction TB
+        React["React 19 + Vite + Tailwind CSS"]:::frontend
+    end
+
+    subgraph Server ["⚙️ Node.js Backend (Fly.io)"]
+        direction TB
+        API["Express.js + Socket.io"]:::backend
+        Prisma["Prisma ORM"]:::backend
+    end
+
+    subgraph AI ["🤖 AI Python Backend (Fly.io)"]
+        direction TB
+        FastAPI["FastAPI Server + LangChain"]:::aibackend
+        PyPDF["PDF Processor"]:::aibackend
+    end
+
+    subgraph Data ["💾 Databases & Storage"]
+        direction LR
+        Mongo[("MongoDB Atlas")]:::db
+        Redis[("Redis Cloud")]:::db
+        Pinecone[("Pinecone Vector DB")]:::db
+        Blob["Cloud Storage (R2/Blob)"]:::db
+    end
+
+    subgraph Ext ["☁️ External APIs"]
+        direction LB
+        Groq["Groq LLM API"]:::external
+        SMTP["SMTP (Emails)"]:::external
+    end
+
+    %% Core Connections
+    Client <-->|REST & WebSockets| API
+    Client -.->|Direct Uploads| Blob
+
+    API --- Prisma
+    Prisma <-->|CRUD Operations| Mongo
+    API <-->|Session/Cache| Redis
+    API -->|Dispatch| SMTP
+
+    API <-->|HTTP Queries| FastAPI
+
+    FastAPI --- PyPDF
+    FastAPI <-->|Store/Search Vectors| Pinecone
+    PyPDF -.->|Process Docs| Blob
+    FastAPI <-->|LLM Context/Prompts| Groq
 ```
 
 ---

client/src/App.tsx

@@ -223,11 +223,12 @@ const App: React.FC<AppProps> = () => {
         gutter={12}
         containerStyle={{ top: 40 }}
         toastOptions={{
+          duration: 4000,
           style: {
             fontSize: "14px",
             maxWidth: "500px",
             padding: "12px 20px",
-            backgroundColor: "#1e1e1e", 
+            backgroundColor: "#1e1e1e",
             color: "#fff",
             border: "2px solid #00cc33",
             borderRadius: "12px",

client/src/components/auth/AuthForm.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { User, Lock, UserPlus, LogIn, Mail, Shield } from "lucide-react";
 import { login, signup, sendOTP } from "../../utils/api";
+import toast from "react-hot-toast";
 
 interface AuthFormProps {
   onAuthChange: () => void;
@@ -18,27 +19,23 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
   const [otpSent, setOtpSent] = useState(false);
   const [loading, setLoading] = useState(false);
   const [otpLoading, setOtpLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState("");
   const navigate = useNavigate();
 
   const handleSendOTP = async () => {
     if (!email) {
-      setError("Please enter your email first");
+      toast.error("Please enter your email first");
       return;
     }
 
     setOtpLoading(true);
-    setError("");
-    setSuccess("");
 
     try {
       const response = await sendOTP(email, "signup");
-      setSuccess(response.message);
+      toast.success(response.message);
       setOtpSent(true);
       setShowOTPField(true);
     } catch (err: any) {
-      setError(err.response?.data?.error || "Failed to send OTP");
+      toast.error(err.userMessage || err.response?.data?.error || "Failed to send OTP");
     } finally {
       setOtpLoading(false);
     }
@@ -47,8 +44,6 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    setError("");
-    setSuccess("");
 
     try {
       const authResponse = isLogin
@@ -59,7 +54,7 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
 
       // Set success message for signup
       if (!isLogin) {
-        setSuccess("Account created successfully! Welcome to Edulume!");
+        toast.success("Account created successfully! Welcome to Edulume!");
       }
 
       // Notify parent component to re-check auth status
@@ -74,7 +69,7 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
       ); // Shorter delay for signup
     } catch (err: any) {
       console.error("❌ Authentication failed:", err);
-      setError(err.response?.data?.error || err.message || "An error occurred");
+      toast.error(err.userMessage || err.response?.data?.error || err.message || "An error occurred");
     } finally {
       setLoading(false);
     }
@@ -226,18 +221,6 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
               </div>
             </div>
 
-            {error && (
-              <div className="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded-lg">
-                {error}
-              </div>
-            )}
-
-            {success && (
-              <div className="bg-green-900/50 border border-green-500 text-green-200 px-4 py-3 rounded-lg">
-                {success}
-              </div>
-            )}
-
             <button
               type="submit"
               disabled={loading}

client/src/components/auth/ChangeUsernameForm.tsx

@@ -2,29 +2,26 @@ import { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { User, ArrowLeft } from "lucide-react";
 import { changeUsername } from "../../utils/api";
+import toast from "react-hot-toast";
 
 export default function ChangeUsernameForm() {
   const [username, setUsername] = useState("");
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState("");
   const navigate = useNavigate();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    setError("");
-    setSuccess("");
 
     try {
       await changeUsername(username);
-      setSuccess("Username changed successfully!");
+      toast.success("Username changed successfully!");
       setTimeout(() => {
         navigate("/");
         window.location.reload(); // Refresh to update navbar
       }, 1500);
     } catch (err: any) {
-      setError(err.response?.data?.error || "Failed to change username");
+      toast.error(err.userMessage || err.response?.data?.error || "Failed to change username");
     } finally {
       setLoading(false);
     }
@@ -79,18 +76,6 @@ export default function ChangeUsernameForm() {
               </p>
             </div>
 
-            {error && (
-              <div className="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded-lg">
-                {error}
-              </div>
-            )}
-
-            {success && (
-              <div className="bg-green-900/50 border border-green-500 text-green-200 px-4 py-3 rounded-lg">
-                {success}
-              </div>
-            )}
-
             <button
               type="submit"
               disabled={loading}

client/src/components/auth/ForgotPasswordForm.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { Mail, Shield, Lock, ArrowLeft } from "lucide-react";
 import { forgotPassword, resetPassword } from "../../utils/api";
+import toast from "react-hot-toast";
 
 const ForgotPasswordForm: React.FC = () => {
   const [step, setStep] = useState<"email" | "otp" | "password">("email");
@@ -10,22 +11,18 @@ const ForgotPasswordForm: React.FC = () => {
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState("");
   const navigate = useNavigate();
 
   const handleSendOTP = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    setError("");
-    setSuccess("");
 
     try {
       const response = await forgotPassword(email);
-      setSuccess(response.message);
+      toast.success(response.message);
       setStep("otp");
     } catch (err: any) {
-      setError(err.response?.data?.error || "Failed to send reset code");
+      toast.error(err.userMessage || err.response?.data?.error || "Failed to send reset code");
     } finally {
       setLoading(false);
     }
@@ -35,27 +32,25 @@ const ForgotPasswordForm: React.FC = () => {
     e.preventDefault();
 
     if (newPassword !== confirmPassword) {
-      setError("Passwords do not match");
+      toast.error("Passwords do not match");
       return;
     }
 
     if (newPassword.length < 6) {
-      setError("Password must be at least 6 characters long");
+      toast.error("Password must be at least 6 characters long");
       return;
     }
 
     setLoading(true);
-    setError("");
-    setSuccess("");
 
     try {
       const response = await resetPassword(email, otp, newPassword);
-      setSuccess(response.message);
+      toast.success(response.message);
       setTimeout(() => {
         navigate("/auth");
       }, 2000);
     } catch (err: any) {
-      setError(err.response?.data?.error || "Failed to reset password");
+      toast.error(err.userMessage || err.response?.data?.error || "Failed to reset password");
     } finally {
       setLoading(false);
     }
@@ -136,7 +131,7 @@ const ForgotPasswordForm: React.FC = () => {
       <button
         type="button"
         onClick={() =>
-          handleSendOTP({ preventDefault: () => {} } as React.FormEvent)
+          handleSendOTP({ preventDefault: () => { } } as React.FormEvent)
         }
         disabled={loading}
         className="w-full text-sm text-gray-400 hover:text-alien-green transition-colors duration-300"
@@ -242,18 +237,6 @@ const ForgotPasswordForm: React.FC = () => {
           {step === "otp" && renderOTPStep()}
           {step === "password" && renderPasswordStep()}
 
-          {error && (
-            <div className="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded-lg mt-6">
-              {error}
-            </div>
-          )}
-
-          {success && (
-            <div className="bg-green-900/50 border border-green-500 text-green-200 px-4 py-3 rounded-lg mt-6">
-              {success}
-            </div>
-          )}
-
           <div className="mt-6 text-center">
             <Link
               to="/auth"

client/src/components/discussions/CreateDiscussionPage.tsx

@@ -45,7 +45,7 @@ const CreateDiscussionPage: React.FC = () => {
       const result = await uploadImage(file, `discussion-${Date.now()}`);
       setImages([...images, result.url]);
     } catch (err: any) {
-      setError(err.response?.data?.error || "Failed to upload image");
+      setError(err.userMessage || err.response?.data?.error || "Failed to upload image");
     } finally {
       setImageUploading(false);
     }
@@ -112,7 +112,7 @@ const CreateDiscussionPage: React.FC = () => {
         navigate(`/discussions/${result.id}`);
       }, 500);
     } catch (err: any) {
-      setError(err.response?.data?.error || "Failed to create discussion");
+      setError(err.userMessage || err.response?.data?.error || "Failed to create discussion");
     } finally {
       setLoading(false);
     }