fixed infinite loop when token cannot be validated

client/src/pages/Login.tsx

@@ -1,10 +1,9 @@
 import { useForm, SubmitHandler } from 'react-hook-form';
 import axios from 'axios';
 import icon from '../../assets/icon.png';
-import { Link, useNavigate, useNavigation } from 'react-router-dom';
-import { useContext, useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useContext, useState } from 'react';
 import { AuthContext } from '../utils/AuthProvider.tsx';
-import Cookies from 'js-cookie';
 
 type Inputs = {
   username: string;
@@ -19,13 +18,6 @@ export default function Login() {
     mode: 'onChange',
   });
 
-  useEffect(() => {
-    const token = Cookies.get('token');
-    if (token) {
-      navigate('/chat', { replace: true });
-    }
-  }, []);
-
   const onSubmit: SubmitHandler<Inputs> = (data) => {
     axios
       .post('${import.meta.env.VITE_API_URL}/api/auth/login', data, {

client/src/pages/Signup.tsx

@@ -2,9 +2,8 @@ import icon from '../../assets/icon.png';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import axios from 'axios';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
 import { AuthContext } from '../utils/AuthProvider.tsx';
-import Cookies from 'js-cookie';
 
 type Inputs = {
   username: string;
@@ -26,13 +25,6 @@ export default function Signup() {
   const [match, setMatch] = useState(true);
   const [message, setMessage] = useState('');
 
-  useEffect(() => {
-    const token = Cookies.get('token');
-    if (token) {
-      navigate('/chat', { replace: true });
-    }
-  }, []);
-
   const onSubmit: SubmitHandler<Inputs> = (data) => {
     if (data.password !== data.sPassword) {
       setMatch(true);

client/src/utils/ProtectedRoutes.tsx

@@ -1,9 +1,9 @@
-// ProtectedRoutes.tsx
 import { Navigate, Outlet } from 'react-router-dom';
-import axios from 'axios';
 import { useState, useEffect, useContext } from 'react';
 import Cookie from 'js-cookie';
 import { AuthContext } from './AuthProvider.tsx';
+import SpinningWheel from '../components/SpinningWheel.tsx';
+import { axiosClient } from '../App.tsx';
 
 export type UsernameType = {
   username: string | null;
@@ -21,8 +21,8 @@ function ProtectedRoutes() {
         return;
       }
 
-      axios
-        .get('${import.meta.env.VITE_API_URL}/api/auth/validate', { withCredentials: true })
+      axiosClient
+        .get('/api/auth/validate', { withCredentials: true })
         .then(async (res) => {
           setUsername(res.data.username);
           console.log(res.data.username);
@@ -38,9 +38,8 @@ function ProtectedRoutes() {
     validateToken();
   }, [setAuthorized]);
 
-  //TODO add spinning wheel
   if (authorized === null) {
-    return <p>loading...</p>;
+    return <SpinningWheel />;
   }
 
   return authorized ? (