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.


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 (
      <LoginPasswordless appearance={appearance} />



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>;