react-easy-login is a simple and easy-to-use React component for implementing a login page with minimal code. It provides a pre-styled login form that you can use in your React applications by simply passing a few props.

Features

• Simple to integrate: Drop the login form into your React project without the need to write a full login page.
• Customizable: Easily configure input fields and authentication endpoint.
• Routing support: Automatically redirect users after successful login.
• Built-in form validation: Basic form validation out of the box.
• Error handling: Displays error messages for failed login attempts.

Installation

You can install react-easy-login using npm or yarn.

Using npm:

npm install react-easy-login

Using the module

import React from 'react';
import Login from 'react-easy-login';

function App() {
  return (
    <div className="App">
      <Login
        inputs={['email', 'password']}
        authFields={['email', 'password']}
        uri="https://your-auth-api.com/login"
        redirectto="/dashboard"
        registerroute="/register"
      />
    </div>
  );
}

export default App;

Props

The Login component accepts the following props:

Customization

You can customize the styles by overriding the default CSS classes defined in Login.css. You can also change the structure of your authentication form using props.

.auth-container {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 10px;
}

.submit-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #218838;
}