Docs

You are viewing an archived version of the docs.Go to latest version

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
    newPassword
    Type
    string
    Description

    The user's new password.

  • Name
    currentPassword
    Type
    string
    Description

    The user's current password.

  • Name
    signOutOfOtherSessions?
    Type
    boolean | undefined
    Description

    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('YOUR_PUBLISHABLE_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);
        console.log("Password updated successfully");
      })
      .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="YOUR_PUBLISHABLE_KEY"
    src="https://YOUR_FRONTEND_API_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);
              console.log("Password updated successfully");
            })
            .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
    currentPassword
    Type
    string
    Description

    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('YOUR_PUBLISHABLE_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);
          console.log("Password removed successfully");
        })
        .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="YOUR_PUBLISHABLE_KEY"
    src="https://YOUR_FRONTEND_API_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);
                console.log("Password removed successfully");
              })
              .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>

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on