react-signup-form

Beautiful, accessible, zero-dependency Login and Sign-Up form components for React.

Features

• LoginForm — email + password with show/hide toggle and "Forgot password?" support
• SignUpForm — first/last name, email, password with strength meter, confirm password, and terms checkbox
• AuthForms — combined component that handles switching between the two forms
• Animated overlay and card entrance
• Built-in validation with inline error messages
• Success state after submit
• Fully customisable via props
• TypeScript types included
• No external dependencies (only peer: react)

Installation

npm install react-signup-form

or with Yarn:

yarn add react-signup-form

Quick Start

Combined Login + Sign-Up (recommended)

import { useState } from 'react';
import { AuthForms } from 'react-signup-form';

export default function App() {
  const [showAuth, setShowAuth] = useState(false);

  return (
    <>
      <button onClick={() => setShowAuth(true)}>Open Login</button>

      {showAuth && (
        <AuthForms
          onLogin={async ({ email, password }) => {
            console.log('Login:', email, password);
            // call your API here
          }}
          onSignUp={async ({ firstName, lastName, email, password }) => {
            console.log('Sign up:', firstName, lastName, email, password);
            // call your API here
          }}
          onForgotPassword={() => console.log('Forgot password clicked')}
          onClose={() => setShowAuth(false)}
        />
      )}
    </>
  );
}

Login Form only

import { LoginForm } from 'react-signup-form';

<LoginForm
  onLogin={async ({ email, password }) => {
    const ok = await myApi.login(email, password);
    if (!ok) return false; // prevents success state
  }}
  onForgotPassword={() => navigate('/forgot-password')}
  onSwitchToSignUp={() => setView('signup')}
  onClose={() => setOpen(false)}
/>

Sign-Up Form only

import { SignUpForm } from 'react-signup-form';

<SignUpForm
  onSignUp={async ({ firstName, lastName, email, password }) => {
    await myApi.register({ firstName, lastName, email, password });
  }}
  onSwitchToLogin={() => setView('login')}
  onClose={() => setOpen(false)}
/>

Props

<LoginForm />

| Prop | Type | Default | Description | |---|---|---|---| | onLogin | (values) => void \| Promise | — | Called on submit with { email, password }. Return false to block the success screen | | onForgotPassword | () => void | — | Shows "Forgot password?" link when provided | | onSwitchToSignUp | () => void | — | Shows "Sign up" link when provided | | onClose | () => void | — | Shows ✕ close button when provided | | loading | boolean | — | Controlled loading state | | error | string | — | Global error banner above the form | | overlay | boolean | true | Wraps the card in a dark blurred overlay | | logoSrc | string | — | Custom logo image URL | | title | string | "Welcome back" | Form heading | | buttonText | string | "Sign in" | Submit button label | | position | 'left' \| 'center' \| 'right' | 'left' | Aligns login header content | | className | string | — | Added to .raf-card so you can target your own overrides | | overlayClassName | string | — | Added to .raf-overlay when overlay is true |

<SignUpForm />

| Prop | Type | Default | Description | |---|---|---|---| | onSignUp | (values) => void \| Promise | — | Called with { firstName, lastName?, email, password } | | onSwitchToLogin | () => void | — | Shows "Sign in" link when provided | | onClose | () => void | — | Shows ✕ close button | | loading | boolean | — | Controlled loading state | | error | string | — | Global error banner | | overlay | boolean | true | Dark blurred overlay | | showLastName | boolean | true | Toggle last name field | | showConfirmPassword | boolean | true | Toggle confirm password field | | showTerms | boolean | true | Toggle terms checkbox | | showStrength | boolean | true | Toggle password strength bar | | logoSrc | string | — | Custom logo image URL | | title | string | "Create an account" | Form heading | | buttonText | string | "Create account" | Submit button label | | position | 'left' \| 'center' \| 'right' | 'left' | Aligns sign-up header content | | className | string | — | Added to .raf-card so you can target your own overrides | | overlayClassName | string | — | Added to .raf-overlay when overlay is true |

<AuthForms />

Accepts all props from both forms above, plus:

| Prop | Type | Default | Description | |---|---|---|---| | initialView | 'login' \| 'signup' | 'login' | Which form to show first | | loginError | string | — | Error for login form | | signUpError | string | — | Error for signup form | | loginLoading | boolean | — | Loading for login | | signUpLoading | boolean | — | Loading for signup | | position | 'left' \| 'center' \| 'right' | 'left' | Aligns header content in both forms | | className | string | — | Added to .raf-card in both views | | overlayClassName | string | — | Added to .raf-overlay in both views when overlay is enabled |

Handling API Errors

Pass an error string via the error (or loginError / signUpError) prop:

const [error, setError] = useState('');
const [loading, setLoading] = useState(false);

<LoginForm
  loading={loading}
  error={error}
  onLogin={async ({ email, password }) => {
    setLoading(true);
    setError('');
    try {
      await myApi.login(email, password);
    } catch (e) {
      setError('Invalid email or password. Please try again.');
      return false; // prevents success screen
    } finally {
      setLoading(false);
    }
  }}
/>

Inline (no overlay) Usage

Set overlay={false} to render just the card without the dark background:

<div style={{ display: 'flex', justifyContent: 'center', padding: 40 }}>
  <LoginForm overlay={false} onLogin={handleLogin} />
</div>

CSS Overrides

Use className / overlayClassName to attach your own selectors and override defaults:

<LoginForm
  className="my-login"
  overlayClassName="my-login-overlay"
  onLogin={handleLogin}
/>

.my-login.raf-card {
  max-width: 520px;
  border-radius: 24px;
}

.my-login .raf-submit-btn {
  background: #111827;
  box-shadow: none;
}

.my-login-overlay.raf-overlay {
  background: rgba(0, 0, 0, 0.75);
}