react-easy-login

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:

Prop	Type	Description
inputs	Array	An array of strings that specify the input fields (e.g., ['email', 'password']).
authFields	Array	Fields to be sent in the authentication request (should match your backend API fields).
uri	String	The API endpoint to which login credentials are submitted.
redirectto	String	Path to redirect to after a successful login (e.g., /dashboard).
registerroute	String	Path to the registration page (e.g., /register). Users will be redirected here if they don't have an account.

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;
}