Docs

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.

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))
      .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))
            .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.

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))
      .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))
          .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