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