The link is successfully sent to the user's email address, however upon clicking the link, I get a "This site can't be reached. localhost refused to connect. ERR_CONNECTION_REFUSED" My objective: When a user clicks on the link via email, that link directs the user to go change his/her password
BACKEND CODE (Routes)
import express from "express";
import mongoose from 'mongoose'
const app = express();
app.use(express.json());
import cors from "cors";
app.use(cors());
import dotenv from 'dotenv'
dotenv.config();
import bcrypt from "bcryptjs";
app.use(express.urlencoded({ extended: false }));
const router = express.Router();
import jwt from "jsonwebtoken";
import nodemailer from "nodemailer";
const JWT_SECRET = process.env.JWT
const User = mongoose.model("User");
//getting the data/email from the database
router.post("/userData", async (req, res) => {
const { token } = req.body;
try {
const user = jwt.verify(token, JWT_SECRET);
const email = user.email;
User.findOne({ email: email })
.then((data) => {
res.send({ status: "ok", data: data });
})
.catch((error) => {
res.send({ status: "error", data: error });
});
} catch (error) {}
});
router.post("/", async (req, res) => {
const { email } = req.body;
try {
const oldUser = await User.findOne({ email });
if (!oldUser) {
return res.json({ status: "Email does not exist!" });
}
const secret = JWT_SECRET + oldUser.password;
const token = jwt.sign({ email: oldUser.email, id: oldUser._id }, secret, {
expiresIn: "15m",
});
const link = `http://localhost:3000/reset-password/${oldUser._id}/${token}`;
var transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: 'gmail@gmail.com',
pass: '1234567890123456',
},
});
var mailOptions = {
from: 'gmail@gmail.com',
to: email,
subject: "Password Reset",
text: link,
};
transporter.sendMail(mailOptions, function (error, info) {
if (error) {
console.log(error);
} else {
console.log("Email sent: " + info.response);
}
});
console.log(link);
} catch (error) {}
});
export default router;
//id and token are params, structure of the link
router.get("/", async (req, res) => {
const { id, token } = req.params;
console.log(req.params);
const oldUser = await User.findOne({ _id: id });
if (!oldUser) {
return res.json({ status: "User Not Exists!!" });
}
const secret = JWT_SECRET + oldUser.password;
try {
const verify = jwt.verify(token, secret);
res.render("index", { email: verify.email, status: "Not Verified" });
} catch (error) {
console.log(error);
res.send("Not Verified");
}
});
router.post("/", async (req, res) => {
const { id, token } = req.params;
const { password } = req.body;
const oldUser = await User.findOne({ _id: id });
if (!oldUser) {
return res.json({ status: "User does not exist" });
}
const secret = JWT_SECRET + oldUser.password;
try {
const verify = jwt.verify(token, secret);
const encryptedPassword = await bcrypt.hash(password, 10);
await User.updateOne(
{
_id: id,
},
{
$set: {
password: encryptedPassword,
},
}
);
res.render("index", { email: verify.email, status: "verified" });
} catch (error) {
console.log(error);
res.json({ status: "Something Went Wrong" });
}
});
Backend Index.js
import express from 'express';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import cors from 'cors';
import dotenv from "dotenv"
dotenv.config();
import forgotPasswordRouter from "./routes/passwordReset.js"
import resetPasswordRouter from "./routes/passwordReset.js"
const app = express();
app.use(express.json({ limit: '30mb', extended: true }))
app.use(express.urlencoded({ limit: '30mb', extended: true }))
app.use(cors());
app.use("/forgot-password", forgotPasswordRouter);
app.use("/reset-password/:id/:token", resetPasswordRouter )
const CONNECTION_URL = encodeURI(process.env.DATABASE_ACCESS);
const PORT = process.env.PORT|| 5000;
mongoose.connect(CONNECTION_URL, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => app.listen(PORT, () => console.log(`Server is active on port: http://localhost:${PORT}`)))
.catch((error) => console.log(`${error} did not connect`));
mongoose.set('useFindAndModify', false);
FRONT_END CODE PasswordReset.jsx
import axios from "axios";
import React, {useState, useEffect, Fragment} from "react";
import { useParams } from "react-router-dom";
const PasswordReset = () => {
const [validUrl, setValidUrl] = useState(false);
const [password, setPassword] = useState("");
const [msg, setMsg] = useState("");
const param = useParams();
const link = `http://localhost:3000/reset-password/${param.id}/${param.token}`
useEffect(() => {
const verifyUrl = async() => {
try {
await axios.get(link);
setValidUrl(true)
} catch (error) {
setValidUrl(false)
}
};
verifyUrl()
}, [param, link]);
const handleSubmit = async(e) => {
e.preventDefault();
try {
const { data } = await axios.post(link, { password });
setMsg(data.message)
window.location = "/auth"
} catch (error) {
console.log(error)
}
};
return (
<Fragment>
{validUrl ? (
<div>
<form onSubmit={handleSubmit} >
<h1>Create new password</h1>
<input
type="password"
placeholder="Enter password"
name="name"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</form>
</div>
) : (
<h1>404 Not Found</h1>
)}
</Fragment>
)
};
export default PasswordReset;
App.js
import React from 'react';
import { Container } from '@material-ui/core';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import ForgotPassword from './components/ForgotPassword/ForgotPassword';
import PasswordReset from './components/PasswordRest/PasswordReset';
const App = () => {
const user = JSON.parse(localStorage.getItem('profile'));
return (
<BrowserRouter>
<Container maxWidth="xl">
<Route path="/forgot-password" exact component={ForgotPassword} />
<Route path="/reset-password/:id/:token" exact component={ PasswordReset } />
</Switch>
</Container>
</BrowserRouter>
);
};
export default App;
What/where can I change my code so that my objective becomes a success? I get no errors when I inspect the console, except for a "crbug/1173575, non-JS modules files deprecated"