I have a react app for the frontend and I am using django for the backend and I can login. But after page refresh user will be logged out. So I try it like:
authservice:
export const loginRequest = async (email, password) => {
try {
const response = await fetch(`${API_URL}/api/user/token/`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: email,
password: password,
}),
});
const data = await response.json();
if (response.ok) {
await AsyncStorage.setItem("Token", data.token);
return true;
} else {
throw new Error(data.token);
}
} catch (error) {
error, "email en of wachtwoord is niet goed ingevuld";
}
};
authcontext:
import {
loginRequest
} from "./authentication.service";
import React, { createContext, useEffect, useState } from "react";
export const AuthContextProvider = ({ children }) => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [user, setUser] = useState(null);
useEffect(() => {
const onLogin = (email, password) => {
setIsLoading(true);
loginRequest(email, password)
.then((u) => {
setUser(u);
setIsLoading(false);
})
.catch((e) => {
setIsLoading(false);
setError(e.toString());
});
};
onLogin();
}, []);
return (
<AuthContext.Provider
value={{
isAuthenticated: !!user,
isLoading,
error,
user,
loginRequest
}}>
{children}
</AuthContext.Provider>
);
};
I call the onLogin function from the component LoginScreen:
const { onLogin, error, isLoading } = useContext(AuthContext);
<Spacer size="large">
{!isLoading ? (
<AuthButton
icon="lock-open-outline"
mode="contained"
onPress={() => onLogin(email, password)}>
Login
</AuthButton>
) : (
<ActivityIndicator animating={false} />
)}
</Spacer>
But I get this error:
login.screen.js:61 Uncaught TypeError: onLogin is not a function
Question: how to stay loggedin with page refresh?
Regarding the problem of a user getting logged out on page refresh. you can simply fix it in the following way.
in your authcontext
import {
loginRequest
} from "./authentication.service";
import React, { createContext, useEffect, useState } from "react";
export const AuthContextProvider = ({ children }) => {
const [isLoading, setIsLoading] = useState(false);
const [token, setToken] = useState(AsyncStorage.getItem("Token"));
const [error, setError] = useState(null);
const [user, setUser] = useState( !!token );
useEffect(() => {
const onLogin = (email, password) => {
setIsLoading(true);
loginRequest(email, password)
.then((u) => {
setUser(u);
// assuming token will be comming `u.token` in response
setToken(u.token)
setIsLoading(false);
})
.catch((e) => {
setIsLoading(false);
setError(e.toString());
});
};
onLogin();
}, []);
return (
<AuthContext.Provider
value={{
isAuthenticated: !!user,
isLoading,
error,
user,
loginRequest
}}>
{children}
</AuthContext.Provider>
);
};
You need to pass the
email
andpassword
to yourOnLogin
function, since there is noOnLogin
function with no parameters passed/empty parameter. And where did you initially get theemail
andpassword
. Make sure it is correct.Please clarify if you are using this
AsyncStorage
. this is for react native@KabileeshG. I understand that. But I had the onLogin outside the useEffect. And in the AuthContext by values I had added the onLogin. But I can not do that with the onLogin in the useEffect I can not do that anymore. So what is then the solution?
@RamChander. I am not using that. I can login. But with page refresh user is logged out. You can solve the logged out issue with the package you mentioned?
Did you try with getting
token
from storage? like thisconst token = AsyncStorage.getItem("Token");
andconst [user, setUser] = useState( token?true:false);