PropelAuth home pagelight logo
  1. Components
  2. ForgotPassword

The ForgotPassword component lets your users easily recover forgotten passwords. It works out-of-the-box and can be deeply customized.

​
Usage

The following code snippet is an example of how to use the ForgotPassword component. Here, we apply customizations with the appearance prop.

import * as React from "react";
import { ForgotPassword } from "@propelauth/react";

export default function ForgotPasswordPage() {
  function redirectToPage(page) {
    // This is dependent on your framework
    // For Next.js, you'll want router.push(page)
    // for React Router, it's navigate(page)
  }

  const appearance = {
    elements: {
      Container: { backgroundColor: "#000" },
      SubmitButton: "btn-green",
    },
  };

  return (
    <div>
      <ForgotPassword
        onRedirectToLogin={() => redirectToPage("/login")}
        appearance={appearance}
      />
    </div>
  );
}

​
Props

onRedirectToLogin
VoidFunction

Function that redirects the user to Login. This is called when a user clicks “Already have an account? Log in” on your Signup page. If you don’t specify this function, we will hide that link.

appearance
ForgotPasswordAppearance

Appearance object for the ForgotPassword component. View all options and elements for the ForgotPasswordAppearance below. You can learn more about customizing components with the appearance object here.

type ForgotPasswordAppearance = {
  options?: {
    displayLogo?: boolean;
    resetPasswordButtonText?: ReactNode;
    magicLinkButtonText?: ReactNode;
  };
  elements?: {
    Progress?: ElementAppearance<ProgressProps>;
    Container?: ElementAppearance<ContainerProps>;
    Logo?: ElementAppearance<ImageProps>;
    Header?: ElementAppearance<H3Props>;
    SuccessMessage?: ElementAppearance<ParagraphProps>;
    InstructionsText?: ElementAppearance<ParagraphProps>;
    EmailLabel?: ElementAppearance<LabelProps>;
    EmailInput?: ElementAppearance<InputProps>;
    PasswordInput?: ElementAppearance<InputProps>;
    SubmitButton?: ElementAppearance<ButtonProps>;
    MagicLinkButton?: ElementAppearance<ButtonProps>;
    RedirectToLoginLink?: ElementAppearance<ButtonProps>;
    ErrorMessage?: ElementAppearance<AlertProps>;
  };
};