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.
This commit is contained in:
AmirReza Jamali
+5
-2
@@ -3,6 +3,7 @@ import "@/css/style.css";
|
||||
import "react-tooltip/dist/react-tooltip.css";
|
||||
|
||||
import { ConditionalLayout } from "@/components/Layouts/conditional-layout";
|
||||
import FirebaseProvider from "@/components/Layouts/firebase-provider";
|
||||
import "flatpickr/dist/flatpickr.min.css";
|
||||
import "jsvectormap/dist/jsvectormap.css";
|
||||
import type { Metadata } from "next";
|
||||
@@ -27,9 +28,11 @@ export default function RootLayout({ children }: PropsWithChildren) {
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body>
|
||||
<Providers>
|
||||
<NextTopLoader color="#5750F1" showSpinner={false} />
|
||||
<FirebaseProvider>
|
||||
<NextTopLoader color="#5750F1" showSpinner={false} />
|
||||
|
||||
<ConditionalLayout>{children}</ConditionalLayout>
|
||||
<ConditionalLayout>{children}</ConditionalLayout>
|
||||
</FirebaseProvider>
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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)}>
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { requestForToken } from "../services/firebase";
|
||||
|
||||
const useFirebase = () => {
|
||||
useEffect(() => {
|
||||
requestForToken();
|
||||
}, []);
|
||||
};
|
||||
|
||||
export default useFirebase;
|
||||
@@ -45,6 +45,7 @@ export const CreateAdminSchema = z.object({
|
||||
export const LoginCredentials = z.object({
|
||||
username: z.string(),
|
||||
password: z.string(),
|
||||
device_token: z.string(),
|
||||
});
|
||||
export const AdminListResponse = z.object({
|
||||
users: z.array(UserSchema),
|
||||
|
||||
@@ -6,4 +6,5 @@ export const COOKIE_KEYS = {
|
||||
theme: `${_COOKIE_PREFIX}_theme`,
|
||||
refresh_token: `${_COOKIE_PREFIX}_refresh_token`,
|
||||
user: `${_COOKIE_PREFIX}_user`,
|
||||
device_token: `${_COOKIE_PREFIX}_device_token`,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import { COOKIE_KEYS } from "@/lib/shared/cookies";
|
||||
import { initializeApp } from "firebase/app";
|
||||
import { getMessaging, getToken } from "firebase/messaging";
|
||||
import Cookies from "js-cookie";
|
||||
const firebaseConfig = {
|
||||
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
|
||||
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
|
||||
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
|
||||
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
|
||||
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
|
||||
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
|
||||
};
|
||||
|
||||
const app = initializeApp(firebaseConfig);
|
||||
export const messaging = getMessaging(app);
|
||||
|
||||
export const requestForToken = () => {
|
||||
return getToken(messaging)
|
||||
.then((currentToken) => {
|
||||
if (currentToken) {
|
||||
console.log("current token for client: ", currentToken);
|
||||
Cookies.set(COOKIE_KEYS.device_token, currentToken);
|
||||
} else {
|
||||
// Show permission request UI
|
||||
console.log(
|
||||
"No registration token available. Request permission to generate one.",
|
||||
);
|
||||
// ...
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("An error occurred while retrieving token. ", err);
|
||||
// ...
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user