my idea is to set a login functionality where users could login and when submitting data the user would be redirected to home page, then his profile would show instead of login
in the top corner, the problem seem that when i login and navigate to the home page and click on the profile, no data would be there unless i reload
in my server there is no data sent through the fetchToken function unless i reload even though i put loader to my page.
my submit function where i send data to backend and get back a token
async function handleSubmit(e: SyntheticEvent) {
e.preventDefault();
setSubmitting(true);
// if no file selected set empty string to show error and don't send data
if (!fileName) {
setFileName("");
setSubmitting(false);
return;
}
const target = e.target as HTMLFormElement;
const formData = new FormData(target);
const response = await fetchLogin(formData);
if (response.token) {
localStorage.setItem("token", response.token);
setSubmitting(false);
navigate("..");
} else {
setError(response);
setSubmitting(false);
}
}
my fetchLogin function
export async function fetchLogin(data: FormData) {
try {
const response = await fetch(`${URL}/onlineUsers/login`, {
method: "POST",
body: data,
});
const resData = await response.json()
console.log(resData);
return resData
} catch (error) {
// returns the error message if it exist
return processError(error);
}
}
my loader and login page
const LoginPage = () => {
const data = useLoaderData() || {name:"",imageUrl:""}
return (
<div>
<From data={data as LoggedUserData}/>
</div>
);
};
export async function loginLoader() {
const resData = await fetchToken()
if(resData)return resData
return;
}
my fetchToken function
export async function fetchToken(){
const response = await fetch(`${URL}/onlineUsers/token`,{
method:"POST",
headers:{
'Authorization':`Bearer ${token}`
}
})
const resData = await response.json();
return resData
}
in my backend, a fetch is sent but not with my token, what seems to be the problem? do i need to put my fetching function in redux state (thunk) ?