Authentication

app/callback/auth/components/validate.js

@@ -0,0 +1,30 @@
+"use client";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { useAuth } from "@/hooks/auth";
+import Cookies from "js-cookie";
+
+export default function Validate() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token");
+  const router = useRouter();
+
+  const { validateApp } = useAuth();
+
+  useEffect(() => {
+    if (token) {
+      validateApp({ appToken: token });
+    } else {
+      let RedirectionLink = Cookies.get("RedirectionLink");
+      router.push(RedirectionLink || "/");
+    }
+  }, []);
+
+  return (
+    <main className="w-full h-max py-40 flex justify-center items-center">
+      <h2 className="text-tremor-brand-boulder900 font-medium text-base">
+        Validating...
+      </h2>
+    </main>
+  );
+}

app/callback/auth/page.js

@@ -1,75 +1,13 @@
-"use client"; // Mark the component as client-side
-
-import { useRouter, useSearchParams } from "next/navigation"; // Next.js native hooks
-import { useEffect } from "react"; // React's useEffect hook
-
-export default function ValidateToken() {
-  const searchParams = useSearchParams(); // Access query parameters
-  const token = searchParams.get("token"); // Extract the token from the URL
-  const router = useRouter(); // For programmatic navigation
-
-  const setCookie = (name, value, days) => {
-    const expires = new Date();
-    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); // Set cookie expiration time
-    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`; // Save the cookie
-  };
-
-  const getCookie = (name) => {
-    const nameEQ = name + "=";
-    const ca = document.cookie.split(";");
-    for (let i = 0; i < ca.length; i++) {
-      let c = ca[i];
-      while (c.charAt(0) === " ") c = c.substring(1, c.length);
-      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
-    }
-    return null;
-  };
-
-  useEffect(() => {
-    const handleValidation = async () => {
-      if (token) {
-        // Construct the URL to retrieve the user token
-        const userTokenUrl = `https://api.analogueshifts.app/api/app/callback/${token}`;
-
-        try {
-          // Fetch the user token
-          const response = await fetch(userTokenUrl);
-          if (!response.ok) throw new Error("Failed to fetch user token");
-
-          const data = await response.json();
-          console.log(data)
-          const userToken = data?.userToken;
-
-          // Save the user token as a cookie
-          setCookie("analogueshifts", userToken, 7); // Cookie expires in 7 days
-
-          // Notify the user of success
-          alert("User token retrieved and stored successfully!");
-
-          // Redirect the user after validation
-          setTimeout(() => {
-            router.push("/login"); // Redirect to the homepage or any route
-          }, 6000); // Delay for user feedback
-
-        } catch (error) {
-          alert("Failed to retrieve user token!"); // Notify the user of failure
-          router.push("/"); // Redirect to the homepage or any route
-        }
-      } else {
-        // If no token is found, redirect to the saved redirection link or default route
-        let RedirectionLink = getCookie("RedirectionLink");
-        router.push(RedirectionLink || "/"); // Redirect to the saved link or the homepage
-      }
-    };
-
-    handleValidation(); // Execute the validation logic
-  }, [token, router]); // Dependency array includes token and router
+import { Suspense } from "react";
+import Validate from "./components/validate";
+import GuestLayout from "@/components/application/layouts/guest";
 
+export default function Page() {
   return (
-    <main className="w-full h-max py-28 flex justify-center items-center">
-      <h2 className="text-tremor-brand-boulder900 font-medium text-base">
-        Validating...
-      </h2>
-    </main>
+    <GuestLayout>
+      <Suspense fallback={<p></p>}>
+        <Validate />
+      </Suspense>
+    </GuestLayout>
   );
 }

app/globals.css

@@ -85,6 +85,9 @@ body::-webkit-scrollbar {
 .card-box:hover #num04 {
   color: #f892bc;
 }
+.our-apps-menu {
+  box-shadow: 0px 106.29px 503.27px 0px rgba(0, 0, 0, 0.08);
+}
 
 .template-img-box::before {
   content: "";

app/layout.js

@@ -3,6 +3,10 @@ import "./globals.css";
 import Script from "next/script";
 import { cn } from "@/lib/utils";
 
+import { UserProvider } from "@/contexts/user";
+import { ToastProvider } from "@/contexts/toast";
+import ToastMessage from "@/components/application/toast-message";
+
 const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({ children }) {
@@ -23,7 +27,15 @@ export default function RootLayout({ children }) {
             `}
         </Script>
       </head>
-      <body className={cn(inter.className)}>{children}</body>
+      <body className={cn(inter.className)}>
+        {" "}
+        <UserProvider>
+          <ToastProvider>
+            <ToastMessage />
+            {children}
+          </ToastProvider>
+        </UserProvider>
+      </body>
       <Script
         src="https://kit.fontawesome.com/39a80cd06c.js"
         crossorigin="anonymous"

app/my-resumes/components/resumes-dashboard.js

@@ -1,56 +1,14 @@
 "use client";
-import { useEffect, useState } from "react";
-import Cookies from "js-cookie";
+import { useUser } from "@/contexts/user";
 
 export default function Resumes() {
-  const [user, setUser] = useState(null); // State to store user information
-  const [loading, setLoading] = useState(true); // State to manage loading status
-
-  useEffect(() => {
-    const authToken = Cookies.get("analogueshifts"); // Retrieve the stored token
-
-    if (authToken) {
-      // If token exists, fetch user data from the API
-      console.log("user token exists")
-      fetchUserData(authToken);
-    } else {
-      setLoading(false); // No token, stop loading
-    }
-  }, []);
-
-  const fetchUserData = async (token) => {
-    try {
-      const res = await fetch("https://api.analogueshifts.app/api/user", {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-          Authorization: `Bearer ${token}`, // Pass the token in the Authorization header
-        },
-      });
-
-      if (!res.ok) throw new Error("Failed to fetch user information");
-
-      const data = await res.json();
-      setUser(data); // Store the user details in state
-    } catch (error) {
-      console.error("Error fetching user data:", error.message);
-    } finally {
-      setLoading(false); // Stop loading after the fetch is complete
-    }
-  };
-
-  console.log(user)
-
-  if (loading) {
-    return <p>Loading...</p>; // Display loading state
-  }
+  const { user } = useUser();
 
   return (
     <main className="w-full h-auto pt-[80px]">
       <main className="py-10 bg-[rgb(43,58,69)] px-10 max-[800px]:px-5">
         <p className="pb-5 text-base font-semibold text-white">
-          Welcome Back, {user?.first_name || "User"}!
+          Welcome Back, {user?.user_profile?.first_name || "User"}!
         </p>
         <p className="pb-10 font-bold text-white text-xl">
           Edit and Download Professional resumes to get your dream Job!