PropelAuth home pagelight logo
  1. Components
  2. Signup

The Signup component lets you sign up users however you want, from email and password to social accounts and magic links. You can deeply customize the appearance and behavior of the Signup component with props.

​
Usage

The following code snippet is a minimal example of how to use the Signup component. Here, we pass in a function that will be invoked when the signup process is complete (onSignupCompleted).

import * as React from "react";
import { Signup } 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>
      <Signup onSignupCompleted={() => redirectToPage("/dashboard")} />
    </div>
  );
}

Now let’s customize the look and feel of the Signup component—we can do this by passing in an appearance object 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 { Signup } from "@propelauth/react";
import { CustomLabel, CustomInput } from "./custom-components";

export default function SignupPage() {
  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 signupAppearance = {
    options: {
      divider: false,
      submitButtonText: "Enter the Dungeon",
    },
    elements: {
      Container: { backgroundColor: "#f8f8f8" },
      EmailLabel: CustomLabel,
      EmailInput: CustomInput,
      SubmitButton: "btn-blue",
    },
  };

  return (
    <div>
      <Signup
        onSignupCompleted={() => redirectToPage("/dashboard")}
        onRedirectToLogin={() => redirectToPage("/login")}
        appearance={signupAppearance}
      />
    </div>
  );
}

​
Props

onSignupCompletedRequired
VoidFunction

Function that gets invoked when the user completes the signup process. Because there may be additional steps the user needs to take, like confirming their email, you should redirect the user to your login component here, however, you can put whatever else you want here, like logging the signup to your analytics provider.

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.

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.

appearance
SignupAppearance

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

type SignupAppearance = {
  options?: {
    displayLogo?: boolean;
    divider?: ReactNode | boolean;
    submitButtonText?: ReactNode;
  };
  elements?: {
    Container?: ElementAppearance<ContainerProps>;
    Logo?: ElementAppearance<ImageProps>;
    Header?: ElementAppearance<H3Props>;
    Divider?: ElementAppearance<DividerProps>;
    FirstNameLabel?: ElementAppearance<LabelProps>;
    FirstNameInput?: ElementAppearance<InputProps>;
    LastNameLabel?: ElementAppearance<LabelProps>;
    LastNameInput?: ElementAppearance<InputProps>;
    UsernameLabel?: ElementAppearance<LabelProps>;
    UsernameInput?: ElementAppearance<InputProps>;
    EmailLabel?: ElementAppearance<LabelProps>;
    EmailInput?: ElementAppearance<InputProps>;
    PasswordLabel?: ElementAppearance<LabelProps>;
    PasswordInput?: ElementAppearance<InputProps>;
    SocialButton?: ElementAppearance<ButtonProps>;
    SubmitButton?: ElementAppearance<ButtonProps>;
    RedirectToLoginLink?: ElementAppearance<ButtonProps>;
    RedirectToPasswordlessLoginButton?: ElementAppearance<ButtonProps>;
    RedirectToSSOLoginButton?: ElementAppearance<ButtonProps>;
    ErrorMessage?: ElementAppearance<AlertProps>;
  };
};