How to implement change password from a custom route that contains custom-styled input fields for the password 1 and password 2

Parse Dashboard
#1

I am I’m getting an invalid token error when doing an POST request to this URL (http://localhost:1337/v1/apps/paysail_local_app_id/request_password_reset) directly in the front end.

I’m trying to achieve this using axios and I’m passing username, token, utf-8, password 1, password 2, etc. as payload.

I’m replicating how the Parse platform default change password page is doing it via a form with action and input fields (token, username, utf-8 are hidden - password and password2 are visible fields). I’m basing it on what is see after inspecting the code via Chrome developer tools.

I’ve been stuck for quite some time. Would really appreciate anyone who could shed a light on this. Thanks so much!

#2

Could you share the code that you are using to send the request and the error that you are getting back? For reference, this is Parse Server default page: https://github.com/parse-community/parse-server/blob/alpha/views/choose_password

#3

Hi Davi! Yup for sure.

const params = {
    new_password: passwordFromForm,
    confirm_new_password: password2FromForm,
    username,
    token,
    "utf-8": "✓",
};
const response = await axios({
    url: "http://localhost:1337/v1/apps/xxxxx_local_app_id/request_password_reset",
    method: "POST",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    data: JSON.stringify(params),
})
console.log("AXIOS RESPONSE :: ", response);

For this code, we are getting the values of the passwords from form inputs handled by Formik. The username and token came from query params of the URL. This is the structure of the URL link we are using.

http://baseURLstring/route?token=xXyYzZ&username=name%40domain.com

When logging the axios response, these are some of the fields I am getting:

  1. data field
"<!DOCTYPE html>
<!-- This page is displayed when someone navigates to a verify email or reset password link
     but their security token is wrong. This can either mean the user has clicked on a
     stale link (i.e. re-click on a password reset link after resetting their password) or
     (rarely) this could be a sign of a malicious user trying to tamper with your app.
 -->
<html>
  <head>
  <title>Invalid Link</title>
  <style type='text/css'>
    .container {
      border-width: 0px;
      display: block;
      font: inherit;
      font-family: 'Helvetica Neue', Helvetica;
      font-size: 16px;
      height: 30px;
      line-height: 16px;
      margin: 45px 0px 0px 45px;
      padding: 0px 8px 0px 8px;
      position: relative;
      vertical-align: baseline;
    }

    h1, h2, h3, h4, h5 {
      color: #0067AB;
      display: block;
      font: inherit;
      font-family: 'Open Sans', 'Helvetica Neue', Helvetica;
      font-size: 30px;
      font-weight: 600;
      height: 30px;
      line-height: 30px;
      margin: 0 0 15px 0;
      padding: 0 0 0 0;
    }
  </style>
  </head>

  <body> 
    <div class="container">
      <h1>Invalid Link</h1>
    </div> 
  </body>
</html>
"
  1. status field
200
  1. statusText
OK
#4

I believe that the problem happens because you are sending a JSON while the Parse Server route is expecting a form submit. So I’d try with something like:

const response = await axios({
    url: "http://localhost:1337/v1/apps/xxxxx_local_app_id/request_password_reset",
    method: "POST",
    headers: {
        'Content-Type': 'multipart/form-data',
    },
    data: params,
})

Reference: https://github.com/axios/axios#-automatic-serialization-to-formdata

#5

Tried this one but it still gives the same error. Explored the rest of the documentation and tried this instead and it works well: https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

Thanks so much for nudging me to the right direction, Davi! Really appreciate it :smiley:

#6

No problem. I’m glad you figured it out.