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>;- 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.
For the following example, your HTML file should look like this:
<!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:
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);
}removePassword()
Removes the user's password.
function removePassword: (params: RemoveUserPasswordParams) => Promise<User>;- Name
currentPassword- Type
string- Description
The user's current password.
For the following example, your HTML file should look like this:
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:
<!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>Feedback
Last updated on