feat(auth): integrate Firebase authentication and update auth flow

- Added Firebase authentication methods for login, signup, and password reset.
- Replaced mock user database with Firebase user management.
- Updated auth store to handle Firebase user state and authentication.
- Implemented middleware for Firebase authentication in RPC routes.
- Enhanced error handling and user feedback with toast notifications.
- Added Toast component for user notifications in the UI.
- Updated API client to include authorization headers for authenticated requests.
- Removed unused CSRF token logic and related code.

src/routes/auth/forgot.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="w-full">
+        <Toast />
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit"
             class="flex flex-col gap-4 w-full">
             <div class="text-sm text-gray-600 mb-2">
@@ -36,6 +37,13 @@ import { zodResolver } from '@primevue/forms/resolvers/zod';
 import { z } from 'zod';
 
 
+import { useAuthStore } from '@/stores/auth';
+import { useToast } from "primevue/usetoast";
+import { forgotPassword } from '@/lib/firebase';
+
+const auth = useAuthStore();
+const toast = useToast();
+
 const initialValues = reactive({
     email: ''
 });
@@ -48,9 +56,11 @@ const resolver = zodResolver(
 
 const onFormSubmit = ({ valid, values }: FormSubmitEvent) => {
     if (valid) {
-        console.log('Form submitted:', values);
-        // toast.add({ severity: 'success', summary: 'Success', detail: 'Reset link sent', life: 3000 });
-        // Handle actual forgot password logic here
+        forgotPassword(values.email).then(() => {
+             toast.add({ severity: 'success', summary: 'Success', detail: 'Reset link sent', life: 3000 });
+        }).catch(() => {
+             toast.add({ severity: 'error', summary: 'Error', detail: auth.error, life: 3000 });
+        });
     }
 };
 </script>

src/routes/auth/login.vue

@@ -4,8 +4,8 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit"
             class="flex flex-col gap-4 w-full">
             <div class="flex flex-col gap-1">
-                <label for="email" class="text-sm font-medium text-gray-700">Email or Username</label>
-                <InputText name="email" type="text" placeholder="admin or user@example.com" fluid
+                <label for="email" class="text-sm font-medium text-gray-700">Email</label>
+                <InputText name="email" type="text" placeholder="user@example.com" fluid
                     :disabled="auth.loading" />
                 <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{
                     $form.email.error?.message }}</Message>
@@ -56,15 +56,6 @@
                 <router-link to="/sign-up" class="font-medium text-blue-600 hover:text-blue-500 hover:underline">Sign up
                     for free</router-link>
             </p>
-
-            <!-- Hint for demo credentials -->
-            <div class="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
-                <p class="text-xs text-blue-800 font-medium mb-1">Demo Credentials:</p>
-                <p class="text-xs text-blue-600">Username: <code class="bg-blue-100 px-1 rounded">admin</code> |
-                    Password: <code class="bg-blue-100 px-1 rounded">admin123</code></p>
-                <p class="text-xs text-blue-600">Email: <code class="bg-blue-100 px-1 rounded">user@example.com</code> |
-                    Password: <code class="bg-blue-100 px-1 rounded">password</code></p>
-            </div>
         </Form>
     </div>
 </template>
@@ -104,7 +95,6 @@ const onFormSubmit = async ({ valid, values }: FormSubmitEvent) => {
 };
 
 const loginWithGoogle = () => {
-    console.log('Login with Google');
-    // Handle Google login logic here
+    auth.loginWithGoogle();
 };
 </script>

src/routes/auth/signup.vue

@@ -43,6 +43,12 @@ import { zodResolver } from '@primevue/forms/resolvers/zod';
 import { z } from 'zod';
 
 
+import { useAuthStore } from '@/stores/auth';
+import { useToast } from "primevue/usetoast";
+
+const auth = useAuthStore();
+const toast = useToast();
+
 const initialValues = reactive({
     name: '',
     email: '',
@@ -59,9 +65,9 @@ const resolver = zodResolver(
 
 const onFormSubmit = ({ valid, values }: FormSubmitEvent) => {
     if (valid) {
-        console.log('Form submitted:', values);
-        // toast.add({ severity: 'success', summary: 'Success', detail: 'Account created successfully', life: 3000 });
-        // Handle actual signup logic here
+        auth.register(values.name, values.email, values.password).catch(() => {
+             toast.add({ severity: 'error', summary: 'Error', detail: auth.error, life: 3000 });
+        });
     }
 };
 </script>