I am trying to learn nodejs and react with mongodb. I have setup what I know is (sketchy) but a so far working login, signup, and password reset system. Currently with the password reset system one the user recieves the email and tries to update there password. I get a 404 not found. I have tried multiple different combinations of ways I can think of, looked at other stack over flow questions, visted a youtube tutorial and asked chatgpt who had a stroke.
reset password function from auth controller
try {
const token2 = crypto.createHash('sha256').update(req.params.token2).digest('hex');
const user = await User.findOne({passwordResetToken: token2, passwordResetTokenExpires: { $gt: Date.now() } });
if(!user) {
return next(errorHandler(401, 'Token wrong or invalid!'));
}
const newPassword = req.body.password;
const hashedPassword = await bcryptjs.hash(newPassword, 10);
user.password = hashedPassword;
user.passwordResetToken = undefined;
user.passwordResetTokenExpires = undefined;
user.save();
const logintokeen = signToken(User._id);
res.status(200).json({
status: 'success',
token: logintokeen
})
} catch (error) {
next(error);
}
}``
``router.post('/signup', signup);
router.post('/signin', signin);
router.post('/google', google);
router.get('/signout', signout);
router.post('/forgotPassword', forgotPassword);
router.patch('/resetPassword/:token2', resetPassword);
router.post('/newpassword/:token2', resetPassword);
export default router;``
Newpassword page
``export default function Newpassword() {
const [formData, setFormData] = useState({});
const [password, setPassword] = useState('');
const navigate = useNavigate();
const { token2 } = useParams();
const handleSubmit = async (e) => {
e.preventDefault();
try {
const hashedPassword = bcryptjs.hashSync(password, 10);
const res = await fetch(`/resetPassword/:token2`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ hashedPassword }),
});
if (!res.ok) {
throw new Error(`Error: ${res.status}`);
}
const data = await res.json();
if (data.success === false) {
console.log('failed');
return;
}
navigate('/');
} catch (error) {
console.log(error);
}
};
const handleChange = (e) => {
setPassword(e.target.value);
};
return (
<div>
<h2>Enter Your new Password</h2>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="password">New password</label>
<input
type="password"
id="password"
placeholder="Enter your new password"
className='bg-slate-100 p-3 rounded-lg'
onChange={handleChange}
/>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
};``
App js
``
export default function App() {
return (
<BrowserRouter>
{/* header */}
<Header />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/sign-in' element={<SignIn />} />
<Route path='/sign-up' element={<SignUp />} />
<Route element={<PrivateRoute />}>
<Route path='/profile' element={<Profile />} />
<Route path='/forgotpassword2' element={<Forgotpassword2 />} />
<Route path='/newpassword/:token2' element={<Newpassword />} />
<Route path='/resetpassword/:token2' element={<Newpassword />} />
</Route>
</Routes>
</BrowserRouter>
);``