Implemented the changes requested

Author: PinJinx

frontend/src/App.tsx

@@ -26,23 +26,62 @@ function App() {
 
   //Auto login if user has already logged in
   useEffect(() => {
-    supabase.auth.getSession().then(({ data ,error }) => {
+    supabase.auth.getSession().then(({ data, error }) => {
       if (error) {
         toast.error('User Login Failed');
-        console.error('Error checking session:'+ error);
+        console.error('Error checking session:', error);
         return;
       }
-      if (data.session) {
-        setIsAuthenticated(true);
-      }
+      setIsAuthenticated(!!data.session);
     });
+
+    const { data: subscription } = supabase.auth.onAuthStateChange(
+      (event, session) => {
+        console.log("Auth event:", event, session);
+        switch(event){
+        case "SIGNED_IN":
+          setIsAuthenticated(true);
+          toast.success("Signed in!");
+          break;
+
+        case "SIGNED_OUT":
+          setIsAuthenticated(false);
+          setActivePage("landing");
+          setRepoData(null);
+          toast.success("Signed out!");
+          break;
+
+        case "PASSWORD_RECOVERY":
+          toast("Check your email to reset your password.");
+          break;
+        case "TOKEN_REFRESHED":
+          console.log("Session refreshed");
+          break;
+        case "USER_UPDATED":
+          console.log("User updated", session?.user);
+          break;
+        }
+      }
+    );
+
+    return () => {
+      subscription.subscription.unsubscribe();
+    };
   }, []);
 
+
   const handleLogin = () => {
     setIsAuthenticated(true);
   };
 
-  const handleLogout = () => {
+  const handleLogout = async () => {
+    const { error } = await supabase.auth.signOut();
+    if (error) {
+      toast.error('Logout failed');
+      console.error('Error during logout:', error);
+      return;
+    }
+    toast.success('Signed out!');
     setIsAuthenticated(false);
     setActivePage('landing');
     setRepoData(null);
@@ -67,7 +106,7 @@ function App() {
       case 'settings':
         return <SettingsPage />;
       case 'profile':
-        return <ProfilePage />;
+        return <ProfilePage onSignOut={handleLogout} />;
       default:
         return <Dashboard repoData={repoData} />;
     }

frontend/src/components/pages/ForgotPasswrdPage.tsx

@@ -1,7 +1,7 @@
 import { useState, ReactNode, FormEvent } from "react";
 import { motion } from "framer-motion";
 import { useNavigate } from 'react-router-dom';
-import { toast, Toaster } from "react-hot-toast";
+import { toast} from "react-hot-toast";
 import { supabase } from "../../lib/supabaseClient";
 
 
@@ -71,7 +71,6 @@ export default function ForgotPasswrdPage() {
     <AuthLayout>
 
       <div className="bg-gray-900 p-8 rounded-xl border border-gray-800">
-        <Toaster position="top-right" />
         {!mailPage ? (
           <>
             <motion.div
@@ -115,7 +114,7 @@ export default function ForgotPasswrdPage() {
               <p className="text-center text-gray-400 text-sm">
                 <button
                   type="button"
-                  onClick={() => navigate('/signup')}
+                  onClick={() => navigate('/login')}
                   className="text-gray-400 hover:text-gray-300 font-medium"
                 >
                   Back to Sign In

frontend/src/components/pages/ProfilePage.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { toast } from 'react-hot-toast';
-import { User, Mail, Building, Globe, Github, Twitter, Edit, Camera, Save } from 'lucide-react';
+import { User, Mail, Building, Globe, Github, Twitter, Edit, Camera, Save, DoorClosed } from 'lucide-react';
 
-const ProfilePage = () => {
+const ProfilePage = ({onSignOut}:{onSignOut:()=>void}) => {
   const [isEditing, setIsEditing] = useState(false);
   const [profile, setProfile] = useState({
     name: 'Sarah Chen',
@@ -179,7 +179,19 @@ const ProfilePage = () => {
               className="w-full bg-gray-800 rounded-lg p-3 text-white focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50"
             />
           </div>
-
+              <div className="mt-8 flex justify-end">
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => {
+                  onSignOut();
+                }}
+                className="px-4 py-2 bg-red-500 hover:bg-red-600 rounded-lg transition-colors flex items-center"
+              >
+                <DoorClosed size={18} className="mr-2" />
+                Sign Out
+              </motion.button>
+              </div>
           {isEditing && (
             <div className="mt-8 flex justify-end space-x-4">
               <motion.button

frontend/src/components/pages/ResetPasswordPage.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import type { ReactNode, FormEvent } from "react";
 import { motion } from "framer-motion";
 import { useNavigate } from 'react-router-dom';
-import { toast, Toaster } from "react-hot-toast";
+import { toast} from "react-hot-toast";
 import { supabase } from "../../lib/supabaseClient";
 import {
   Settings,
@@ -137,7 +137,6 @@ export default function ResetPasswordPage() {
   return (
     <AuthLayout>
       <div className="bg-gray-900 p-8 rounded-xl border border-gray-800">
-        <Toaster position="top-right" />
         <>
           <motion.div
             initial={{ opacity: 0 }}

frontend/src/components/pages/SignUpPage.tsx

@@ -1,7 +1,7 @@
 import { useState, ReactNode, FormEvent } from "react";
 import { motion } from "framer-motion";
 import { useNavigate } from 'react-router-dom';
-import { toast, Toaster } from "react-hot-toast";
+import { toast } from "react-hot-toast";
 import { supabase } from "../../lib/supabaseClient";
 
 
@@ -112,7 +112,6 @@ export default function SignUpPage() {
   return (
     <AuthLayout>
       <div className="bg-gray-900 p-8 rounded-xl border border-gray-800">
-        <Toaster position="top-right" />
         {!mailPage ? (
           <>
             <motion.div