Skip to main content

Sign In Block

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

πŸš€ Installation​

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

πŸ“– Usage​

import {SignIn} from '@nodeblocks/frontend-signin-block';
Live Editor
function BasicSignIn() {
  return (
    <SignIn
      onChange={(setError, getValues, clearErrors) => {
        const values = getValues();
        if (!values.email) {
          setError('email', {message: 'Email is required', type: 'required'});
        } else {
          clearErrors('email');
        }
      }}
      onSubmit={formData => {
        console.log('Form submitted:', formData);
      }}
    >
      <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>
  );
}
Result
Loading...

πŸ”§ 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
signupUrlstring"/auth/signup"URL for the signup link in GotoSignUp component
resetPasswordUrlstring"/auth/resetpassword"URL for the reset password link
classNamestringundefinedAdditional CSS class name for styling the form container
sxSxPropsundefinedMUI sx prop for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component extends MUI StackProps<'form'> (excluding children, onChange, and onSubmit). Uses component="form" with default spacing={4}, maxWidth: 496, px: 5, py: 6, and borderRadius: 3.

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"Title content
classNamestringundefinedAdditional CSS class name for styling
variantstring"h4"MUI Typography variant
componentstring"h1"HTML element to render
sxSxPropsundefinedMUI sx prop with default textAlign: 'center'

Note: This component extends MUI TypographyProps<'h1'>.

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
autoCompletestring"username"Browser autocomplete hint
requiredbooleantrueWhether the field is required
fullWidthbooleantrueWhether field takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TextFieldProps. Error states and helper text are managed automatically by react-hook-form.

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
autoCompletestring"current-password"Browser autocomplete hint
requiredbooleantrueWhether the field is required
fullWidthbooleantrueWhether field takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI TextFieldProps (excluding type). Includes built-in password visibility toggle with Visibility/VisibilityOff icons.

SignIn.SignInButton​

PropTypeDefaultDescription
childrenReactNode"Sign In"Button text content
variantstring"contained"MUI Button variant
sizestring"large"MUI Button size
typestring"submit"HTML button type
fullWidthbooleantrueWhether button takes full width
classNamestringundefinedAdditional CSS class name for styling

Note: This component extends MUI ButtonProps.

SignIn.GotoSignUp​

PropTypeDefaultDescription
signupUrlstringFrom contextURL for the signup link
childrenReactNodeLink to /auth/signupContent for the signup link section
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop with default textAlign: 'center' and fontSize: body2

Note: This component extends MUI BoxProps.

SignIn.ResetPassword​

PropTypeDefaultDescription
resetPasswordUrlstringFrom contextURL for the reset password link
childrenReactNodeLink to /auth/resetpasswordContent for the reset password link section
classNamestringundefinedAdditional CSS class name for styling
sxSxPropsundefinedMUI sx prop with default textAlign: 'center' and fontSize: body2

Note: This component extends MUI BoxProps.

🎨 Configuration examples​

Custom Validation​

function ValidationSignIn() {
  const handleSubmit = (formData: SignInFormData): void => {
    console.log('Validated form submitted:', formData);
  };

  return (
    <SignIn
      onChange={(setError, getValues, clearErrors) => {
        const {email, password} = getValues();

        if (email && !email.includes('@')) {
          setError('email', {message: 'Please enter a valid email'});
        } else {
          clearErrors('email');
        }

        if (password && password.length < 8) {
          setError('password', {message: 'Password must be at least 8 characters'});
        } else {
          clearErrors('password');
        }
      }}
      onSubmit={handleSubmit}
    >
      <SignIn.SignInTitle
        variant="h3"
        sx={{
          color: 'primary.main',
          fontWeight: 'bold',
        }}
      >
        Welcome Back!
      </SignIn.SignInTitle>
      <SignIn.EmailField label="Corporate Email" placeholder="name@company.com" />
      <SignIn.PasswordField label="Account Password" placeholder="Enter your secure password" />
      <SignIn.SignInButton>Sign In</SignIn.SignInButton>
      <SignIn.GotoSignUp />
      <SignIn.ResetPassword />
    </SignIn>
  );
}

Block Override Pattern​

function BlockOverrideSignIn() {
  return (
    <SignIn onSubmit={data => console.log(data)} onChange={() => {}}>
      {({defaultBlocks}) => ({
        blocks: {
          ...defaultBlocks,
          // Add custom welcome message
          welcomeMessage: (
            <div
              style={{
                padding: '12px 16px',
                backgroundColor: '#e3f2fd',
                borderRadius: '8px',
                textAlign: 'center',
                color: '#1976d2',
              }}
            >
              Sign in to access your dashboard
            </div>
          ),
        },
        blockOrder: [
          'signInTitle',
          'welcomeMessage',
          'emailField',
          'passwordField',
          'signInButton',
          'gotoSignUp',
          'resetPassword',
        ],
      })}
    </SignIn>
  );
}

Custom Navigation URLs​

<SignIn
  signupUrl="/register"
  resetPasswordUrl="/forgot-password"
  onSubmit={handleSubmit}
  onChange={handleChange}
/>

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {SignIn} from '@nodeblocks/frontend-signin-block';
import {
  UseFormClearErrors,
  UseFormGetValues,
  UseFormSetError,
  SubmitHandler,
} from 'react-hook-form';

// Default form data structure
type DefaultSignInFormData = {
  email?: string;
  password?: string;
};

// Extended form data type
type SignInFormData = DefaultSignInFormData & Record<string, unknown>;

// Custom form data with additional fields
interface CustomSignInFormData extends SignInFormData {
  rememberMe?: boolean;
}

function TypedSignInExample() {
  const handleSubmit: SubmitHandler<CustomSignInFormData> = formData => {
    console.log('Form submitted:', formData);
  };

  const handleChange = (
    setError: UseFormSetError<CustomSignInFormData>,
    getValues: UseFormGetValues<CustomSignInFormData>,
    clearErrors: UseFormClearErrors<CustomSignInFormData>,
  ): void => {
    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'}}
      signupUrl="/register"
      resetPasswordUrl="/forgot-password"
      sx={{maxWidth: 480, mx: 'auto'}}
    >
      <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="#register">Sign Up</a>
        </span>
      </SignIn.GotoSignUp>
      <SignIn.ResetPassword>
        <span>
          <a href="#forgot-password">Forgot password?</a>
        </span>
      </SignIn.ResetPassword>
    </SignIn>
  );
}

πŸ“ Notes​

  • The component uses MUI's Stack component as its base with component="form"
  • Default spacing is 4 with maxWidth: 496, px: 5, py: 6, and borderRadius: 3
  • Form state is managed by react-hook-form with mode: 'onBlur' for validation
  • The onChange callback is triggered when form values change (using useWatch)
  • Password field has built-in visibility toggle with MUI's Visibility/VisibilityOff icons
  • Error states and helper text are automatically displayed based on validation
  • Default blocks are: signInTitle, emailField, passwordField, signInButton, resetPassword, gotoSignUp
  • Additional utility fields available: TextField, TimeField, CheckboxField, SelectField
  • CSS classes follow BEM-style naming: nbb-signin, nbb-signin-signin-title, nbb-signin-email-field, etc.
  • Default signup link points to /auth/signup
  • Default reset password link points to /auth/resetpassword

Built with ❀️ using React, TypeScript, and MUI.