Check if a user is logged in or not - authentication

Question

I have a nextjs frontend in which I have created a redux store to store user's data. In the store I have an async function getCurrentUser (gets called in useEffect in _app) which sends an api request to backend to fetch the current user's data using the cookie and the frontend sets that data in the user's state. In the store I also have a function isLoggedIn that returns true or false based on whether the user's email is null or not.
Now I have a My Profile page which should display the user's information but to display this page a user should be logged in and the user in the cookie and store should be the same. So in the useEffect of this component I send an api request to backend which takes the cookie and returns the user's email and in the frontend I check if the returned email is same as the user's (in store) email. If the emails are different then I redirect the frontend, else I display the data.
Now the problem is that if I reload the My Profile page, state's email becomes null, getCurrentUser gets called, while it is resolving and setting the user's state isLoggedIn gets called and it returns false, so the frontend redirect even though the user is logged in.
Here is my userSlice:
export const getCurrentUser = createAsyncThunk(
"counter/getCurrentUser",
async () => {
const res = await axios.get("http://localhost:8000/get-current-user", {
withCredentials: true,
});
return res.data;
}
);
const userSlice = createSlice({
name: "user",
initialState: {
username: null,
email: null,
firstName: null,
lastName: null,
gender: null,
dob: null,
},
reducers: {
changeUser: (state, action) => {
return action.payload;
},
clearUser: () => {
return {
username: null,
email: null,
firstName: null,
lastName: null,
gender: null,
dob: null,
};
},
},
extraReducers(builder) {
builder.addCase(getCurrentUser.fulfilled, (state, action) => {
return action.payload;
});
},
});
export const isLoggedIn = (state) => {
if (state.user.email === null) {
return false;
}
return true;
};
Here is my _app.js:
function MyApp({ Component, pageProps }) {
const router = useRouter();
return (
<Provider store={store}>
<Header />
<App>
<Component {...pageProps} />
</App>
</Provider>
);
}
const App = ({ children }) => {
const dispatch = useDispatch();
useEffect(() => {
// Calling the dispatch method to get current user from backend
dispatch(getCurrentUser());
});
return <>{children}</>;
};
Here is my MyProfile.js component:
const user = useSelector((state) => state.user);
const isUserLoggedIn = useSelector(isLoggedIn);
useEffect(() => {
if (!isUserLoggedIn) {
Router.push("/");
return;
}
axios
.get("http://localhost:8000/get-current-user", { withCredentials: true })
.then((res) => {
if (res.data.email !== user.email) {
Router.push("/");
return;
}
console.log(res);
})
.catch((err) => {
console.log(err);
});
});
Can anyone tell me what can I do here?