Having problem with auth page formProps

[van-vince]

Am trying to use form props in my forget password auth page but I get the error email is not defined. what is wrong with my code? How can I access the value of email

        import { AuthPage, ThemedTitleV2 } from "@refinedev/mui";
        import { AppIcon } from "../../components/app-icon";
        import { useApiUrl } from "@refinedev/core";
        
        export const ForgotPassword = () => {
        
          const apiUrl = useApiUrl()
          
          return (
            <AuthPage
              type="forgotPassword"
              title={
                <ThemedTitleV2
                  collapsed={false}
                  text="Kaizen Deliveries"
                  icon={<AppIcon />}
                />
              }
              formProps={{
                onSubmit: async (e:any) => {
        
                  const email = e.target.email.value;
        
                  const res = await fetch(`${apiUrl}/users/forget-password`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ email }),
                  });
                  const data = await res.json();
                  console.log(data);
                  if (data?.success === true) {
                    return {
                      success: true,
                      message: data.message,
                      // redirectTo: "/update-password",
                    };
                  }
                } 
              }}
            />
          );
        };

[BatuhanW]

Hello @van-vince please see the related page on our documentation. You don't need to write your logic inside onSubmit. It's better to handle making request to your API in your auth provider.

https://refine.dev/docs/api-reference/mui/components/mui-auth-page/#forgotpassword

[van-vince]

@BatuhanW Thanks for the reply.. I am not able to call hooks like useParams and useNotifications in the auth provider.. it gives an error that hooks can only be called inside function components thats why I try to write the logic in the Auth page. So is there a way I can use notification and params in the auth provider

  forgotPassword: async ({ email }) => {
        const { open, close } = useNotification();
        const res = await fetch(`${apiUrl}/users/forget-password`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ email}),
        });
        const data = await res.json();
        console.log(data);
        if (data?.success === true) {
          return {
            success: true,
            message: data.message,
            // redirectTo: "/update-password",
          };
        }
        {
          data?.success === true
            ? open?.({
                type: "success",
                message: data.message,
                description: "Success",
              })
            : open?.({
                type: "error",
                message: data.message,
                description: "Error",
              });
        }
        return {
          success: false,
          error: {
            name: "Forgot Password Error",
            message: "Email address does not exist",
          },
        };
      },

[BatuhanW]

Hello @van-vince You don't need to manually send notification here. If you return error object, it will show notification automatically. Please check this section of the documentation: https://refine.dev/docs/api-reference/core/providers/auth-provider/#forgotpassword

In this page, search for How can I customize the error message?

[van-vince]

I don't only want to show error notifications, I also want to show success notification from there. when you look at the code you can see I opened success notification when data?.success === true. what I actually needed is the success notification.
I even moved the auth provider to app.js where I could successfully call the useNotification hook but it still doesnt work

[van-vince]

I wish when you return success: true, you can also open a success notification just like the way then success: false can open the error notification.

[BatuhanW]

Hello @van-vince you can use useForgotPassword hook, and inside onSuccess prop, which gets data. You can trigger notification inside there with useNotification hook, depends on the response.

https://refine.dev/docs/core/hooks/auth/use-forgot-password/#error-handling

https://refine.dev/docs/core/hooks/utilities/use-notification/