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: '[email protected]'
      }
    ]}
  />

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

Attributes

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)
    
  />