refactor: Force authentication check before page render

1 files changed, 22 insertions, 9 deletions

diff --git a/src/providers/AuthContext.js b/src/providers/AuthContext.js
index 4b81965..a32fb01 100644
--- a/src/providers/AuthContext.js
+++ b/src/providers/AuthContext.js
@@ -1,22 +1,34 @@
-import React, {createContext, useEffect, useState} from 'react';
+import React, { createContext, useEffect, useState } from 'react';
+
 export const AuthContext = createContext();
 
 export const AuthProvider = ({ children }) => {
     const [user, setUser] = useState(null);
     const [refreshToken, setRefreshToken] = useState(null);
+    const [loading, setLoading] = useState(true);
 
     useEffect(() => {
-        const storedUser = localStorage.getItem('user');
-        const storedRefreshToken = localStorage.getItem('refreshToken');
-        if (storedUser && storedRefreshToken) {
-            setUser(JSON.parse(storedUser));
-            setRefreshToken(storedRefreshToken);
-        }
+        const initializeAuth = async () => {
+            try {
+                const storedUser = localStorage.getItem('user');
+                const storedRefreshToken = localStorage.getItem('refreshToken');
+                if (storedUser && storedRefreshToken) {
+                    setUser(JSON.parse(storedUser));
+                    setRefreshToken(storedRefreshToken);
+                }
+            } catch (error) {
+                console.error('Error initializing auth:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        initializeAuth();
     }, []);
 
     const login = (userData, token) => {
         setUser(userData);
-        setRefreshToken(token)
+        setRefreshToken(token);
         localStorage.setItem('user', JSON.stringify(userData));
         localStorage.setItem('refreshToken', token);
     };
@@ -35,9 +47,10 @@ export const AuthProvider = ({ children }) => {
         logout,
     };
 
+    // Maybe make a loading screen animation/component to use?
     return (
         <AuthContext.Provider value={authContextValue}>
-            {children}
+            {loading ? <div></div> : children}
         </AuthContext.Provider>
     );
 };