made password reset flow functional and also added username selection(with uniqueness check) on the signup form (#65)

* feat: improved Supabase password reset flow, username check, and UX enhancements

* chore: add explainer comments to password reset, signup, and auth flows

* feat: username validation, canonical email, and frontend improvements (no password_hash removal)

* chore: update after review or manual change

Author: Saahi30

Backend/.env-example

@@ -5,4 +5,4 @@ port=5432
 dbname=postgres
 GROQ_API_KEY=
 SUPABASE_URL=
-SUPABASE_KEY=
+SUPABASE_KEY=

Backend/app/models/models.py

@@ -27,7 +27,7 @@ class User(Base):
     id = Column(String, primary_key=True, default=generate_uuid)
     username = Column(String, unique=True, nullable=False)
     email = Column(String, unique=True, nullable=False)
-    password_hash = Column(Text, nullable=False)
+    password_hash = Column(Text, nullable=False)  # Restored for now
     role = Column(String, nullable=False)  # 'creator' or 'brand'
     profile_image = Column(Text, nullable=True)
     bio = Column(Text, nullable=True)

Backend/app/routes/post.py

@@ -44,7 +44,7 @@ async def create_user(user: UserCreate):
         "id": user_id,
         "username": user.username,
         "email": user.email,
-        "password_hash": user.password_hash,  
+        "password_hash": user.password_hash,
         "role": user.role,
         "profile_image": user.profile_image,
         "bio": user.bio,

Frontend/src/context/AuthContext.tsx

@@ -5,7 +5,7 @@ import {
   ReactNode,
   useEffect,
 } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { supabase, User } from "../utils/supabase";
 
 interface AuthContextType {
@@ -25,6 +25,7 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
   const [user, setUser] = useState<User | null>(null);
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const navigate = useNavigate();
+  const location = useLocation();
 
   useEffect(() => {
     supabase.auth.getSession().then(({ data }) => {
@@ -34,14 +35,20 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
     const { data: listener } = supabase.auth.onAuthStateChange(
       (event, session) => {
         setUser(session?.user || null);
-        if (session?.user) {
+        // Only redirect to dashboard if not on /reset-password and not during password recovery
+        
+        if (
+          session?.user &&
+          location.pathname !== "/reset-password" &&
+          event !== "PASSWORD_RECOVERY"
+        ) {
           navigate("/dashboard");
         }
       }
     );
 
     return () => listener.subscription.unsubscribe();
-  }, []);
+  }, [location.pathname, navigate]);
 
   const login = () => {
     setIsAuthenticated(true);

Frontend/src/pages/ForgotPassword.tsx

@@ -1,24 +1,44 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { ArrowLeft, Check, Rocket } from "lucide-react";
+import { supabase } from "../utils/supabase";
 
 export default function ForgotPasswordPage() {
   const [email, setEmail] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [error, setError] = useState("");
+  const [showSignupPrompt, setShowSignupPrompt] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError("");
+    setShowSignupPrompt(false);
 
     try {
-      // In a real app, you would call your auth API here
-      await new Promise((resolve) => setTimeout(resolve, 1500));
+      // Check if the email exists in the users table before sending a reset link
+      const { data: users, error: userError } = await supabase
+        .from("users")
+        .select("id")
+        .eq("email", email)
+        .maybeSingle();
+      if (userError) throw userError;
+      if (!users) {
+        // If the email does not exist, prompt the user to sign up
+        setShowSignupPrompt(true);
+        setIsLoading(false);
+        return;
+      }
+      // Send the password reset email using Supabase Auth
+      const { error } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: window.location.origin + "/reset-password"
+      });
+      if (error) throw error;
       setIsSubmitted(true);
-    } catch (err) {
-      setError("Something went wrong. Please try again.");
+    } catch (err: any) {
+     
+      setError(err.message || "Something went wrong. Please try again.");
     } finally {
       setIsLoading(false);
     }
@@ -88,6 +108,12 @@ export default function ForgotPasswordPage() {
                     </div>
                   )}
 
+                  {showSignupPrompt && (
+                    <div className="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg text-yellow-700 dark:text-yellow-400 text-sm animate-[pulse_1s_ease-in-out]">
+                      No account found with this email. <Link to="/signup" className="underline text-purple-600">Sign up?</Link>
+                    </div>
+                  )}
+
                   <form onSubmit={handleSubmit} className="space-y-6">
                     <div className="space-y-2">
                       <label
@@ -103,7 +129,8 @@ export default function ForgotPasswordPage() {
                         onChange={(e) => setEmail(e.target.value)}
                         required
                         className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-200"
-                        placeholder="[email protected]"
+                        // Email is case sensitive for password reset
+                        placeholder="[email protected] (CASE sensitive)"
                       />
                     </div>