From c4016210e0ac59ead2a3d0c02c658d3a3b924a09 Mon Sep 17 00:00:00 2001
From: Kamar Mack <kamarmack.home@gmail.com>
Date: Mon, 25 Dec 2023 08:50:00 +0000
Subject: [PATCH] Add an authStateIsLoading flag

---
 .../hooks/useAuthStateRedirect.tsx            |  8 ++++-
 .../authentication/providers/AuthProvider.tsx | 35 ++++++++++++++-----
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/features/authentication/hooks/useAuthStateRedirect.tsx b/src/features/authentication/hooks/useAuthStateRedirect.tsx
index 9419786..9a2940f 100644
--- a/src/features/authentication/hooks/useAuthStateRedirect.tsx
+++ b/src/features/authentication/hooks/useAuthStateRedirect.tsx
@@ -55,6 +55,7 @@ export const useAuthStateRedirect = (
 	// Redirect to Authenticated User Welcome Page if User is Authenticated and Authenticated Users are not allowed
 	useEffect(() => {
 		if (!router.isReady) return;
+		if (authContext.authStateIsLoading) return;
 
 		if (authContext.user) {
 			if (allowAuthenticatedUsers) return;
@@ -79,7 +80,12 @@ export const useAuthStateRedirect = (
 
 		redirectToLoginPage({ ...options, router });
 		return;
-	}, [authContext.user, client_token, router.isReady]);
+	}, [
+		authContext.authStateIsLoading,
+		authContext.user,
+		client_token,
+		router.isReady,
+	]);
 
 	return { ...authContext };
 };
diff --git a/src/features/authentication/providers/AuthProvider.tsx b/src/features/authentication/providers/AuthProvider.tsx
index 8893201..d2ae3ea 100644
--- a/src/features/authentication/providers/AuthProvider.tsx
+++ b/src/features/authentication/providers/AuthProvider.tsx
@@ -4,25 +4,44 @@ import { firebaseApp } from '../../../lib/firebase';
 
 const auth = getAuth(firebaseApp);
 
-export const AuthContext = createContext<{ user: FirebaseUser | null }>({
+export type AuthProviderState = {
+	authStateIsLoading: boolean;
+	user: FirebaseUser | null;
+};
+export const AuthContext = createContext<AuthProviderState>({
+	authStateIsLoading: true,
 	user: null,
 });
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+	const [authStateIsLoading, setAuthStateIsLoading] = useState(true);
 	const [user, setUser] = useState<FirebaseUser | null>(null);
 
 	useEffect(() => {
+		auth
+			.authStateReady()
+			.then(() => {
+				setAuthStateIsLoading(false);
+				return;
+			})
+			.catch((error) => {
+				console.error(error);
+			});
+	}, []);
+
+	useEffect(() => {
+		if (authStateIsLoading) return;
+
 		const unsubscribe = auth.onAuthStateChanged((user) => {
-			if (user) {
-				setUser(() => user);
-			} else {
-				setUser(null);
-			}
+			setUser(() => user);
 		});
+
 		return () => unsubscribe();
-	}, []);
+	}, [authStateIsLoading]);
 
 	return (
-		<AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
+		<AuthContext.Provider value={{ authStateIsLoading, user }}>
+			{children}
+		</AuthContext.Provider>
 	);
 };