<TaskResetPassword /> component
The <TaskResetPassword /> component renders a UI for resolving the reset-password .
Usage with JavaScript
The following methods available on an instance of the Clerk class are used to render and control the <TaskResetPassword /> component:
The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.
mountTaskResetPassword()
Render the <TaskResetPassword /> component to an HTML <div> element.
function mountTaskResetPassword(node: HTMLDivElement, props?: TaskResetPasswordProps): void- Name
node- Type
HTMLDivElement- Description
The
<div>element used to render in the<TaskResetPassword />component
- Name
props?- Type
- TaskResetPasswordProps
- Description
The properties to pass to the
<TaskResetPassword />component.
import { Clerk } from '@clerk/clerk-js'
const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(pubKey)
await clerk.load()
if (clerk.isSignedIn) {
// Mount user button component
document.getElementById('signed-in').innerHTML = `
<div id="user-button"></div>
`
const userbuttonDiv = document.getElementById('user-button')
clerk.mountUserButton(userbuttonDiv)
} else if (clerk.session?.currentTask) {
switch (clerk.session.currentTask.key) {
case 'reset-password': {
document.getElementById('app').innerHTML = `
<div id="task-reset-password"></div>
`
const taskResetPasswordDiv = document.getElementById('task-reset-password')
clerk.mountTaskResetPassword(taskResetPasswordDiv)
}
}
}unmountTaskResetPassword()
Unmount and run cleanup on an existing <TaskResetPassword /> component instance.
function unmountTaskResetPassword(node: HTMLDivElement): void- Name
node- Type
HTMLDivElement- Description
The container
<div>element with a rendered<SignUp />component instance
import { Clerk } from '@clerk/clerk-js'
const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(pubKey)
await clerk.load()
if (clerk.isSignedIn) {
// Mount user button component
document.getElementById('signed-in').innerHTML = `
<div id="user-button"></div>
`
const userbuttonDiv = document.getElementById('user-button')
clerk.mountUserButton(userbuttonDiv)
} else if (clerk.session?.currentTask) {
switch (clerk.session.currentTask.key) {
case 'reset-password': {
document.getElementById('app').innerHTML = `
<div id="task-reset-password"></div>
`
const taskResetPasswordDiv = document.getElementById('task-reset-password')
clerk.mountTaskResetPassword(taskResetPasswordDiv)
// ...
clerk.unmountTaskResetPassword(taskResetPasswordDiv)
}
}
}Properties
All props are optional.
- Name
redirectUrlComplete- Type
string- Description
The full URL or path to navigate to after successfully completing all tasks.
- Name
appearance- Type
Appearance | undefined- Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
Customization
To learn about how to customize Clerk components, see the customization documentation.
If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the custom flow guides.
Feedback
Last updated on