PropelAuth home pagelight logo
Components
LoginPasswordless

The LoginPasswordless component lets your users sign in with just their email (aka “passwordless login” or “magic links”). The LoginPasswordless component works out-of-the-box and can be deeply customized.

​
Usage

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

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

export default function MagicLinkPage() {
  const appearance = {
    options: {
      displayLogo: false,
      submitButtonText: "Experience the Magic",
    },
    elements: {
      Container: { backgroundColor: "#000" },
      SubmitButton: "btn-purple",
    },
  };

  return (
    <div>
      <LoginPasswordless appearance={appearance} />
    </div>
  );
}

​
Props

appearance
LoginPasswordlessAppearance

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

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