@giveindia/loginmodule
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

GiveIndia Development Components

Login Component for Fundraisers

Usage

Installation

  npm i @giveindia/loginmodule
  import LoginModule from '@giveindia/loginmodule'

  // for server side rendered apps, this may result in conflict at compilation. In which case, you could use

  const LoginModule = React.lazy(() => import('@giveindia/loginmodule'))

Standard Usage

  <LoginModule 
    open={true}         
    facebookAppID="required for Facebook Login"
    googleClientID="required for Google Login"        
    OTPLength={4} //Defaults to 4, if nothing provided
    baseURL={`https://yourbase.domain`}  // Defaults to https://staging.letzchange.org
    telCountryCode={'IN'} // Would be value from config.defaults.country_code
    preAuthorize={false}  // Default to false. Select true if you with to show the existing logged in user and allow action to conitnue.
    title="Almost there!" // Defaults to Login. Customized title for the Login Application
    subtitle="Verify yourself"  // Default to <empty_string>. Customized subtitle for the Login Application
    preAuthorize={false}  // Default to false. Select true if you with to show the existing logged in user and allow action to conitnue.
  />

Advanced Usage

To Prefill data on the LoginModule or to show options that user can choose to verify, you can pass an attribute idenfier with values as follows

Option 1: Pre-fill Single Data (Email or Mobile)

  <LoginModule 
    open={true}         
    facebookAppID="required for Facebook Login"
    googleClientID="required for Google Login"        
    OTPLength={4} //Defaults to 4, if nothing provided
    baseURL={`https://yourbase.domain`}  // Defaults to https://staging.letzchange.org
    telCountryCode={'IN'} // Would be value from config.defaults.country_code 
    idenfier={{      
      identifier: 'mobile',
      value: '+918989898989'
    }}   
  />

This would render directly the OTP Entering screen with the value set as what was passed to the Component as shown below

Option 2: Pre-fill Multiple Data (Email and Mobile) allowing user to select

  <LoginModule 
    open={true}         
    facebookAppID="required for Facebook Login"
    googleClientID="required for Google Login"        
    OTPLength={4} //Defaults to 4, if nothing provided
    baseURL={`https://yourbase.domain`}  // Defaults to https://staging.letzchange.org
    telCountryCode={'IN'} // Would be value from config.defaults.country_code 
    idenfier={[
      {
        identifier: 'mobile',
        value: '+918989898989'
      },
      {
        identifier: 'email', 
        value: 'rohitxxx@email.com'
      }
    ]}
  />

This would allow user to select either their Mobile or Phone Input and proceed with Login with the selected data.

Attributes

Attributes Values Required Defaults
open true, false yes true
googleClientID Google Client ID (eg: 12345678910123456.apps.googleusercontent.com) no -
facebookAppID Facebook App ID (eg: 12345678910123456) no -
onSuccess function to handle success response yes -
onFailure function to handle failure response yes -
OTPLength Length of OTP configured for your application no 4
baseURL API Base URL yes {BASE_URL}/api/login
loginMethods Array of login methods for the application.
['EMAIL-OTP', 'PHONE-OTP', 'SOCIAL-FACEBOOK', 'SOCIAL-GOOGLE']
yes {BASE_URL}/api/login

Additional Implementation Guide(s)

Note* For Server side rendered apps, using React.lazy(), you'd have to use Suspense with a fallback to render it at client-side.

import React, { Suspense } from 'react'

<Suspense fallback={<div>Loading...</div>}>
  <LoginModule ... />
</Supsense>

UI Customisation

The Login Component fits in to the width assigned by the the container. For a standard usage, keep the width of the box between 400px to 500px.

Custom Hooks

Hooks that can be used for checking login and failure

  <LoginModule 
    open={true}    
    OTPLength={4} //Defaults to 4, if nothing provided
    onSuccess={onLoginSuccess}
    onFailure={onLoginFailure}
    baseURL="..."  // Defaults to https://staging.letzchange.org
    telCountryCode={'IN'} // Would be value from config.defaults.country_code
  />

You can define a function within your code to check for success or failure during Login.

  const onLoginSuccess = (response) => {
    ...
  }

  // Response from the Component will look like 
  {
    token: '.....',
    user: {
      name: '.....',
      email: '......',
      is_admin: false,
      profile_pic: '....',
      ....
    }
  }

  const onLoginFailure = (response) => {
    ....    
  }

  // Response on failure should will look like
  {
    error: "Error message here",
  }

Configure Additional Information on the Modal

Configurable title, subtitle, supportId, tncLink, privacyLink attributes

 <LoginModule
    title="Almost there!" // Defaults to Login. Customized title for the Login Application
    subtitle="Verify yourself"  // Default to <empty_string>. Customized subtitle for the Login Application
    supportId={supportId} // Pass the support email id (Ex: support@domainName)
    tncLink={tncLink} // Pass the Valid URL redirecting to Terms and conditions page (Ex: https://domainName/terms-conditions)
    privacyLink={privacyLink} // Pass the Valid URL redirecting to Privacy page (Ex: https://domainName/privacy)
    
  />

Package Sidebar

Install

npm i @giveindia/loginmodule

Weekly Downloads

254

Version

2.1.0

License

UNLICENSED

Unpacked Size

601 kB

Total Files

4

Last publish

Collaborators

  • jayanthinathan
  • karthick-give
  • priyankaashok
  • rhit99900
  • manishbhatias