LoginForm

A complete login form block with email/password fields, social login, and forgot password link.

Welcome back

Enter your credentials to sign in to your account.

CMSCMS Ready

The LoginForm component accepts customizable title, description, and link props for CMS integration. Content editors can configure form text without code changes.

Basic Usage

import { LoginForm } from "@corew500/ui"

<LoginForm
  onFormSubmit={(data) => console.log(data)}
  onSocialLogin={(provider) => console.log(provider)}
/>

With Glow Effect

Enable interactive glow effects on all inputs and buttons.

<LoginForm
  glow
  onFormSubmit={(data) => handleLogin(data)}
/>

The glow effect adds:

Mouse-tracking radial gradient on input fields
Animated gradient underline on buttons that fades in on hover

Custom Content

<LoginForm
  title="Welcome back"
  description="Sign in to access your dashboard"
  forgotPasswordHref="/forgot-password"
  signUpHref="/signup"
/>

Loading State

<LoginForm loading />

With Authentication (feature-auth)

Different Package

The examples below use @corew500/feature-auth, which wraps this UI component with Supabase authentication. Install it separately for full auth functionality.

For complete Supabase authentication, use the wrapper from @corew500/feature-auth:

import { LoginForm } from "@corew500/feature-auth"

// Basic usage - redirects to /dashboard on success
<LoginForm
  redirectTo="/dashboard"
  signUpHref="/signup"
  forgotPasswordHref="/forgot-password"
/>

Lifecycle Callbacks

Hook into the authentication flow for analytics, error handling, or custom behavior:

import { LoginForm } from "@corew500/feature-auth"

<LoginForm
  redirectTo="/dashboard"
  onSuccess={({ email }) => {
    analytics.track('login_success', { email })
  }}
  onAuthError={(error) => {
    analytics.track('login_failed', {
      code: error.code,
      message: error.message
    })
  }}
  onSubmitStart={() => {
    setGlobalLoading(true)
  }}
/>

Full Control Mode

Disable auto-redirect to handle navigation manually:

import { LoginForm } from "@corew500/feature-auth"
import { useRouter } from 'next/navigation'

function LoginPage() {
  const router = useRouter()

  return (
    <LoginForm
      redirectTo={false}  // Disable auto-redirect
      onSuccess={async ({ email }) => {
        await updateUserContext(email)
        router.push('/onboarding')
      }}
    />
  )
}

Client-Side Validation

Enable real-time validation with react-hook-form and zod:

import { LoginForm } from "@corew500/feature-auth"

<LoginForm
  validation={{
    enableClientValidation: true,
    validationMode: 'onBlur',
  }}
/>

Props

Prop	Type	Default	Description
`onFormSubmit`	(data: LoginFormData) => void	—	Called when the form is submitted with email and password
`onSocialLogin`	(provider: string) => void	—	Called when social login button is clicked
`forgotPasswordHref`	string	`#`	URL for forgot password link
`signUpHref`	string	`#`	URL for sign up link
`loading`	enum	`false`	Whether the form is in a loading state
`title`	string	`Login to your account`	Custom title for the card
`description`	string	`Enter your email below to login to your account`	Custom description for the card
`glow`	enum	`false`	Enable glow effects on inputs and buttons
`labels`	{ email?: string; password?: string; rememberMe?: string; }	`{}`	—
`placeholders`	{ email?: string; password?: string; }	`{}`	—
`buttonLabels`	{ submit?: string; loading?: string; forgotPassword?: string; signUp?: string; signUpPrompt?: string; socialGoogle?: string; }	`{}`	—
`errors`	{ email?: string; password?: string; general?: string; }	`{}`	—
`features`	{ rememberMe?: boolean; passwordToggle?: boolean; socialLogin?: boolean; }	`{}`	—