@abhinavchauhan01/auth-components v1.0.3

@kickrtechnology/auth-components

A collection of customizable authentication components for React applications.

Installation

npm install @kickrtechnology/auth-components
# or
yarn add @kickrtechnology/auth-components

Components

1. CustomizableLogin
2. CustomizableSignup
3. CustomizableOTPVerification
4. CustomizableForgotPassword

Usage

import { 
  CustomizableLogin, 
  CustomizableSignup,
  CustomizableOTPVerification,
  CustomizableForgotPassword 
} from '@kickrtechnology/auth-components';

// Login Component
function App() {
  return (
    <CustomizableLogin   containerStyle={{
        backgroundColor: '#c8e8fa',
        // backgroundColor: '#f0f0f0',
        boxShadow: '0 0 10px rgba(0,0,0,0.2)',
        display:"flex",
        flexDirection:"column",
        justifyContent:"center",
        alignItems:"center",
        minWidth:"400px",
        maxWidth:"600px"
      }}
      inputStyle={{
        backgroundColor: '#ffffff',
        border: '1px solid #ddd',
        width:"340px"
      }}
      buttonStyle={{
        backgroundColor: '#ff5722',
        borderRadius: '20px',
       boxShadow:"5px 5px 1px green",
      }}
      brandingStyle={{
        color: 'blue',
        fontWeight: 'bold',
      }}
      onSubmit={handleSubmit}
      licenseKey="PAID_LICENSE_KEY"  loginMethod = 'email' />
  );
}

// Signup Component
<CustomizableSignup
      fields={['firstName', 'lastName', 'email', 'phone']}
      // customStyles={{
      //   firstName: { borderColor: 'blue' },
      //   lastName: { borderColor: 'green' },
      // }}
      containerStyle={{
        backgroundColor: '#c8e8fa',
        // backgroundColor: '#f0f0f0',
        boxShadow: '0 0 10px rgba(0,0,0,0.2)',
        display:"flex",
        flexDirection:"column",
        justifyContent:"center",
        alignItems:"center",
        minWidth:"400px",
        maxWidth:"600px"
      }}
      inputStyle={{
        backgroundColor: '#ffffff',
        border: '1px solid #ddd',
        width:"340px"
      }}
      buttonStyle={{
        backgroundColor: '#ff5722',
        borderRadius: '20px',
       boxShadow:"5px 5px 1px green",
      }}
      brandingStyle={{
        color: 'blue',
        fontWeight: 'bold',
      }}
      onSubmit={handleSubmit}
      licenseKey="PAID_LICENSE_KEY"
    />

   <CustomizableLogin   containerStyle={{
        backgroundColor: '#c8e8fa',
        // backgroundColor: '#f0f0f0',
        boxShadow: '0 0 10px rgba(0,0,0,0.2)',
        display:"flex",
        flexDirection:"column",
        justifyContent:"center",
        alignItems:"center",
        minWidth:"400px",
        maxWidth:"600px"
      }}
      inputStyle={{
        backgroundColor: '#ffffff',
        border: '1px solid #ddd',
        width:"340px"
      }}
      buttonStyle={{
        backgroundColor: '#ff5722',
        borderRadius: '20px',
       boxShadow:"5px 5px 1px green",
      }}
      brandingStyle={{
        color: 'blue',
        fontWeight: 'bold',
      }}
      onSubmit={handleSubmit}
      licenseKey="PAID_LICENSE_KEY"  loginMethod = 'email' />
    

    <CustomizableOTPVerification
  numberOfDigits={4} // Default is 6
  customStyles={{
    input: { borderColor: 'blue' }
  }}
  containerStyle={{
    backgroundColor: '#c8e8fa',
    // backgroundColor: '#f0f0f0',
    boxShadow: '0 0 10px rgba(0,0,0,0.2)',
    display:"flex",
    flexDirection:"column",
    justifyContent:"center",
    alignItems:"center",
    minWidth:"400px",
    maxWidth:"600px"
  }}
  buttonStyle={{
    backgroundColor: '#ff5722',
    borderRadius: '20px',
   boxShadow:"5px 5px 1px green",
  }}
  onSubmit={(otp) => {
    console.log('OTP:', otp);
    // Handle OTP verification
  }}
/>

// OTP Verification
<CustomizableOTPVerification
  numberOfDigits={4} // Default is 6
  customStyles={{
    input: { borderColor: 'blue' }
  }}
  containerStyle={{
    backgroundColor: '#c8e8fa',
    // backgroundColor: '#f0f0f0',
    boxShadow: '0 0 10px rgba(0,0,0,0.2)',
    display:"flex",
    flexDirection:"column",
    justifyContent:"center",
    alignItems:"center",
    minWidth:"400px",
    maxWidth:"600px"
  }}
  buttonStyle={{
    backgroundColor: '#ff5722',
    borderRadius: '20px',
   boxShadow:"5px 5px 1px green",
  }}
  onSubmit={(otp) => {
    console.log('OTP:', otp);
    // Handle OTP verification
  }}
/>

// Forgot Password
<CustomizableForgotPassword
  resetMethod="phone"
  onSendOTP={async (identifier) => {
    // API call to send OTP
    return true; // return success status
  }}
  onVerifyOTP={async (otp) => {
    // API call to verify OTP
    return true; // return success status
  }}
  onResetPassword={async (newPassword) => {
    // API call to reset password
    // Handle success/error
  }}
  inputStyle={{
    backgroundColor: '#ffffff',
    border: '1px solid #ddd',
    width:"340px"
  }}
  customStyles={{
    email: { borderColor: '#ddd' },
    password: { borderColor: '#ddd' },
    otpInput: { backgroundColor: '#f5f5f5' }
  }}
  containerStyle={{
    backgroundColor: '#c8e8fa',
    // backgroundColor: '#f0f0f0',
    boxShadow: '0 0 10px rgba(0,0,0,0.2)',
    display:"flex",
    flexDirection:"column",
    justifyContent:"center",
    alignItems:"center",
    minWidth:"400px",
    maxWidth:"600px"
  }}
  
  buttonStyle={{
    backgroundColor: '#ff5722',
    borderRadius: '20px',
     width:"340px",
   boxShadow:"5px 5px 1px green",
  }}
/>

Props

CustomizableLogin

... Add documentation for other components ...

License

MIT © Kickrtechnology