feat(firebase): Add Firebase SDK and initialize Analytics

This commit integrates the Firebase SDK into the application to enable Firebase services, starting with Google Analytics.

Key changes include:
- Added the `firebase` package as a dependency.
- Included Firebase project configuration variables in the production environment file.
- Created a new `firebase.ts` utility to centralize Firebase app initialization.
- Integrated the `FirebaseAnalytics` component into the root layout to enable analytics tracking across the entire application.

src/components/Auth/SigninWithPassword.tsx

@@ -1,15 +1,16 @@
 "use client";
 import { PasswordIcon, UserIcon } from "@/assets/icons";
 
+import { FormErrorMessages } from "@/constants/Texts";
 import { useLoginQuery } from "@/hooks/queries";
 import { ILoginCredentials } from "@/lib/api";
+import { COOKIE_KEYS } from "@/lib/shared/cookies";
+import { useIsMutating } from "@tanstack/react-query";
+import Cookies from "js-cookie";
 import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import InputGroup from "../FormElements/InputGroup";
 
-import { FormErrorMessages } from "@/constants/Texts";
-import { useIsMutating } from "@tanstack/react-query";
-
 export default function SigninWithPassword() {
   const isMutating = useIsMutating();
   const [passwordFieldInputType, setPasswordFieldInputType] = useState<
@@ -20,7 +21,10 @@ export default function SigninWithPassword() {
   const { mutate } = useLoginQuery(reset);
 
   const onSubmit: SubmitHandler<ILoginCredentials> = (data) => {
-    mutate(data);
+    mutate({
+      ...data,
+      device_token: Cookies.get(COOKIE_KEYS.device_token) ?? "",
+    });
   };
   return (
     <form onSubmit={handleSubmit(onSubmit)}>

src/components/Layouts/conditional-layout.tsx

@@ -1,11 +1,11 @@
 "use client";
 
+import { AuthGuard, LoginGuard } from "@/contexts";
 import { usePathname } from "next/navigation";
 import type { PropsWithChildren } from "react";
 import { Header } from "./header";
+import Notification from "./notification";
 import { Sidebar } from "./sidebar";
-import { AuthGuard, LoginGuard } from "@/contexts";
-
 export function ConditionalLayout({ children }: PropsWithChildren) {
   const pathname = usePathname();
   const isAuthPage = pathname.startsWith("/auth");
@@ -18,15 +18,17 @@ export function ConditionalLayout({ children }: PropsWithChildren) {
         </LoginGuard>
       ) : (
         <AuthGuard>
-          <div className="flex min-h-screen">
-            <Sidebar />
-            <div className="w-full bg-gray-2 dark:bg-[#020d1a]">
-              <Header />
-              <main className="isolate mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:p-10">
-                {children}
-              </main>
+          <Notification>
+            <div className="flex min-h-screen">
+              <Sidebar />
+              <div className="w-full bg-gray-2 dark:bg-[#020d1a]">
+                <Header />
+                <main className="isolate mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:p-10">
+                  {children}
+                </main>
+              </div>
             </div>
-          </div>
+          </Notification>
         </AuthGuard>
       )}
     </>

src/components/Layouts/firebase-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import useFirebase from "@/hooks/use-firebase";
+import type { PropsWithChildren } from "react";
+
+const FirebaseProvider = ({ children }: PropsWithChildren) => {
+  useFirebase();
+  return <>{children}</>;
+};
+
+export default FirebaseProvider;

src/components/Layouts/notification.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { onMessage } from "firebase/messaging";
+import { useEffect, type PropsWithChildren } from "react";
+
+import { messaging } from "@/services/firebase";
+import { toast } from "react-toastify";
+
+const Notification = ({ children }: PropsWithChildren) => {
+  useEffect(() => {
+    onMessage(messaging, (payload) => {
+      console.log("Message received. ", payload);
+      if (payload.notification) {
+        toast.success(payload.notification.title ?? "New Notification");
+      }
+    });
+  }, []);
+
+  return <>{children}</>;
+};
+
+export default Notification;