Open a page on local environment through email link

Question

I am stuck on this problem. The backend APIs are written in Node.js and I am handling these APIs in the frontend which is in React.js. The backend and frontend code has separate repository structure. So all login, signup and forget password functionality will be done through client-side requests.

The APIs endpoints are deployed on the server which has the following URL structure.

POST - https://133.44.163.89:5000/user/forgetPassword
GET -  https://133.44.163.89:5000/user/56546dsfsd

Now I am consuming these endpoints in my frontend local environment which has the following URL.

http://localhost:3000

I am facing a problem with the forgotten password endpoint basically it is a post request and takes user email in the body.

POST - https://133.44.163.89:5000/user/forgetPassword
body: { email: '[email protected]' }

On the successful response, it will send an email with a link. The link has the following structure.

https://133.44.163.89:5000/user/56546dsfsd/forgetPassword/ddeef95c508
                                user-id                    token

What the backend developer wants from me is that when you click this URL a page should open on the frontend with a password reset form. But the link HOST is different how can I map this link HOST (https://133.44.163.89:5000) into the frontend HOST (http://localhost:3000) to open the page.

What should be the solution to this problem?

Answer 1

for developer purposes the backend developer should send you the link with localhost, when your app is on production mode BE Dev should send link with the prod domain.

You should have two endpoints:

1. first endpoint to send email with the user token.
2. second to receive new password and token to verify user account. I think userId is not needed you can get userId if you are doing a link bewteen token and user.

In react you need to create a route to reset password if you are using react-router-dom your code looks like this

<Switch>
  <Route path="/login" component={<Login />} exact />
  <Route path="/user/:userId/forgetPassword/:token" component={<ResetPassword />} exact />
  <Redirect to="/login" from="*" />
</Switch>

In your ResetPassword component if you are using hooks you can use

import { useParams } from 'react-router-dom';

const {userId, token} = useParams();

This depends on the react-router you are using.

Answer 2

I don't really get the structure of your password reset process. Typically this works as follows

1. send a request for password reset. Ie what you do with

   POST - https://133.44.163.89:5000/user/forgetPassword
   body: { email: '[email protected]' }
   

2. the server sends an email with a link to the Password reset form. In your case this would probably be something like the following

   http://localhost:3000/passwordResetForm?userid=abc&token=xyz
   

   Ie when you click on that link, the password reset form opens in your browser and you can enter your new password

3. On submit of the password reset form, you send a request like the following to the server

   POST - https://133.44.163.89:5000/user/abc/forgetPassword/xyz
   body: { newpassword: 'foobar'}
   

To obtain the correct URL for the email, you could for instance add an additional returnUrl parameter to the first request

POST - https://133.44.163.89:5000/user/forgetPassword
body: { email: '[email protected]', returnUrl: 'http://localhost:3000' }

If the request for a new passwort can only be sent from the frontend, you can also utilize the Origin header sent with the request (automatically set by the browser)

app.post("/user/forgetPassword", (req, res) => {
   //let returnurl = req.body.returnUrl;  //use whatever fits
   //let returnurl = req.get("origin");   //your usecase more ...


   sendEmail(returnurl);  //insert the correct url in the email
   res.sendStatus(200);
}

Alternative

An alternative process would be to not use links in the email at all but just send the token via email like the following

1. The user clicks on "Forgot password" in the frontend, enters his email and the frontend submits the request to the server

   POST - https://133.44.163.89:5000/user/forgetPassword
   body: { email: '[email protected]' }
   

2. Once the request is accepted by the server, display additional inputs for the reset token and the new password

3. The server sends an email just containing the request token

4. The user enters this token and a new password in the already opened (from steps 1 and 2) password reset form. On submit of the form the requesttoken and the new password is sent to the server

   POST - https://133.44.163.89:5000/forgetPassword/xyz
   body: { newpassword: 'foobar'}  
   

   You don't even need the userid in this request, because with the reset token, you can easily determine, which user sent the request.