HOC useEffect firing before Authentication Context ReactJs - reactjs

Question

I have an Authentication Context that uses useEffect for getting data from sessionStorage and set a global user variable to pass down via context api.
On each protected route, I have a useEffect inside my hoc to check if the user is logged, and if it isn't send the user back to login page.
However, the useEffect inside the hoc is firing before the Authentication Context and therefore, doesn't see the authentication data and sends the customer to login page every time
const router = useRouter()
const [ user, setUser ] = useState(null)
const [ loading, setLoading ] = useState(false)
useEffect(() => {
async function loadUserFromSessionStorage() {
const token = sessionStorage.getItem('accessToken')
if (token) {
const { data: { customer: { name } } } = await axios.get(`http://localhost:3002/customer/token/${token}`)
if (name) setUser(name)
}
setLoading(false)
}
loadUserFromSessionStorage()
})
useEffect(() => {
if(!!user) router.push('/')
}, [ user ])
return (
<AuthContext.Provider
value={{ isAuthenticated: !!user, loading, user}}
>
{children}
</AuthContext.Provider>
)
}
And this is my HOC:
return () => {
const { user, isAuthenticated, loading } = useContext(AuthContext);
const router = useRouter();
useEffect(() => {
if (!isAuthenticated && !loading){
router.push("/login")
}
}, [ loading, isAuthenticated ]);
return (
isAuthenticated && <Component {...arguments} />
)
};
}
Does anyone know how to solve this?

Answer 1

As you may or may not know, the useEffect hook in your HOC will fire before the hook that loads your user from session state completes.
Where you went wrong is in setting your loading state to false by default:
const [ loading, setLoading ] = useState(false)
When you do this in the HOC effect hook
if (!isAuthenticated && !loading)...
That expression will be true the first time through and you get redirected to the login page. Just do useState(true) instead.

Answer 2

You're not passing the loading variable into the context, so when you deconstruct the context value in your HOC, it looks like:
{
user: undefined,
isAuthenticated: false,
loading: undefined
}
which, based on your logic will redirect to login.
Try adding the other two variables inside your AuthContext.Provider and see if that helps you out.