Skip to main content

​
Overview

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

​
Example Usage

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

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

import { FORGOT_PASSWORD_PAGE } from '@/const';

const { SignInForm } = SignInElements;

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

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

  const handleForgotPassword = () => {
    push(FORGOT_PASSWORD_PAGE);
  };

  return (
    <SignInForm.Root onComplete={handleComplete}>
      <SignInForm.EmailInput
        label="Email"
        placeholder="Enter your email"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignInForm.PasswordInput
        label="Password"
        forgotPassword={{
          text: "Forgot your password?",
          onClick: handleForgotPassword,
        }}
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignInForm.ErrorMessage className="custom-error-class" />
      <SignInForm.SubmitButton text="Sign In" className="custom-button-class" />
      <SignInForm.OAuthSection onComplete={handleComplete} />
    </SignInForm.Root>
  );
};

​
Components

​
SignInForm.Root

The root component of sign-in form. It encapsulates business logic for handling sign-in form.

​
Props

​
children
ReactNode
React elements to be rendered inside the form. SignInForm elements should be rendered as children of SignInForm.Root.
​
onComplete
callback
required
A callback function that is called when the sign-in process is successfully completed.

​
SignInForm.EmailInput

An email input field.

​
Props

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

​
SignInForm.PasswordInput

Password input field with an optional “forgot password” link.

​
Props

​
label
string
Label for the password input field. Optional, if not provided the label will not be rendered.
​
labelClassname
string
Custom class name for the password label.
​
labelClassname
string
Custom class name for the email input.
​
forgotPassword
object
An object containing the text and onClick handler for the “forgot password” link, if not provided the link will not be rendered.
forgotPassword
forgotPassword?: {
  text: string;
  onClick: () => void;
};

​
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.

​
SignInForm.OAuthSection

A section for handling OAuth sign-in options.