Open a page on local environment through email link

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.

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: 'example@example.com' }
   

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: 'example@example.com', 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: 'example@example.com' }
   

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.

You need to provide a backend route and frontend route from same domain.

Use domain address instead of IP

as per your link structure

https://<domain>/user/<userId>/forgetPassword/<token>

create an endpoint from client side in <Route \> [ see react-router npm]

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

Now, you need to create component for reset password

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

function ResetPassword (props) {

  // get your userId, token using useParams
  const { userId, token } = useParams();

  // now you can use this userId, and token as per your requirement

  return (
      // your reset password code      
      <YourComponent>
  )
}

BE developer should add environment variable in his application and send to email correct link with correct domain address.

REACT_APP_URL=https://localhost:3000