`<TaskResetPassword />` component

When to use <TaskResetPassword />
Example
Properties
Customization

Available in other SDKs

The <TaskResetPassword /> component renders a UI for resolving the reset-password session task. You can further customize your <TaskResetPassword /> component by passing additional properties at the time of rendering.

Important

The <TaskResetPassword/> component cannot render when a user doesn't have current session tasks.

When to use `<TaskResetPassword />`

Clerk's sign-in flows, such as the Sign-in Account Portal page, <SignInButton />, and <SignIn /> component, automatically handle the reset-password session task flow for you, including rendering the <TaskResetPassword /> component when needed.

If you want to customize the route where the <TaskResetPassword /> component is rendered or customize its appearance, you can host it yourself within your application.

Example

The following example demonstrates how to host the <TaskResetPassword /> component on a custom page. You first need to set the taskUrls option on your Clerk integration so that users are redirected to the page where you host the <TaskResetPassword /> component when they have a pending reset-password session task.

Note

To see the full __root.tsx setup you need for Clerk with TanStack React Start, see the TanStack React Start quickstart.

src/routes/__root.tsx

import * as React from 'react'
import { HeadContent, Scripts } from '@tanstack/react-router'
import { ClerkProvider } from '@clerk/tanstack-react-start'

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        <ClerkProvider taskUrls={{ 'reset-password': '/onboarding/reset-password' }}>
          {children}
        </ClerkProvider>
        <Scripts />
      </body>
    </html>
  )
}

src/routes/onboarding/reset-password.tsx

import { TaskResetPassword } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/onboarding/reset-password')({
  component: ResetPasswordPage,
})

function ResetPasswordPage() {
  return <TaskResetPassword redirectUrlComplete="/dashboard" />
}

Properties

Name
redirectUrlComplete
Type
string
Description
The full URL or path to navigate to after successfully completing the task.
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.

Last updated on Jan 23, 2026

Edit on GitHub

<TaskResetPassword /> component

When to use <TaskResetPassword />

Example

Properties

Customization

Feedback

`<TaskResetPassword />` component

When to use `<TaskResetPassword />`