I recently finished a project in React, only the client side was developed, I used a ready-made API. One of the features is password reset, which in the development environment was working perfectly, but after deploying to the platform (I think the platform is irrelevant as the same problem occurred on both Vercel and Netlify).
The problem is that the link to reset the password is sent to the user’s email, but when clicked, the reset page is not found, I need help, both to fix the bug and to find out the cause in future projects.
Here is the repository, feel free to suggest changes and ask for more details, thanks: (https://github.com/hermesonbastos/Dogs-React)
api.jsx
export function PASSWORD_LOST(body) {
return {
url: API_URL + "/api/password/lost",
options: {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
},
};
}
export function PASSWORD_RESET(body) {
return {
url: API_URL + "/api/password/reset",
options: {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
},
};
}
Login.jsx
import React from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import LoginForm from "./LoginForm";
import LoginCreate from "./LoginCreate";
import LoginPasswordLost from "./LoginPasswordLost";
import LoginPasswordReset from "./LoginPasswordReset";
import { UserContext } from "../../UserContext";
import styles from "./Login.module.css";
import NotFound from "../NotFound";
const Login = () => {
const { login } = React.useContext(UserContext);
if (login === true) return <Navigate to="/conta" />;
return (
<section className={styles.login}>
<div className={styles.forms}>
<Routes>
<Route path="/" element={<LoginForm />} />
<Route path="criar" element={<LoginCreate />} />
<Route path="perdeu" element={<LoginPasswordLost />} />
<Route path="resetar" element={<LoginPasswordReset />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
</section>
);
};
export default Login;
LoginPasswordReset.jsx
import React from "react";
import Input from "../Forms/Input";
import Button from "../Forms/Button";
import useForm from "../../Hooks/useForm";
import { PASSWORD_RESET } from "../../api";
import useFetch from "../../Hooks/useFetch";
import Error from "../Helper/Error";
import { useNavigate } from "react-router-dom";
import Head from "../Helper/Head";
const LoginPasswordReset = () => {
const [key, setKey] = React.useState("");
const [login, setLogin] = React.useState("");
const password = useForm();
const { error, loading, request } = useFetch();
const navigate = useNavigate();
React.useEffect(() => {
const params = new URLSearchParams(window.location.search);
const key = params.get("key");
const login = params.get("login");
if (key) setKey(key);
if (login) setLogin(login);
}, []);
async function handleSubmit(event) {
event.preventDefault();
if (password.validate()) {
const { url, options } = PASSWORD_RESET({
login,
key,
password: password.value,
});
const { response } = await request(url, options);
if (response.ok) navigate("/login");
}
}
return (
<section className="animeLeft">
<Head title="Resete a senha" />
<h1 className="title">Resete a Senha</h1>
<form onSubmit={handleSubmit}>
<Input
label="Nova Senha"
type="password"
name="password"
{...password}
/>
{loading ? (
<Button disabled>Resetando...</Button>
) : (
<Button>Resetar</Button>
)}
</form>
<Error error={error} />
</section>
);
};
export default LoginPasswordReset;
