Skip to main content

​
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.
You can not customize this component layout structure, design or content.
<ForgotPassword /> component request code step

<ForgotPassword /> component request code step


<ForgotPassword /> component verify and password update step

<ForgotPassword /> component verify and password update step

​
Props

​
onComplete
callback
required
A callback function that is called when the forgot password process is successfully completed.
​
resetPasswordUrl
string
required
Reset password url used to redirect user to reset password page from e-mail. It should contain a placeholder for the reset password code.
​
onSignUpClick
callback
An optional callback function that is called when the user clicks the sign-in link.
​
code
string
Verification code that is sent to the users e-mail this parameter could be used to auto-fill OTP inputs by getting them from query string.

​
Example Usage

Reference:
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>
  );
};