Merge pull request #11 from Leanstix/master

AUTHENTICATION

app/callback/auth/page.js

@@ -0,0 +1,53 @@
+"use client"; // Mark the component as client-side
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import Cookies from "js-cookie";
+import { useAuth } from "@/hooks/auth"; // Import the custom auth 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 { validateApp, notifyUser } = useAuth(); // Use validateApp and notifyUser from the auth hook
+
+  useEffect(() => {
+    const handleValidation = async () => {
+      if (token) {
+        // Save the token as a cookie to be used later
+        Cookies.set("authToken", token, { expires: 7 }); // Cookie expires in 7 days
+
+        try {
+          // Validate the token using the validateApp function from useAuth
+          await validateApp({ appToken: token });
+
+          // Notify the user of success after validation
+          notifyUser("success", "Token validated successfully", "right");
+
+          // Redirect the user after validation
+          setTimeout(() => {
+            router.push("/"); // Redirect to the homepage or any route
+          }, 1500); // Delay for user feedback
+        } catch (error) {
+          notifyUser("error", "Token validation failed", "right");
+          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 = Cookies.get("RedirectionLink");
+        router.push(RedirectionLink || "/"); // Redirect to the saved link or the homepage
+      }
+    };
+
+    handleValidation(); // Execute the validation logic
+  }, [token, router, validateApp, notifyUser]); // Dependency array includes token, router, and auth functions
+
+  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>
+  );
+}

contexts/toast.js

@@ -0,0 +1,37 @@
+"use client";
+import React, { createContext, useContext, useState } from "react";
+
+// Create a Context for the toast notifications
+const ToastContext = createContext();
+
+// Custom hook to use the ToastContext
+export const useToast = () => {
+  return useContext(ToastContext);
+};
+
+// Provider component to wrap your application
+export const ToastProvider = ({ children }) => {
+  const [toast, setToast] = useState("");
+  const [message, setMessage] = useState("");
+  const [position, setPosition] = useState("right"); // Example positions: 'right', 'left', 'top', 'bottom'
+
+  return (
+    <ToastContext.Provider
+      value={{ toast, setToast, message, setMessage, position, setPosition }}
+    >
+      {children}
+      {toast && (
+        <div
+          style={{
+            position: "fixed",
+            [position]: "10px",
+            bottom: "10px",
+            zIndex: 9999,
+          }}
+        >
+          <div className="toast">{message}</div>
+        </div>
+      )}
+    </ToastContext.Provider>
+  );
+};

hooks/auth.js

@@ -1,16 +1,13 @@
-import axios from "@/lib/axios";
+import axios from 'axios';
 import Cookies from "js-cookie";
-import { useUser } from "@/contexts/user";
 import { useToast } from "@/contexts/toast";
 import { useRouter, useSearchParams } from "next/navigation";
 
 export const useAuth = () => {
   const router = useRouter();
-  const { setUser } = useUser();
-  const { setMessage, setToast, setPosition }: any = useToast();
-  const searchParams = useSearchParams();
+  const { setMessage, setToast, setPosition } = useToast(); 
 
-  const notifyUser = (toast: string, message: string, position: string) => {
+  const notifyUser = (toast, message, position) => { 
     setToast(toast);
     setMessage(message);
     setPosition(position);
@@ -21,7 +18,7 @@ export const useAuth = () => {
     }, 3000);
   };
 
-  const validateApp = async ({ appToken }: { appToken: string }) => {
+  const validateApp = async ({ appToken }) => {  
     try {
       const response = await axios.get(`/app/callback/${appToken}`);
       if (response.data?.success) {