Login Form

Email/password authentication form with validation

SaaSAuth

Overview

LoginForm provides a complete email/password authentication experience. It includes client-side validation, loading states with disabled inputs, server error display, forgot password link, and optional SSO provider buttons.

Usage

import { LoginForm } from "@leanicon/web-builder-library/saas";

<LoginForm
  onSubmit={({ email, password }) => handleLogin(email, password)}
  onForgotPassword={() => router.push("/forgot-password")}
  isLoading={isSubmitting}
  error={loginError}
/>;

Variants

Default

With Forgot Password Callback

Without Forgot Password

Loading

With Error

With Default Email

With Custom Labels

With SSO

Or continue with

With SSO Loading

Or continue with

Filled Form

Props

NameTypeDefaultRequiredDescription
onSubmit(credentials: { email: string; password: string; }) => void—Yes
onForgotPassword(() => void)—No
forgotPasswordHrefstring—No
showForgotPasswordbooleantrueNo
defaultEmailstring—No
ssoProvidersSsoProvider[]—No
onSsoLogin((provider: SsoProvider) => void)—No
ssoLoadingProviderenum—No
labelsLoginFormLabels—No
classNamestring—No
isLoadingbooleanfalseNo
errorstring—No