Skip to main content

Sign In Block

The SignIn Component is a fully customizable and accessible sign-in form built with React and TypeScript. It provides a complete authentication interface with modern design patterns, form validation, and flexible customization options.

πŸš€ Installation​

npm install @nodeblocks/frontend-signin-block@0.2.2

πŸ“– Usage​

import {SignIn} from '@nodeblocks/frontend-signin-block';
function BasicSignIn() {
  return (
    <SignIn
      onChange={(setError, getValues, clearErrors) => {
        console.log('Form values:', getValues());
        const values = getValues();
        if (!values.email) {
          setError('email', {message: 'Email is required', type: 'required'});
        } else {
          clearErrors('email');
        }
      }}
      onSubmit={formData => {
        console.log('Form submitted:', formData);
      }}
      style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
      <SignIn.SignInTitle>Welcome Back</SignIn.SignInTitle>
      <SignIn.EmailField label="Email Address" placeholder="Enter your email" />
      <SignIn.PasswordField label="Password" placeholder="Enter your password" />
      <SignIn.SignInButton>Sign In</SignIn.SignInButton>
      <SignIn.GotoSignUp>
        <a href="#signup">Create an account</a>
      </SignIn.GotoSignUp>
      <SignIn.ResetPassword>
        <a href="#reset-password">Forgot password?</a>
      </SignIn.ResetPassword>
    </SignIn>
  );
}

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
onSubmitSubmitHandler<T>RequiredCallback function triggered when form is submitted with valid data
onChange(setError, getValues, clearErrors) => voidRequiredCallback function triggered when form values change. Provides form control functions for validation
defaultDataDefaultValues<T>undefinedDefault form values to populate fields on initial render
dataTundefinedControlled form values - use this for external form state management
childrenBlocksOverrideundefinedCustom block components to override default rendering
classNamestringundefinedAdditional CSS class name for styling the form container

Note: This component additional inherits some common HTML form element props.

Sub-Components​

The SignIn component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

SignIn.SignInTitle​

PropTypeDefaultDescription
childrenReactNode"Sign In to App"Title content
sizeenum"2XL"Typography size for the title
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
weightenum"bold"Weight of the title
classNamestringundefinedAdditional CSS class name for styling

SignIn.EmailField​

PropTypeDefaultDescription
namestring"email"Field name used for form data and validation
labelstring"Email"Field label displayed above the input
placeholderstring"Please enter your email"Placeholder text shown when field is empty
inputTypestring"email"Input type - typically "email" or "text"
isRequiredbooleantrueWhether the field is required (shows red asterisk)
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

Note: This component additional inherits some common HTML input element props.

SignIn.PasswordField​

PropTypeDefaultDescription
namestring"password"Field name used for form data and validation
labelstring"Password"Field label displayed above the input
placeholderstring"Please enter your password"Placeholder text shown when field is empty
inputTypestring"password"Input type - typically "password" or "text"
isRequiredbooleantrueWhether the field is required (shows red asterisk)
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

Note: This component additional inherits some common HTML input element props.

SignIn.SignInButton​

PropTypeDefaultDescription
childrenReactNode"Login"Button text content
classNamestringundefinedAdditional CSS class name for styling
fillenum"fill"Button fill style
iconenumundefinedOptional icon for the left-hand side of the button
iconColorenumundefinedColor for the left-hand side icon. When not provided, a default color for the fill type will be used.
isDisabledbooleanfalseWhether the button is disabled and cannot be used
onClickfunctionundefinedFunction to handle button click
sizeenum"M"Button vertical size
textAlignenum"center"Button icon and text positioning within the button
textColorenum"default"Button text color
textEmphasisbooleanfalseButton text weight
textSizeenum"M"Button text size
typeenum"submit"Button purpose (affects html type)

SignIn.GotoSignUp​

PropTypeDefaultDescription
childrenReactNodeDefault signup linkContent for the signup link section - typically contains an anchor tag
classNamestringundefinedAdditional CSS class name for styling

SignIn.ResetPassword​

PropTypeDefaultDescription
childrenReactNodeDefault reset linkContent for the reset password link section - typically contains an anchor tag
classNamestringundefinedAdditional CSS class name for styling

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {SignIn} from '@nodeblocks/frontend-signin-block';
//in future we will not use react-hook-form, we will use our own form handling
import {UseFormClearErrors, UseFormGetValues, UseFormSetError} from 'react-hook-form';

// Default form data structure
interface DefaultSignInFormData extends Record<string, unknown> {
  email?: string;
  password?: string;
}

// Extend with custom fields
interface CustomSignInFormData extends DefaultSignInFormData {
  rememberMe?: boolean;
  customField?: string;
}

const MySignInForm = () => {
  const handleSubmit = (formData: CustomSignInFormData) => {
    console.log('Form submitted:', formData);
    // Handle form submission
  };

  const handleChange = (
    setError: UseFormSetError<CustomSignInFormData>,
    getValues: UseFormGetValues<CustomSignInFormData>,
    clearErrors: UseFormClearErrors<CustomSignInFormData>,
  ) => {
    const values = getValues();

    // Custom validation
    if (values.email && !values.email.includes('@')) {
      setError('email', {message: 'Invalid email format'});
    } else {
      clearErrors('email');
    }
  };

  return (
    <SignIn<CustomSignInFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      defaultData={{email: 'user@example.com'}}>
      <SignIn.SignInTitle>Welcome Back</SignIn.SignInTitle>
      <SignIn.EmailField />
      <SignIn.PasswordField />
      <SignIn.SignInButton>Login</SignIn.SignInButton>
      <SignIn.GotoSignUp>
        <span>
          Don't have an account? <a href="#signup">Sign Up</a>
        </span>
      </SignIn.GotoSignUp>
      <SignIn.ResetPassword>
        <span>
          <a href="#reset-password">Forgot password?</a>
        </span>
      </SignIn.ResetPassword>
    </SignIn>
  );
};

Built with ❀️ using React, TypeScript, and modern web standards.