Merge pull request #90 from UnknownCoder404/better-auth

Use context/state for storing user info locally

Author: UnknownCoder404

pnpm-lock.yaml

@@ -1,19 +1,30 @@
 "use client";
+
 import styles from "./Login.module.css";
 import { url } from "@/globals";
 import { Dispatch, SetStateAction, useState } from "react";
-import { isAdmin } from "../utils/credentials";
 import { Loader } from "../components/Loader/Loader";
 import { useRouter } from "next/navigation";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { clsx } from "clsx";
+import { useAuth } from "@/app/context/AuthContext"; // Import useAuth
+import { Role } from "../utils/credentials";
 
 async function handleSubmit(
     username: string,
     password: string,
     setMsg: Dispatch<SetStateAction<string>>,
     router: AppRouterInstance,
+    login: (
+        token: string,
+        username: string,
+        role: Role,
+        userId: string,
+    ) => void,
+    setLoading: (isLoading: boolean) => void,
 ) {
+    setLoading(true); // Set loading to true when the submission starts.
+
     try {
         const loginUrl = new URL(url);
         loginUrl.pathname = "/login";
@@ -51,30 +62,34 @@ async function handleSubmit(
         }
 
         const { id, token, username: responseUsername, role } = data.info;
-        localStorage.setItem("id", id);
-        localStorage.setItem("token", token);
-        localStorage.setItem("username", responseUsername);
-        localStorage.setItem("role", role);
 
-        window.dispatchEvent(new Event("storage"));
+        // Use context's login function instead of localStorage
+        login(token, responseUsername, role, id);
 
-        if (isAdmin(role)) router.push("/Dashboard");
-        else router.push("/");
+        // Redirect based on role
+        setTimeout(
+            () => router.push(role === "admin" ? "/Dashboard" : "/"),
+            1000,
+        );
     } catch (error) {
         setMsg(
             `Greška prilikom prijave: ${
                 error instanceof Error ? error.message : "Nepoznata greška"
             }`,
         );
         console.error(error);
+    } finally {
+        setLoading(false); // Ensure loading is set back to false.
     }
 }
 
 function ErrorMessage({ message }: { message: string }) {
     if (!message) return null;
     return (
         <div className={styles["message-container"]}>
-            <p className={styles["message"]}>{message}</p>
+            <p className={clsx(styles["message"], styles["error"])}>
+                {message}
+            </p>
         </div>
     );
 }
@@ -108,6 +123,7 @@ function LoginButton({
 
 function LoginForm() {
     const router = useRouter();
+    const { login } = useAuth(); // Get login function from context
     const [message, setMessage] = useState("");
     const [isLoading, setLoading] = useState(false);
     const [username, setUsername] = useState("");
@@ -118,13 +134,15 @@ function LoginForm() {
 
     const handleFormSubmit = async (event: React.FormEvent) => {
         event.preventDefault();
-        setMessage("");
-        setLoading(true);
-        try {
-            await handleSubmit(username, password, setMessage, router);
-        } finally {
-            setLoading(false);
-        }
+        setMessage(""); // Clear previous message on new submission attempt.
+        await handleSubmit(
+            username,
+            password,
+            setMessage,
+            router,
+            login,
+            setLoading,
+        );
     };
 
     return (

src/app/Login/LoginPage.tsx

@@ -1,6 +1,5 @@
 import { Metadata } from "next";
 import LoginPage from "./LoginPage";
-import ProtectedRoute from "../components/Common/ProtectedRoute";
 
 export const dynamic = "error";
 
@@ -11,9 +10,5 @@ export const metadata: Metadata = {
 };
 
 export default function Login() {
-    return (
-        <ProtectedRoute require="loggedout" redirectTo="/" validateToken>
-            <LoginPage />
-        </ProtectedRoute>
-    );
+    return <LoginPage />;
 }

src/app/Login/page.tsx

@@ -1,3 +1,5 @@
+import { Role } from "../utils/credentials";
+
 export type AllowedEvents = "3x3" | "4x4" | "3x3oh" | "2x2";
 
 export type UserEvent = {
@@ -10,8 +12,6 @@ export type UserComp = {
     events: UserEvent[];
 };
 
-export type Role = "admin" | "user";
-
 export type User = {
     _id: string;
     username: string;

src/app/Types/solve.ts

@@ -1,10 +1,11 @@
 "use client";
 import { VercelToolbar } from "@vercel/toolbar/next";
-import { getRole, isAdmin } from "../utils/credentials";
+import { isAdmin } from "../utils/credentials";
+import { useAuth } from "../context/AuthContext";
 
 // Show the Vercel toolbar only for admin users
 export function AdminToolbar() {
-    const role = getRole();
+    const { role } = useAuth();
     const isUserAdmin = role && isAdmin(role);
     return isUserAdmin ? <VercelToolbar /> : null;
 }

src/app/components/AdminToolbar.tsx

@@ -1,14 +1,9 @@
 "use client";
 
-import {
-    getRole,
-    isAdmin,
-    loggedIn,
-    logOut,
-    tokenValid,
-} from "@/app/utils/credentials";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import { useAuth } from "@/app/context/AuthContext";
+import { tokenValid } from "@/app/utils/credentials";
 
 type Props = {
     redirectTo?: string; // Optional redirection URL
@@ -25,25 +20,25 @@ export default function ProtectedRoute({
 }: Props) {
     const router = useRouter();
     const [isAuthorized, setIsAuthorized] = useState<boolean | null>(null); // null indicates "loading"
-    const isLoggedIn = loggedIn();
+    const { role, token, logOut } = useAuth();
+    const isLoggedIn = !!token; //Much better way to check if logged in
 
     useEffect(() => {
         const validateAccess = async () => {
             try {
-                const role = getRole();
-
                 // If token needs validation, check if it's valid
                 if (validateToken) {
-                    const tokenIsValid = await tokenValid();
+                    const isTokenValid = await tokenValid();
                     // If token is invalid and user does not need to be logged out, redirect
-                    if (!tokenIsValid && require !== "loggedout") {
+                    if (!isTokenValid && require !== "loggedout") {
+                        logOut(); // Log out so the old token is not valid anymore
                         handleRedirect();
                         return;
                     }
                     // If user has to be logged out, and user is logged in, log them out
                     if (
                         require === "loggedout" &&
-                        !tokenIsValid &&
+                        !isTokenValid &&
                         isLoggedIn
                     ) {
                         // User has invalid token, but is logged in locally
@@ -55,8 +50,8 @@ export default function ProtectedRoute({
                 // Check for other cases
                 if (
                     (require === "loggedin" && !isLoggedIn) ||
-                    (require === "admin" && (!role || !isAdmin(role))) ||
-                    (require === "loggedout" && role)
+                    (require === "admin" && role !== "admin") || // Simplified admin check
+                    (require === "loggedout" && isLoggedIn) // Simplified loggedout
                 ) {
                     handleRedirect();
                     return;
@@ -78,10 +73,14 @@ export default function ProtectedRoute({
         };
 
         validateAccess();
-    }, [require, validateToken, redirectTo, router, isLoggedIn]);
+    }, [require, validateToken, redirectTo, router, isLoggedIn, role, logOut]);
+
+    if (isAuthorized === null) {
+        return null; // Hide content while loading
+    }
 
     if (!isAuthorized) {
-        return null; // Hide content for unauthorized users or loading state
+        return null; // Hide content for unauthorized users.
     }
 
     return <>{children}</>; // Render protected content

src/app/components/Common/ProtectedRoute.tsx

@@ -1,26 +1,23 @@
 import { clsx } from "clsx";
-import { getId, isAdmin, Role } from "@/app/utils/credentials";
+import { isAdmin, Role } from "@/app/utils/credentials";
 import dashboardStyles from "@/app/Dashboard/Dashboard.module.css";
 import { assignAdminToUser, deleteUserById } from "@/app/utils/users";
 import { useRouter } from "next/navigation";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { User } from "@/app/Types/solve";
+import { useAuth } from "@/app/context/AuthContext";
+
+function DeleteUserButton({ id }: { id: string }) {
+    const { userId } = useAuth();
+    const router = useRouter();
 
-function DeleteUserButton({
-    id,
-    router,
-}: {
-    id: string;
-    router: AppRouterInstance;
-}) {
     return (
         <button
             className={clsx(
                 dashboardStyles["user-btn"],
                 dashboardStyles["remove-btn"],
             )}
             onClick={async () => {
-                if (id === getId()) {
+                if (id === userId) {
                     return alert("Ne možete izbrisati vlastiti računa.");
                 }
                 const userDeletion = await deleteUserById({ id });
@@ -38,15 +35,9 @@ function DeleteUserButton({
     );
 }
 
-function AdminButton({
-    role,
-    id,
-    router,
-}: {
-    role: Role;
-    id: string;
-    router: AppRouterInstance;
-}) {
+function AdminButton({ role, id }: { role: Role; id: string }) {
+    const router = useRouter();
+
     return (
         <button
             className={clsx(dashboardStyles["user-btn"], {
@@ -93,11 +84,10 @@ type Props = {
 };
 
 export default function UserButtons({ user, toggleCompVisibility }: Props) {
-    const router = useRouter();
     return (
         <div className={dashboardStyles["user-btns"]}>
-            <DeleteUserButton id={user._id} router={router} />
-            <AdminButton role={user.role} id={user._id} router={router} />
+            <DeleteUserButton id={user._id} />
+            <AdminButton role={user.role} id={user._id} />
             <CompButton toggleCompVisibility={toggleCompVisibility} />
         </div>
     );

src/app/components/Dashboard/UserButtons.tsx

@@ -2,36 +2,16 @@
 
 import Link from "next/link";
 import headerStyles from "./Header.module.css";
-import { getUsername, logOut } from "@/app/utils/credentials";
-import { useEffect, useState } from "react";
+import { useAuth } from "@/app/context/AuthContext";
 import { useRouter } from "next/navigation";
 import { clsx } from "clsx";
 import AccountCircleSvg from "../Svg/account_circle";
 
 function ClientLoginStatus() {
     const router = useRouter();
-    const [username, setUsername] = useState<string | null>(null);
-    const [loaded, setLoaded] = useState<boolean>(false);
+    const { username, logOut } = useAuth(); // Use useAuth hook
     const loggedIn = !!username;
 
-    useEffect(() => {
-        const syncUsername = () => {
-            setUsername(getUsername());
-        };
-
-        setUsername(getUsername());
-        setLoaded(true);
-
-        window.addEventListener("storage", syncUsername); // Listen for changes in storage
-        return () => {
-            window.removeEventListener("storage", syncUsername);
-        };
-    }, []);
-
-    if (!loaded) {
-        return <div className={headerStyles["account-container"]}></div>;
-    }
-
     return (
         <header className={headerStyles["account-container"]}>
             <h2 className={headerStyles["log-in"]}>
@@ -47,7 +27,6 @@ function ClientLoginStatus() {
                 onClick={() => {
                     if (loggedIn) {
                         logOut();
-                        setUsername(null);
                         router.refresh();
                     }
                 }}