Skip to main content

​
Overview

SignUpForm is a collection of components designed to facilitate the creation of a custom sign-up flow. It provides a set of components that encapsulate the business logic for handling forms, allowing users to easily customize the layout, styles, labels, placeholders, and button texts.

​
Example Usage

custom-sign-up-form.tsx
import { useRouter } from 'next/navigation';

import type { Session } from '@locai1/iam-javascript';
import { SignUpElements } from '@locai1/iam-react/elements';

const { SignUnForm } = SignUpElements;

const CustomSignUpForm = () => {
   const { push } = useRouter();

   const handleComplete = (session: Session | undefined) => {
    console.log('Sign in complete', session);
  };

  const verificationUrl = `${window.location.origin}/verify-email?code={{code}}&userId={{userId}}&sessionToken={{sessionToken}}`;

  return (
    <SignUpForm.Root
      onComplete={handleComplete}
      verificationUrl={verificationUrl}
    >
      <SignUpForm.FirstNameInput
        label="First Name"
        placeholder="Enter your first name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.LastNameInput
        label="Last Name"
        placeholder="Enter your last name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.EmailInput
        label="Email"
        placeholder="Enter your email"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.PasswordInput
        label="Password"
        placeholder="Enter your password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.ConfirmPasswordInput
        label="Confirm Password"
        placeholder="Re-enter your password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.ErrorMessage className="custom-error-class" />
      <SignUpForm.SubmitButton text="Sign Up" className="custom-button-class" />
    </SignUpForm.Root>
  );
};

​
Components

​
SignUpForm.Root

The root component of sign-up form. It encapsulates business logic for handling sign-up form.
SignUpForm is responsible for creating a user. You need to implement a VerificationForm(from SignUpElement) that displays and handle otp inputs logic(entering the code from email) and complete registration flow.

​
Props

​
children
ReactNode
React elements to be rendered inside the form. SignUpForm elements should be rendered as children of SignUpForm.Root.
​
onComplete
callback
required
A callback function that is called when the sign-up process is successfully completed.
​
verificationUrl
string
required
Verification url used to redirect user to verification page from email. It should contain a placeholder for verification code.

​
Input Fields

SignUpForm has the following exported input fields:
  • SignUpForm.FirstNameInput - field for entering first name.
  • SignUpForm.LastNameInput - field for entering last name.
  • SignUpForm.EmailInput - field for entering email.
  • SignUpForm.PasswordInput - field for entering password.
  • SignUpForm.ConfirmPasswordInput - field for entering password.
All these fields have similar props listed below:

​
Props

​
label
string
Label for input field. Optional, if not provided the label will not be rendered.
​
placeholder
string
Placeholder for input field. Optional, if not provided the placeholder will not be rendered.
​
labelClassname
string
Custom class name for label.
​
labelClassname
string
Custom class name for input.

​
SignInForm.ErrorMessage

Displays an error message if there is an error in the form submission.

​
Props

​
classname
string
Custom class name for the error message.

​
SignInForm.SubmitButton

Submit button for the form.

​
Props

​
text
string
Text to be displayed on the button.
​
classname
string
Custom class name for the button.