Login ·

A versatile authentication library designed to streamline the user authentication processes for React applications. This library provides components for user registration, login, password reset, and more.

Features

• Seamless user registration with robust validation.
• User login with optional "Remember Me" functionality.
• Forgot password functionality with email confirmation.
• Password reset using confirmation code.
• Error and Success message alerts

Installation

Using npm.

npm install @sswahn/login

Usage

Import the components.

import {
  Register,
  Login,
  ForgotPassword,
  ConfirmForgotPassword
} from '@sswahn/login'

Register

Creates a user registration form.

<Register
  className="custom-register"
  onSubmit={handleOnSubmit}
/>

Login

Creates a user login form, with links to registration, and forgot password forms.

<Login
  className="custom-login"
  onSubmit={handleOnSubmit}
  forgotPassword={handleOpenForgotPassword}
  registerUser={handleOpenRegistration}
/>

Forgot Password

Forgot password form, for requesting a password reset.

<ForgotPassword
  className="custom-forgot-password"
  onSubmit={handleOnSubmit}
/>

Confirm Forgot Password

Confirm forgot password form. Using a confirmation code users can reset their passwords.

<ConfirmForgotPassword
  className="custom-confirm-forgot-password"
  onSubmit={handleOnSubmit}
/>

Documentation

onSubmit Callback Hook

• Each component (Register, Login, ForgotPassword, ConfirmForgotPassword) accepts an onSubmit prop, which should be a asynchronous callback function.
• This function is triggered when the user submits the form, and it receives the form data as an argument.
• You can customize this function to handle the form submission, such as making API calls, additional validation, redirects, etc.
• onSubmit must be an async function and, when necessary, return one of the following objects:

{ message: 'Your success message.' }
// or
{ error: 'Your error message.' }

Styling Overrides with className

You can customize the appearance of each component by providing a className prop. This allows you to apply your own styles to the component. For example:

const CustomRegister = () => {
  return <Register className="custom-register" onSubmit={handleRegister} />
}

In the above example, the "custom-register" class will be applied to the Register component, allowing you to override default styles.

Additional Callbacks in Login

• forgotPassword: Callback triggered when the user clicks the "Forgot password?" button. Use this to handle opening the forgot password form.

• registerUser: Callback triggered when the user clicks the "Create an account" button. Use this to handle opening the registration form.

Peer Dependencies

Login requires React as a peer dependency. You should have React installed in your project with a version compatible with this library.

• React: ^18.2.0

Credits

This library uses Font Awesome Icons.

• Font Awesome Icons: Font Awesome
  • Icons used under the Font Awesome Free License.

Related

• @sswahn/cognito: Cognito is a robust AWS Cognito login system for Node.js.
• @sswahn/session: Session provides a simple and efficient way to manage user sessions using AWS Cognito for authentication.
• @sswahn/authorizer: An AWS Cognito authorizer for APIGateway that uses HTTP Cookies.

License

Login is MIT Licensed