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