I’m building a web application using React for the frontend and Express for the backend. I have a feature where users can reset their passwords using a unique token sent via email. However, when I try to access the reset password page with a token in the URL (e.g., /reset-password/56ee236da78383854dfb584343d56048259c6977), I’m encountering the error message “Cannot GET /reset-password/56ee236da78383854dfb584343d56048259c6977”.
app.js
<Route path="/reset-password/:token" element={<ResetPassword />} />
resetpassword.jsx
import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
const ResetPassword = () => {
const { token } = useParams();
const [newPassword, setNewPassword] = useState('');
const [message, setMessage] = useState('');
const handleOnSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post(
`http://localhost:3000/auth/reset-password/${token}`,
{ newPassword },
{ headers: { 'Content-Type': 'application/json' } }
);
setMessage(response.data.message);
} catch (error) {
console.error('Error:', error);
setMessage('Failed to reset password');
}
};
return (
<div>
<h2>Reset Password</h2>
<form onSubmit={handleOnSubmit}>
<input
type="password"
placeholder="Enter new password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
required
/>
<button type="submit">Reset Password</button>
</form>
<p>{message}</p>
</div>
);
};
export default ResetPassword;
router.js
router.get('/reset-password/:token', (req, res) => {
const { token } = req.params;
res.render('reset-password', { token });
});
router.post('/reset-password/:token', async (req, res) => {
const { token } = req.params;
const { newPassword } = req.body;
try {
// Encontre o usuário com o token de redefinição de senha
const user = await User.findOne({
resetPasswordToken: token,
resetPasswordExpires: { $gt: Date.now() } // Verifique se o token ainda não expirou
});
if (!user) {
return res.status(400).json({ message: 'Invalid or expired token' });
}
// Atualize a senha do usuário
user.password = newPassword;
user.resetPasswordToken = undefined;
user.resetPasswordExpires = undefined;
await user.save();
res.json({ message: 'Password reset successfully' });
} catch (error) {
console.error('Error:', error);
res.status(500).json({ message: 'Internal server error' });
}
});