# Build a custom flow for updating a user's password

> This guide is for users who want to build a custom flow. To use a _prebuilt_ UI, use the [Account Portal pages](https://clerk.com/docs/guides/account-portal/overview.md) or [prebuilt components](https://clerk.com/docs/reference/components/overview.md).

This guide demonstrates how to build a custom user interface that allows users to update their password once they're already signed in.

> To allow users to reset their password **before they've signed in**, see the [custom forgot password flow](https://clerk.com/docs/guides/development/custom-flows/authentication/forgot-password.md).

filename: app/account/update-password/page.tsx
```tsx
'use client'

import { useReverification, useUser } from '@clerk/nextjs'
import { useState } from 'react'

export default function UpdatePasswordPage() {
  const { isLoaded, isSignedIn, user } = useUser()
  const [completed, setCompleted] = useState(false)
  const [error, setError] = useState<Error | null>(null)
  // Sensitive actions require reverification
  // See https://clerk.com/docs/guides/secure/reverification
  const updatePassword = useReverification(
    ({ currentPassword, newPassword }: { currentPassword: string; newPassword: string }) =>
      user?.updatePassword({
        currentPassword,
        newPassword,
        signOutOfOtherSessions: true,
      }),
  )

  // Handle loading state
  if (!isLoaded) return <p>Loading...</p>

  // Handle signed-out state
  if (!isSignedIn) return <p>You must be signed in to access this page</p>

  const handleSubmit = async (formData: FormData) => {
    setError(null)
    const currentPassword = formData.get('currentPassword') as string
    const newPassword = formData.get('newPassword') as string

    try {
      await updatePassword({
        currentPassword,
        newPassword,
      })
      setCompleted(true)
    } catch (error) {
      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
      // for more info on error handling
      console.error(error)
      setError(error as Error)
    }
  }

  if (completed) {
    return <h1>Password updated!</h1>
  }

  return (
    <>
      <h1>Update password</h1>
      <form action={handleSubmit}>
        <input type="password" name="currentPassword" placeholder="Current password" />
        <input type="password" name="newPassword" placeholder="New password" />
        <button type="submit">Update</button>
      </form>
      {error && <p>{error.message}</p>}
    </>
  )
}
```

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)