LoginManager - PropelAuth

The LoginManager component manages all of the components related to the login process — including login, email confirmation, two-factor verification, and any additional information that we need to collect during signup (like user metadata, requiring password updates, and creating organizations). You can deeply customize the appearance and behavior of the LoginManager component with props.

Usage

The following code snippet is a minimal example of how to use the LoginManager component. Here, we pass in functions that will be invoked when the login process is complete (onLoginCompleted), or when a user clicks “Sign Up” (onRedirectToSignup) or “Forgot Password” (onRedirectToSignup).

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

export default function LoginPage() {
  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)
  }

  return (
    <div>
      <LoginManager
        onLoginCompleted={() => redirectToPage("/dashboard")}
        onRedirectToSignup={() => redirectToPage("/signup")}
        onRedirectToForgotPassword={() => redirectToPage("/forgot-password")}
      />
    </div>
  );
}

Now let’s style the inner components of the LoginManager — we can do this by passing in an appearance object for each inner component as a prop. The appearance object lets you apply styles and classes to elements in a component, or even completely override those elements.

import * as React from "react";
import { LoginManager } from "@propelauth/react";
import { CustomCodeInput } from "./custom-components";

export default function LoginPage() {
  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 loginAppearance = {
    options: {
      divider: false,
    },
    elements: {
      Container: { backgroundColor: "#eee" },
      SubmitButton: "btn-blue",
    },
  };

  const verifyMfaAppearance = {
    options: {
      submitButtonText: "Verify",
    },
    elements: {
      Container: { backgroundColor: "#eee" },
      CodeInput: CustomCodeInput,
      SubmitButton: "btn-yellow",
    },
  };

  const completeAccountAppearance = {
    elements: {
      UsernameLabel: "custom-label",
      UsernameInput: "custom-input",
      SubmitButton: "btn-green",
    },
  };

  return (
    <div>
      <LoginManager
        onLoginCompleted={() => redirectToPage("/dashboard")}
        onRedirectToSignup={() => redirectToPage("/signup")}
        onRedirectToForgotPassword={() => redirectToPage("/forgot-password")}
        loginAppearance={loginAppearance}
        verifyMfaAppearance={verifyMfaAppearance}
        completeAccountAppearance={completeAccountAppearance}
      />
    </div>
  );
}

How to customize the LoginManager

The LoginManager consists of a few different components, depending on the user’s state. To make it easy to test, you can pass in overrideCurrentScreenForTesting to view any of the underlying components.

If you want to make changes to all the appearances at once, you can pass those changes in directly to your BetaComponentLibraryProvider. Otherwise, you can make changes on the appearance props of the LoginManager.

Props

onLoginCompletedRequired

VoidFunction

Function that gets invoked when the user completes the login process. Commonly used to redirect to your product after the user has logged in.

onRedirectToSignup

VoidFunction

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

onRedirectToForgotPassword

VoidFunction

Function that redirects the user to Forgot Password. This is called when a user clicks “Forgot password?” on your Login page. If you don’t specify this function, we will hide that link.

onRedirectToPasswordlessLogin

VoidFunction

Function that redirects the user to Passwordless Login. This is called when a user clicks “Sign in with Magic Link” on your Login page. If you have passwordless login enabled (which is the default), you must specify this. Otherwise, users that click the button won’t be redirected anywhere.

loginAppearance

LoginAppearance

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

type LoginAppearance = {
  options?: {
    displayLogo?: boolean;
    divider?: ReactNode | boolean;
    submitButtonText?: ReactNode;
  };
  elements?: {
    Progress?: ElementAppearance<ProgressProps>;
    Container?: ElementAppearance<ContainerProps>;
    Logo?: ElementAppearance<ImageProps>;
    Header?: ElementAppearance<H3Props>;
    Divider?: ElementAppearance<DividerProps>;
    EmailLabel?: ElementAppearance<LabelProps>;
    EmailInput?: ElementAppearance<InputProps>;
    PasswordLabel?: ElementAppearance<LabelProps>;
    PasswordInput?: ElementAppearance<InputProps>;
    SocialButton?: ElementAppearance<ButtonProps>;
    SubmitButton?: ElementAppearance<ButtonProps>;
    RedirectToSignupLink?: ElementAppearance<ButtonProps>;
    RedirectToForgotPasswordLink?: ElementAppearance<ButtonProps>;
    RedirectToPasswordlessLoginButton?: ElementAppearance<ButtonProps>;
    RedirectToSSOLoginButton?: ElementAppearance<ButtonProps>;
    ErrorMessage?: ElementAppearance<AlertProps>;
  };
};

confirmEmailAppearance

ConfirmEmailAppearance

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

type ConfirmEmailAppearance = {
  options?: {
    displayLogo?: boolean;
    resendConfirmationButtonText?: ReactNode;
  };
  elements?: {
    Container?: ElementAppearance<ContainerProps>;
    Logo?: ElementAppearance<ImageProps>;
    Header?: ElementAppearance<H3Props>;
    ConfirmationText?: ElementAppearance<ParagraphProps>;
    ResendConfirmationButton?: ElementAppearance<ButtonProps>;
    SuccessMessage?: ElementAppearance<AlertProps>;
    ErrorMessage?: ElementAppearance<AlertProps>;
  };
};

verifyMfaAppearance

VerifyMfaAppearance

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

type VerifyMfaAppearance = {
  options?: {
    displayLogo?: boolean;
    submitButtonText?: ReactNode;
  };
  elements?: {
    Container?: ElementAppearance<ContainerProps>;
    Logo?: ElementAppearance<ImageProps>;
    Header?: ElementAppearance<H3Props>;
    CodeLabel?: ElementAppearance<LabelProps>;
    CodeInput?: ElementAppearance<InputProps>;
    SubmitButton?: ElementAppearance<ButtonProps>;
    CodeOrBackupToggle?: ElementAppearance<ButtonProps>;
    ErrorMessage?: ElementAppearance<AlertProps>;
  };
};

completeAccountAppearance

CompleteAccountAppearance

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

type CompleteAccountAppearance = {
  options?: {
    displayLogo?: boolean;
    submitButtonText?: ReactNode;
  };
  elements?: {
    Container?: ElementAppearance<ContainerProps>;
    Logo?: ElementAppearance<ImageProps>;
    Header?: ElementAppearance<H3Props>;
    Content?: ElementAppearance<ParagraphProps>;
    FirstNameLabel?: ElementAppearance<LabelProps>;
    FirstNameInput?: ElementAppearance<InputProps>;
    LastNameLabel?: ElementAppearance<LabelProps>;
    LastNameInput?: ElementAppearance<InputProps>;
    UsernameLabel?: ElementAppearance<LabelProps>;
    UsernameInput?: ElementAppearance<InputProps>;
    SubmitButton?: ElementAppearance<ButtonProps>;
    ErrorMessage?: ElementAppearance<AlertProps>;
  };
};

updatePasswordAppearance

UpdatePasswordAppearance

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

type UpdatePasswordAppearance = {
  options?: {
    displayLogo?: boolean;
    SubmitButtonText?: ReactNode;
  };
  elements?: {
    Container?: ElementAppearance<ContainerProps>;
    Header?: ElementAppearance<H3Props>;
    Logo?: ElementAppearance<ImageProps>;
    PasswordLabel?: ElementAppearance<LabelProps>;
    PasswordInput?: ElementAppearance<InputProps>;
    SubmitButton?: ElementAppearance<ButtonProps>;
    ErrorMessage?: ElementAppearance<AlertProps>;
  };
};

createOrgAppearance

CreateOrgAppearance

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

type CreateOrgAppearance = {
  options?: {
    divider?: ReactNode | boolean;
    createOrgButtonText?: ReactNode;
    joinOrgButtonText?: ReactNode;
  };
  elements?: {
    Progress?: ElementAppearance<ProgressProps>;
    Container?: ElementAppearance<ContainerProps>;
    Header?: ElementAppearance<LabelProps>;
    OrgNameLabel?: ElementAppearance<LabelProps>;
    OrgNameInput?: ElementAppearance<InputProps>;
    AutojoinByDomainCheckbox?: ElementAppearance<CheckboxProps>;
    RestrictToDomainCheckbox?: ElementAppearance<CheckboxProps>;
    CreateOrgButton?: ElementAppearance<ButtonProps>;
    Divider?: ElementAppearance<DividerProps>;
    JoinOrgLabel?: ElementAppearance<LabelProps>;
    JoinOrgSelect?: ElementAppearance<SelectProps>;
    JoinOrgButton?: ElementAppearance<ButtonProps>;
    ErrorMessage?: ElementAppearance<AlertProps>;
  };
};

overrideCurrentScreenForTesting

LoginStateEnum

Field that lets you override the login state to bring a component into view (for testing purposes). View all options for the LoginStateEnum below.

type LoginStateEnum =
  | "LoginRequired"
  | "TwoFactorRequired"
  | "ConfirmEmailRequired"
  | "UserMetadataRequired"
  | "OrgCreationRequired"
  | "UpdatePasswordRequired"
  | "Finished";

​Usage

​How to customize the LoginManager

​Props

Usage

How to customize the LoginManager

Props