improved password protection code

traque-front/hook/useAdmin.jsx

@@ -2,7 +2,7 @@ import { useAdminContext } from "@/context/adminContext";
 import { useSocket } from "@/context/socketContext";
 
 export default function useAdmin(){
-    const {teams, started} = useAdminContext();
+    const {teams, started } = useAdminContext();
     const {adminSocket} = useSocket();
 
     function pollTeams() {
@@ -42,6 +42,6 @@ export default function useAdmin(){
         adminSocket.emit("stop_game");
     }
 
-    return { teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, setTeamName };
+    return {teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, setTeamName };
 
 }

traque-front/hook/useGame.jsx

@@ -6,12 +6,13 @@ import { useTeamContext } from "@/context/teamContext";
 
 export default function useGame() {
     const {teamSocket} = useSocket();
-    const {loggedIn, login, teamId} = useTeamConnexion();
+    const {teamId} = useTeamConnexion();
     const {currentPosition, enemyPosition} = useTeamContext();
 
     function sendCurrentPosition() {
         teamSocket.emit("send_position");
     }
 
-    return { sendCurrentPosition, login, enemyPosition, currentPosition, loggedIn, teamId };
+
+    return { sendCurrentPosition, enemyPosition, currentPosition, teamId };
 }

traque-front/hook/useLocalStorage.jsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 export function useLocalStorage(key, initialValue) {
     const [storedValue, setStoredValue] = useState(initialValue);
+    const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         try {
@@ -11,6 +12,7 @@ export function useLocalStorage(key, initialValue) {
         } catch (error) {
             console.log(error);
         }
+        setLoading(false);
     }, []);
 
     const setValue = value => {
@@ -23,5 +25,5 @@ export function useLocalStorage(key, initialValue) {
         }
     }
 
-    return [storedValue, setValue];
+    return [storedValue, setValue, loading];
 }

traque-front/hook/usePasswordProtect.jsx

@@ -0,0 +1,15 @@
+"use client";
+import { redirect, usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+export function usePasswordProtect(loginPath, redirectPath, loading, loggedIn) {
+    const path = usePathname();
+    useEffect(() => {
+        if (!loggedIn && !loading && path !== loginPath) {
+            redirect(loginPath);
+        }
+        if(loggedIn && !loading && path === loginPath) {
+            redirect(redirectPath)
+        }
+    }, [loggedIn, loading, path]);
+}

traque-front/hook/useSocketAuth.jsx

@@ -0,0 +1,43 @@
+import {useEffect, useState} from 'react';
+import { useSocketListener } from './useSocketListener';
+import { useLocalStorage } from './useLocalStorage';
+import { usePathname } from 'next/navigation';
+
+const LOGIN_MESSAGE = "login";
+const LOGIN_RESPONSE_MESSAGE = "login_response";
+
+export function useSocketAuth(socket, passwordName) {
+    const [loggedIn, setLoggedIn] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [waitingForResponse, setWaitingForResponse] = useState(true);
+    const [savedPassword, setSavedPassword, savedPasswordLoading] = useLocalStorage(passwordName, null);
+    
+    useEffect(() => {
+        if (savedPassword && !loggedIn) {
+            socket.emit(LOGIN_MESSAGE, savedPassword);
+        }
+    }, [savedPassword]);
+
+    function login(password) {
+        setSavedPassword(password)
+    }
+
+    useSocketListener(socket, LOGIN_RESPONSE_MESSAGE,(loginResponse) => {
+        setWaitingForResponse(false);
+        setLoggedIn(loginResponse);
+    });
+
+    useEffect(() => {
+        //There is a password saved and we recieved a login response
+        if(savedPassword && !waitingForResponse && !savedPasswordLoading) {
+            setLoading(false);
+        }
+        //We tried to load the saved password but it is not there
+        else if (savedPassword == null && !savedPasswordLoading) {
+            setLoading(false);
+        }
+    }, [waitingForResponse, savedPasswordLoading, savedPassword]);
+
+
+    return {login,password: savedPassword, loggedIn, loading};
+}