React Auth

React Auth provides an authentication management system for ReactJS web applications that is a fully customizable.

Installation

The package can be installed via npm:

npm install github:vishalhesta/react-auth#8ffc70305582ae1d3a44d51086a81c4eb3b594a1 --save

Or via yarn:

yarn add github:vishalhesta/react-auth#8ffc70305582ae1d3a44d51086a81c4eb3b594a1

Features

1. Log In
2. Sign Up
3. Forgot Password
4. Forgot Password Verify Otp
5. Reset Password

Demo

Live Demo

Examples

1. LoginForm

import React from 'react';
import useProvider, { LoginForm } from 'react-auth';

const Login = () => {
	const { loginWithEmailProvider } = useProvider()

	loginWithEmailProvider({
	    baseUrl: "http://localhost:8080/api/v1/auth/login",
	    fields: [{
	        name: "email", type: "text"
	    }, 
	    {
	        name: "password", type: "password"
	    }]
	})

	const onSuccess = (data) => {
	    console.log("On Success", data)
	}

	const onError = (error) => {
	    console.log("On Error", error)
	}

	return (
	    <div>
		 <LoginForm
		    onSuccess={onSuccess}
		    onError={onError}
		/>
	    </div>
	);
};

export default Login;

2. SignUpForm

import React from 'react';
import useProvider, { SignupForm } from 'react-auth';

const Signup = () => {
	const { signupWithEmailProvider } = useProvider()

	signupWithEmailProvider({
	    baseUrl: "http://localhost:8080/api/v1/auth/signup",
	    fields: [{
	        name: "name", type: "text"
	    },
	    {
		name:"username", type: "password"
	    },
	    {
	        name: "email", type: "text"
	    }, 
	    {
	        name: "password", type: "password"
	    }]
	})

	const onSuccess = (data) => {
	    console.log("On Success", data)
	}

	const onError = (error) => {
	    console.log("On Error", error)
	}

	return (
	    <div>
		 <SignupForm
		    onSuccess={onSuccess}
		    onError={onError}
		/>
	    </div>
	);
};

export default Signup;

3. ForgotPasswordForm

import React from 'react';
import useProvider, { ForgotPasswordForm } from 'react-auth';

const ForgotPassword = () => {
	const { forgotPasswordProvider } = useProvider()

	forgotPasswordProvider({
	    baseUrl: "http://localhost:8080/api/v1/auth/forgot-password",
	    fields: [{
	        name: "email", type: "text"
	    }]
	})

	const onSuccess = (data) => {
	    console.log("On Success", data)
	}

	const onError = (error) => {
	    console.log("On Error", error)
	}

	return (
	    <div>
		 <ForgotPasswordForm
		    onSuccess={onSuccess}
		    onError={onError}
		/>
	    </div>
	);
};

export default ForgotPassword;

4. ForgotPasswordVerifyOTPForm

import React from 'react';
import useProvider, { ForgotPasswordVerifyOTPForm } from 'react-auth';

const ForgotPasswordVerifyOTP = () => {
	const { forgotPasswordVerifyOtpProvider } = useProvider()

	forgotPasswordVerifyOtpProvider({
	    baseUrl: "http://localhost:8080/api/v1/auth/forgot-password-verify-otp",
	    fields: [{
	        name: "otp", type: "text"
	    }]
	})

	const onSuccess = (data) => {
	    console.log("On Success", data)
	}

	const onError = (error) => {
	    console.log("On Error", error)
	}

	return (
	    <div>
		 <ForgotPasswordVerifyOTPForm
		    onSuccess={onSuccess}
		    onError={onError}
		/>
	    </div>
	);
};

export default ForgotPasswordVerifyOTP;

5. ResetPasswordForm

import React from 'react';
import useProvider, { ResetPasswordForm } from 'react-auth';

const ResetPassword = () => {
	const { resetPasswordProvider } = useProvider()

	resetPasswordProvider({
	    baseUrl: "http://localhost:8080/api/v1/auth/reset-password",
		
	    fields: [{
		name: "password", type: "password"
	    },
	    {
	        name:"confirm_password", type: "password"
	    }]
	})

	const onSuccess = (data) => {
	    console.log("On Success", data)
	}

	const onError = (error) => {
	    console.log("On Error", error)
	}

	return (
	    <div>
		 <ResetPasswordForm
		    onSuccess={onSuccess}
		    onError={onError}
		/>
	    </div>
	);
};

export default ResetPassword;

Parameters for all providers:

Ex:- loginWithEmailProvider, signupWithEmailProvider etc.

Params	Value	Default Value	Description
baseUrl	string	Required	baseUrl to used for Login Api to get the login response.
fields	Array of Object	Required	fields array of object keys key value default value description name string required Name of the input field. type string required Type of the input field. placeholder string optional Placeholder for the input field. label string optional Label of that input field. rules object optional Follow react-hook-form validation rules

Props for all components:

Ex:- LoginForm, SignupForm etc.

Props	Value	Default Value	Description
onSuccess	function	Required	After success, onSuccess callback will be called
onError	function	Required	If failed response, onError callback will be called
onSubmit	function	Optional	If user keeps on their onSubmit functionality.