Reset Password

To reset the password for an existing user account, the accounts.reset_password() method can be called from your component:

/ui/pages/reset_password/index.js

import joystick, { accounts } from '@joystick.js/ui';

const ResetPassword = joystick.component({
  events: {
    'submit form': (event = {}, instance = {}) => {
      accounts.reset_password({
        password: event.target.password.value,
        token: instance?.url?.params?.token,
      }).then(() => {
        location.pathname = '/dashboard';
      });
    },
  },
  render: () => {
    return `
      <div class="reset-password">
        <form>
          <label>New Password</label>
          <input type="password" name="password" placeholder="New Password" />
          <button type="submit">Reset Password</button>
        </form>
      </div>
    `;
  },
});

export default ResetPassword;

Above, we listen for a submit event on our <form></form> element, calling to accounts.reset_password() to reset the password for an existing user. Of note, along with the new password field, we also include a token field which is embedded in the auto-generated URL sent to the user during password recovery.

To access it, we utilize the instance.url object, retrieving its params.token value where we expect the recover token to be stored. Because we expect accounts.recover_password() to return a Promise, we use a .then() callback if the request is successful, redirecting to a hypothetical route that requires a logged in user (following a successful reset, the user will be automatically logged in).

API Reference

accounts.reset_password()

Function API

Function API

accounts.reset_password(options: object) => Promise;

Arguments

  • options object

    An object defining the parameters for the user account to reset.

    • password string Required

      A string defining the new password for the existing user account.

    • token string Required

      A string defining the password reset token for the existing user account.

On This Page