> ## 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.

# useRequestForgotPasswordCodeByEmail()

## Overview

**useRequestForgotPasswordCodeByEmail** hook is used to handle the process of requesting a forgot password code via email.
It leverages the react-query library to manage the asynchronous operation and provides error handling and success callbacks.

<Note>
  **useRequestForgotPasswordCodeByEmail** is responsible only for requesting code.
  You need to implement a **useUpdateUserPasswordWithCode** that handles password updating process.
</Note>

## Example Usage

```typescript request-code-component.tsx
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

import { HttpError } from '@locai1/iam-javascript';
import { useRequestForgotPasswordCodeByEmail } from '@locai1/iam-react';

import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

const formSchema = z.object({
  email: z.string().min(1),
});

type FormSchemaType = z.infer<typeof formSchema>;

type RequestCodeFormProps = {
  onComplete: (email: string) => void;
  onSignInClick: () => void;
  email?: string;
};

export const RequestCodeComponent = ({ onComplete, email = '' }: RequestCodeFormProps) => {
  const [error, setError] = useState<HttpError | Error>();

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

  const form = useForm<FormSchemaType>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email,
    },
  });

  const { requestResetCodeByEmail } = useRequestForgotPasswordCodeByEmail({
    onError: setError,
    onSuccess: () => {
      onComplete(form.getValues().email);
    },
    resetPasswordUrl,
  });

  const handleSubmit = form.handleSubmit(async (values: FormSchemaType) => {
    setError(undefined);
    requestResetCodeByEmail(values.email);
  });

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>E-mail</FormLabel>
              <FormControl>
                <Input type="email" placeholder="example@locai.ae" required {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        {error?.message}
        <Button type="submit">Continue</Button>
      </form>
    </Form>
  );
};
```

## Parameters

<ResponseField name="onSuccess" type="() => void" required>
  callback function that is called when the request process is successful.

  <SessionType />
</ResponseField>

<ResponseField name="onError" type="HttpErrorCallback" required>
  callback function that is called when an error occurs during the request process.

  ```typescript HttpErrorCallback type
  type HttpErrorCallback = (error: HttpError | Error | undefined) => void;
  ```
</ResponseField>

<ResponseField name="resetPasswordUrl" type="string" required>
  Reset password url used to redirect user to reset password page from email.
  It should contain a placeholder for the reset password code.
</ResponseField>

## Returns

<ResponseField name="requestResetCodeByEmail" type="(email: string) => void">
  function that triggers the request process with the provided email
</ResponseField>

<ResponseField name="isLoading" type="boolean">
  boolean indicating whether the request process is currently in progress.
</ResponseField>

<ResponseField name="isError" type="boolean">
  boolean indicating whether an error occurred during the request process.
</ResponseField>

<ResponseField name="error" type="HttpError | Error | null">
  error object if an error occurred during the request process.
</ResponseField>