From 2bbfe508248c97cbaadcfe6c58df6fc77d90d3d9 Mon Sep 17 00:00:00 2001 From: Leanstix Date: Sat, 7 Sep 2024 15:50:19 +0100 Subject: [PATCH] authentication --- app/callback/auth.js | 43 ------------------------------- app/callback/auth/page.js | 53 +++++++++++++++++++++++++++++++++++++++ contexts/toast.js | 37 +++++++++++++++++++++++++++ hooks/auth.js | 11 +++----- 4 files changed, 94 insertions(+), 50 deletions(-) delete mode 100644 app/callback/auth.js create mode 100644 app/callback/auth/page.js create mode 100644 contexts/toast.js diff --git a/app/callback/auth.js b/app/callback/auth.js deleted file mode 100644 index ea4cdb3..0000000 --- a/app/callback/auth.js +++ /dev/null @@ -1,43 +0,0 @@ -"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(() => { - // Check if the token exists in the URL - if (token) { - // Save the token as a cookie to be used later - Cookies.set("authToken", token, { expires: 7 }); // Cookie expires in 7 days - - // Validate the token using the validateApp function from useAuth - validateApp({ appToken: token }); - - // Optionally notify the user of success - notifyUser("success", "Token validated successfully", "right"); - - // Redirect the user after saving the token (optional) - 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 - } - }, [token, router, validateApp, notifyUser]); // Dependency array includes token, router, and auth functions - - return ( -
-

- Validating... -

-
- ); -} diff --git a/app/callback/auth/page.js b/app/callback/auth/page.js new file mode 100644 index 0000000..dec19f4 --- /dev/null +++ b/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 ( +
+

+ Validating... +

+
+ ); +} diff --git a/contexts/toast.js b/contexts/toast.js new file mode 100644 index 0000000..3d3d1ce --- /dev/null +++ b/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 ( + + {children} + {toast && ( +
+
{message}
+
+ )} + + ); +}; diff --git a/hooks/auth.js b/hooks/auth.js index bec445d..5e1e547 100644 --- a/hooks/auth.js +++ b/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) {