User password management

These methods on the User object help you manage a user's password.

The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.

`updatePassword()`

Updates the user's password. Passwords must be at least 8 characters long.


function updatePassword: (params: UpdateUserPasswordParams) => Promise<User>;

`UpdateUserPasswordParams`

Name	Type	Description
`newPassword`	`string`	The user's new password.
`currentPassword`	`string`	The user's current password.
`signOutOfOtherSessions?`	`boolean \| undefined`	If set to `true`, all sessions will be signed out.

`updatePassword()` example

For the following example, your HTML file should look like this:

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
 
    <h1>Update password</h1>
    <input
      type="password"
      id="current-password"
      placeholder="Current password"
    />
    <input
      type="password"
      id="new-password"
      placeholder="New password"
    />
    <p id="error"></p>
    <button id="update-password-button">Update password</button>
 
    <script type="module" src="/main.js"></script>
  </body>
</html>

And your JavaScript file should look like this:

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
if (clerk.user) {
  document.getElementById("update-password-button")
    .addEventListener("click", async function () {
      const currentPassword = document.getElementById("current-password").value;
 
      const newPassword = document.getElementById("new-password").value;
      clerk.user.updatePassword({ currentPassword, newPassword })
      .then((response) => console.log(response))
      .catch((error) => {
        document.getElementById("error").innerHTML =
          error.errors[0].longMessage;
        console.log("An error occurred:", error.errors);
      });
    });
} else {
  document.getElementById("app").innerHTML = `
    <div id="sign-in"></div>
  `;
 
  const signInDiv = document.getElementById("sign-in");
 
  clerk.mountSignIn(signInDiv);
}

index.html
  <div id="app"></div>
 
  <h1>Update password</h1>
  <input
    type="password"
    id="current-password"
    placeholder="Current password"
  />
  <input
    type="password"
    id="new-password"
    placeholder="New password"
  />
  <p id="error"></p>
  <button id="update-password-button">Update password</button>
 
  <!-- Initialize Clerk with your
  Clerk Publishable key and Frontend API URL -->
  <script
    async
    crossorigin="anonymous"
    data-clerk-publishable-key="{{pub_key}}"
    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
    type="text/javascript"
  ></script>
 
  <script>
    window.addEventListener("load", async function () {
      await Clerk.load();
 
      if (Clerk.user) {
        document.getElementById("update-password-button")
          .addEventListener("click", async function () {
            const currentPassword =
              document.getElementById("current-password").value;
            const newPassword = document.getElementById("new-password").value;
 
            Clerk.user.updatePassword({ currentPassword, newPassword})
            .then((response) => console.log(response))
            .catch((error) => {
              document.getElementById("error").innerHTML =
                error.errors[0].longMessage;
              console.log("An error occurred:", error.errors);
            });
          });
      } else {
        document.getElementById("app").innerHTML = `
            <div id="sign-in"></div>
          `;
 
        const signInDiv = document.getElementById("sign-in");
 
        Clerk.mountSignIn(signInDiv);
      }
    });
  </script>

`removePassword()`

Removes the user's password.


function removePassword: (params: RemoveUserPasswordParams) => Promise<User>;

`RemoveUserPasswordParams`

Name	Type	Description
`currentPassword`	`string`	The user's current password.

`removePassword()` example

For the following example, your HTML file should look like this:

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
if (clerk.user) {
  document.getElementById("remove-password-button")
    .addEventListener("click", async () => {
      const currentPassword = document.getElementById("current-password").value;
 
      clerk.user.removePassword({ currentPassword })
        .then((response) => console.log(response))
        .catch((error) => {
          document.getElementById("error").innerHTML =
            error.errors[0].longMessage;
          console.log("An error occurred:", error.errors);
        });
    });
} else {
  document.getElementById("app").innerHTML = `
    <div id="sign-in"></div>
  `;
 
  const signInDiv = document.getElementById("sign-in");
 
  clerk.mountSignIn(signInDiv);
}

And your HTML file should look like this:

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
 
    <input
      type="password"
      id="current-password"
      placeholder="Current password"
    />
    <p id="error"></p>
    <button id="remove-password-button">Remove Password</button>
 
    <script type="module" src="/main.js"></script>
  </body>
</html>

index.html
  <div id="app"></div>
 
  <input
    type="password"
    id="current-password"
    placeholder="Current password"
  />
  <p id="error"></p>
  <button id="remove-password-button">Remove Password</button>
 
  <!-- Initialize Clerk with your
  Clerk Publishable key and Frontend API URL -->
  <script
    async
    crossorigin="anonymous"
    data-clerk-publishable-key="{{pub_key}}"
    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
    type="text/javascript"
  ></script>
 
  <script>
    window.addEventListener("load", async function () {
      await Clerk.load();
 
      if (Clerk.user) {
        document.getElementById("remove-password-button")
          .addEventListener("click", async () => {
            const currentPassword =
              document.getElementById("current-password").value;
 
            Clerk.user.removePassword({ currentPassword })
              .then((response) => console.log(response))
              .catch((error) => {
                document.getElementById("error").innerHTML =
                  error.errors[0].longMessage;
                console.log("An error occurred:", error.errors);
              });
          });
      } else {
        document.getElementById("app").innerHTML = `
            <div id="sign-in"></div>
          `;
 
        const signInDiv = document.getElementById("sign-in");
 
        Clerk.mountSignIn(signInDiv);
      }
    });
  </script>

Last updated on March 26, 2024

updatePassword()

UpdateUserPasswordParams

updatePassword() example

removePassword()

RemoveUserPasswordParams