user-auth-form v0.1.2

Login and Sign Up form for ReactJS

basic login and signup form to get you going with personal projects

Install

npm i user-auth-form

Usage

The Main form with sign up and login:

import { FormWithReactRouter } from 'user-auth-form'

Two props can be passed to the default form: successUrl: string which will be the route user will be redirected to on a successful login/signup and, userClassName: string for custom styling (optional).

Example usage with React Router's Route element.

<Route>
    <FormWithReactRouter
    successUrl={"/dashboard"}
    userClassName={"user-auth-custom"}
    />
</Route>

Components

All the following could be imported via

import { ComponentName } from 'user-auth-form'

AuthForm

AuthForm is the common abstraction between login and signup to reduce duplicated code and better debuggin while scarificing some customizability

Based on 'react-hook-form'

Login and Signup

both components are simple forms made from AuthForm abstraction and added animation and styling

Login

The default success code for Login is HTTP status code 200, and the default reaction to success is saving the 'jwt' field of the response object in localStorage.

Signup

The default success code for Signup is HTTP status code 201, and the default reaction to success is saving the 'jwt' field of the response object in localStorage.

withAnimationDiv

HigherOrderComponent to add animations to the forms. Variants can be located at 'lib/components/animationVariants'

animations with 'framer-motion'

Credits

Default Background Image: Photo by Vlad Chețan from Pexels