> ## Documentation Index
> Fetch the complete documentation index at: https://iam-docs.razi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# <ForgotPassword />

## Overview

**ForgotPassword** component is a user interface element for handling the forgot password process.
It includes steps for requesting a code by user e-mail and updating the password. It provides callbacks for handling
the completion of the process and navigation to the sign-in page.

<Warning>You can not customize this component layout structure, design or content.</Warning>

<Frame caption="<ForgotPassword /> component request code step">
  <img width="400" noZoom src="https://mintlify.s3-us-west-1.amazonaws.com/locai-a2c1f1e4/libraries/react/components/images/forgot-password/request-code.webp" alt="<ForgotPassword /> component request code step" />
</Frame>

<br />

<Frame caption="<ForgotPassword /> component verify and password update step">
  <img width="400" noZoom src="https://mintlify.s3-us-west-1.amazonaws.com/locai-a2c1f1e4/libraries/react/components/images/forgot-password/update-password.webp" alt="<ForgotPassword /> component verify and password update step" />
</Frame>

## Props

<ResponseField name="onComplete" type="callback" required>
  A callback function that is called when the forgot password process is successfully completed.
</ResponseField>

<ResponseField name="resetPasswordUrl" type="string">
  A string representing the URL to reset the password.
</ResponseField>

<ResponseField name="onSignUpClick" type="callback">
  An optional callback function that is called when the user clicks the sign-in link.
</ResponseField>

## Example Usage

<Note>
  **Reference**:

  * Demo Next.js project [source code](https://github.com/LocAI1/iam-javascript-sdk/blob/main/apps/iam-react-example)
  * ForgotPassword page demo [source code](https://github.com/LocAI1/iam-javascript-sdk/blob/main/apps/iam-react-example/src/components/forgot-password.tsx)
</Note>

```typescript forgot-password.tsx
'use client';
import { useCallback } from 'react';
import { useRouter } from 'next/navigation';

import { ForgotPassword } from '@locai1/iam-react';

import { SIGN_IN_PAGE } from '@/const';

export const ForgotPasswordComponent = () => {
  const { push } = useRouter();

  const handleForgotPasswordComplete = useCallback(() => {
    push(SIGN_IN_PAGE);
  }, []);

  const handleSignInClick = useCallback(() => {
    push(SIGN_IN_PAGE);
  }, []);

  const resetPasswordUrl = typeof window !== 'undefined' ?
    `${window.location.origin}/forgot-password?code={{code}}` :
    `/forgot-password?code={{code}}`;

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <ForgotPassword
        onComplete={handleForgotPasswordComplete}
        onSignInClick={handleSignInClick}
        resetPasswordUrl={resetPasswordUrl}
      />
    </div>
  );
};
```