setPassword with POST from JS app frontend template instead of craft link

[steveDL]

Description

I have a VueJS frontend and using craft cms and graphql, I would like to set the user's password with a frontend form my JS app using axios, something like this...

try {
        const response = await axios.post(
          `${this.apiUrl}actions/users/setPassword`,
          {
            code: this.code,
            id: this.id,
          }
        );
        console.log(response);
        // data = response.data;
      } catch (e) {
        return;
      }

Is it possible to do this? @brandonkelly What would the action expect in terms of data?

[steveDL]

Hey @brandonkelly how can I allow a user set a password via a form using an axios POST request in a vue.js app?

[brandonkelly]

Yes this is possible. You’d do it with the users/save-user action. (users/set-password is for handling links sent via reset-password emails.)

try {
    // Get the current CSRF token (if you don't already have it)
    const csrfToken = (await axios.get(`${this.apiUrl}actions/users/session-info`)).data.csrfTokenValue;

    const response = await axios.post(`${this.apiUrl}actions/users/save`, {
        userId: 100,
        currentPassword: 'current-password',
        newPassword: 'new-password',
    }, {
        headers: {
            'x-csrf-token': csrfToken,
        },
    });

    const {success, id, csrfTokenValue} = response.data;
} catch (e) {
    return;
}

For it to work, the user must have an active session. If they don’t already have one, you can create one via the users/login action.

[steveDL]

Thanks @brandonkelly but this is the first instance where a user has been created in the CP without registering via a frontend form. The CP then sends a link to the user's email for them to create a password so they do not already have an active session.

My client is using this for a members area and does not want open/public registration via a frontend form.

[steveDL]

My issue is that the user doesn't have a current password @brandonkelly ☹️

[steveDL]

Managed to get here in postman...

[steveDL]

Hey @brandonkelly sorry to be a pest but my client is waiting for this to be resolved they have a demo planned tomorrow. Is there a way to do this using the setPassword action?

[brandonkelly]

@steveDL Sorry for the misunderstanding. Posted a new answer for your actual use case. Looks like you were close – just a couple minor adjustments needed:

• users/setPassword → users/set-password (actions always use kebab-case, not camelCase)
• password → newPassword

[brandonkelly]

For handling set-password requests coming from verification emails, first you’ll need to change your setPasswordPath config setting to the absolute URL of whatever page you want to show the password form on.

Then in JS on the page, fetch the id andcode query string params. (id will be the user’s UID, not their numerical ID.)

Display a password form, and on submit, send a POST request to Craft’s users/set-password action:

try {
    const response = await axios.post(`${this.apiUrl}actions/users/set-password`, {
        code: code,
        id: id,
        newPassword: 'new-password',
    });

    if (typeof response.data.error !== 'undefined') {
        throw response.data.error;
    }
} catch (e) {
    return;
}

If successful, response.data will be an object with success and status keys (status will be the user’s status). And if autoLoginAfterAccountActivation is enabled, then it will include a csrfTokenValue key as well, set to the user session’s new CSRF token value.

[steveDL]

Thanks very much @brandonkelly will give it a try now.