@kickrtechnologies/authentication v0.0.2

@kickrtechnology/auth-components

A collection of customizable authentication components for React applications.

Installation

npm install @kickrtechnologies/authentication
# or
yarn add @kickrtechnologies/authentication

Components

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

Usage

import { 
  CustomizableLogin, 
  CustomizableSignup,
  CustomizableOTPVerification,
  CustomizableForgotPassword 
} from '@kickrtechnologies/authentication';

// Login Component
function App() {
  return (
     <CustomizableSignup
      url={`/signin`}
      fields={['firstName', 'lastName', 'email', 'phone',"password"]}
      customStyles={{
        firstName: { borderColor: 'blue' },
        lastName: { borderColor: 'green' },
      }}
      containerStyle={{
        backgroundColor: '#c8e8fa',
        
        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',
      }}
      secret_id="fewieioei"
      licenseKey="PAID_LICENSE_KEY"
    /> 

    <CustomizableLogin  
     url={`/dashboard`}
   containerStyle={{
        backgroundColor: '#c8e8fa',
       
        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}
      secret_id="fewieioei"
      licenseKey="PAID_LICENSE_KEY"  loginMethod = 'email' /> 
    

 <CustomizableProfile 
  fields={['firstName', 'lastName', 'city', 'location']}
  customStyles={{
    bio: { height: '100px' }
  }}
  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",
  }}
  secret_id="fewieioei"
  token={count}
  
  
/> 

    <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",
  }}
  
/> 

 <CustomizableForgotPassword
  resetMethod="email"
  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