azavea/iow-boundary-tool

Prevent double auth check

Opened this issue · 2 comments

Overview

Inspection of the network tab reveals that the auth check happens twice when the app loads.

Expected Behavior

This check should happen only once.

Actual Behavior

It happens twice.

Steps to Reproduce

Demo

Screen Shot 2022-11-07 at 10 59 09 AM

This actually happens 5 times for me for successful logins:

image

Sometimes they return at different rates and result in the UI being logged in but the API requests not being authorized.

Toyed with this during the Q&A at showcase today. This seems to work for me:

diff --git a/src/app/src/components/AuthenticationGuard.js b/src/app/src/components/AuthenticationGuard.js
index 20371a2..d97431f 100644
--- a/src/app/src/components/AuthenticationGuard.js
+++ b/src/app/src/components/AuthenticationGuard.js
@@ -11,7 +11,7 @@ export default function AuthenticationGuard({ children }) {
     const dispatch = useDispatch();
     const location = useLocation();
     const user = useSelector(state => state.auth.user);
-    const [authChecked, setAuthChecked] = useState(false);
+    const [authChecked, setAuthChecked] = useState(!!user);
 
     useEffect(() => {
         if (!authChecked) {