<TaskResetPassword /> component
The <TaskResetPassword /> component renders a UI for resolving the reset-password .
Example
The following example demonstrates how to host the <TaskResetPassword /> component on a custom page.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { ClerkProvider } from '@clerk/clerk-react'
// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
if (!PUBLISHABLE_KEY) {
throw new Error('Add your Clerk Publishable Key to the .env file')
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<ClerkProvider
publishableKey={PUBLISHABLE_KEY}
taskUrls={{ 'reset-password': '/onboarding/reset-password' }}
>
<App />
</ClerkProvider>
</React.StrictMode>,
)import { TaskResetPassword } from '@clerk/clerk-react'
const ResetPasswordPage = () => <TaskResetPassword redirectUrlComplete="/dashboard" />
export default ResetPasswordPageProperties
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