Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

303
Views
Open a page on local environment through email link

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

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?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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.

over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report

0

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>
  )
}

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!