Login problems using NextJS and TypeScript
Unanswered
Lionhead posted this in #help-forum
LionheadOP
I am doing a login; but I cannot perform the corresponding login and redirection; Verifying the console, I correctly capture the inputs, and I verify with a console.log that the error is being generated by Axios (Network Error). I tried to make a POST request in Postman and I correctly receive the data via body from the backend, like this:
{
"user": {
"dni": "..",
"username": "..",
"password": "..",
"name": "..",
"id": 1,
},
"token": ".."
}
And my code is like this:
const [access, setAccess] = useState(false);
const router = useRouter();
const [userData, setUserData] = useState({
username: "",
password: "",
});
const [errors, setErrors] = useState({
username: "",
password: "",
});
async function login(userData: {username: string, password: string}) {
const { username, password } = userData;
const URL = "https://89.117.33.196:8000/auth/login";
try {
const response = await axios.post(URL , userData)
if(response.data){
const { access } = response.data;
setAccess(true);
access && router.replace('/dashboard');}
}
}
catch (error) {
console.error(error);
if(error) throw new Error ("Can't verify")
}
}
useEffect(() => {
!access && router.replace('/');
}, [access]);
const handleChange = (e: React.FormEvent) =>{
const property = (e.target as HTMLInputElement).name;
const value = (e.target as HTMLInputElement).value;
setUserData({...userData, [property]: value});
setErrors(validations({...userData, [property]: value}));
}
const handleSubmit = (e: React.FormEvent) =>{
console.log("EnvÃa datos", userData)
e.preventDefault();
login(userData);
}
Can anyone help me?
{
"user": {
"dni": "..",
"username": "..",
"password": "..",
"name": "..",
"id": 1,
},
"token": ".."
}
And my code is like this:
const [access, setAccess] = useState(false);
const router = useRouter();
const [userData, setUserData] = useState({
username: "",
password: "",
});
const [errors, setErrors] = useState({
username: "",
password: "",
});
async function login(userData: {username: string, password: string}) {
const { username, password } = userData;
const URL = "https://89.117.33.196:8000/auth/login";
try {
const response = await axios.post(URL , userData)
if(response.data){
const { access } = response.data;
setAccess(true);
access && router.replace('/dashboard');}
}
}
catch (error) {
console.error(error);
if(error) throw new Error ("Can't verify")
}
}
useEffect(() => {
!access && router.replace('/');
}, [access]);
const handleChange = (e: React.FormEvent) =>{
const property = (e.target as HTMLInputElement).name;
const value = (e.target as HTMLInputElement).value;
setUserData({...userData, [property]: value});
setErrors(validations({...userData, [property]: value}));
}
const handleSubmit = (e: React.FormEvent) =>{
console.log("EnvÃa datos", userData)
e.preventDefault();
login(userData);
}
Can anyone help me?
3 Replies
@Barbary Lion code is hard ot read can u use openbin.dev to upload file cod
LionheadOP
I'm sorry for that; link to openbin:
https://www.openbin.dev/pastes/11b6c7cd-b35d-4227-bc8d-4fb735b49d9d
https://www.openbin.dev/pastes/11b6c7cd-b35d-4227-bc8d-4fb735b49d9d
LionheadOP
[PROBLEM SOLVED]
A poorly done destructuring; In line 28 of my code I extracted access from response.data, but in the object I received there was no access to change my setAccess, so I created the route and the logic of the data that is obtained from the request to the api in another document, and imported that logic into my login component.
I want to thank @Barbary Lion for your time and help, and you also pointed me to proper documentation to use CORS in my application.
A poorly done destructuring; In line 28 of my code I extracted access from response.data, but in the object I received there was no access to change my setAccess, so I created the route and the logic of the data that is obtained from the request to the api in another document, and imported that logic into my login component.
I want to thank @Barbary Lion for your time and help, and you also pointed me to proper documentation to use CORS in my application.