reactjs-volkeno-authify v1.0.0

reactjs-volkeno-authify

Volkeno authentication gives you the possibility of integrating the classic authentication system in a few clicks, while making it easier for you to adapt the forms provided, to each of your React JS projects.

Install

npm install --save reactjs-volkeno-authify

Below you will find the documentation to handle the login form so as to modify the style, the text as well as the icon.

What should be remembered is that everything is easily customizable in this library. You will find all the necessary props to adapt this form to your design.

Login Usage

First step: Import the component with css file:

import { AuthLogin } from 'reactjs-volkeno-authify';
import 'reactjs-volkeno-authify/dist/index.css';

Second step: Use the connection component to have the login form

const App = () => {
  return (
    <AuthLogin
      emailName={ 'email' }
      passwordName={ 'password' }
      setApiBase={'http://127.0.0.1/api/'}
      setEndpoint={'login/'}
      keyToken={ 'tokenName' }
      onSuccessLogin={ onSuccessLogin }
      onFailLogin={ onFailLogin }
    />
  )
}

export default App

Registration Usage

First step: Import the component:

import { AuthRegister } from 'reactjs-volkeno-authify';

Second step: Use the registration component to have the register form

const App = () => {
  return (
    <AuthRegister 
      setApiBase={'http://127.0.0.1/api/'}
      setEndpoint={'register/'}
      onSuccessRegister={ onSuccessRegister }
      onFailRegister={ onFailRegister }
      useLogo
      usePhone
      useAddress
    />
  )
}

export default App

Using password recovery

First step: Import the component:

import { AuthRequestResetPassword } from 'reactjs-volkeno-authify';

Second step: Use The password recovery component to get the affected form.

const App = () => {
  return (
    <AuthRequestResetPassword
      setApiBase={'http://127.0.0.1/api/'}
      setEndpoint={'requestResetPassword/'}
      onSuccessRequestPassword={ onSuccessRequestPassword }
      onFailRequestPassword={ onFailRequestPassword }
      emailName={ 'email' }
    />
  )
}

export default App

Using Reset Password

First step: Import the component:

import { AuthResetPassword } from 'reactjs-volkeno-authify'

Second step: Use The reset password component to get the affected form.

const App = () => {
  return (
    <AuthResetPassword
      setApiBase={'http://127.0.0.1/api/'}
      setEndpoint={'changePassword/'}
      onSuccessResetPassword={ onSuccessResetPassword }
      onFailResetPassword={ onFailResetPassword }
      passwordName={ 'password' }
      confirmPasswordName={ 'password_confirm' }
    />
  )
}

export default App

Configuration - Props

Props require

To change texts and icons

Find Feather Icons here https://feathericons.com/

Customize the style of the form and its components

License

MIT © volkeno-dev