Login Component

Intro

The LoginComponent serves as a powerful solution for session management on web pages. It facilitates user login/registration and manages user sessions. When a user is not logged in (as determined by the absence of a sessionKey in the local storage), this component can be utilized to prompt users to login or register. Upon successful login or registration, the component updates the sessionKey in local storage and fires a sessionUpdate event.

The login component lives on every 3B Portal page and monitors for active user sessions. Currently this component cannot be overriden in a 3B Portal context.

Attributes

User Settings

• user-id: The unique ID of the user.

Interface Configuration

• backdrop: Determines whether a backdrop appears behind the login component when it's active (true by default).
• allowRegistration: If set to true, allows users to register (default is true).
• allowPassReset: If set to true, allows users to reset their passwords (default is true).

Label Customization

The component offers a range of labels that can be customized to fit your brand or language requirements. Some examples include:

• labelGeneralError: Message displayed when a generic error occurs.
• labelNoUserFound: Message displayed when a user is not found.
• ... (and many more label attributes for various functionalities).

Implementation Guide

1. Checking for an Active Session

Before allowing users to perform certain actions, such as applying for a job, you need to check whether they have an active session. To determine this:

if (!localStorage.getItem('sessionKey')) {
    // User is not logged in
}

2. Embedding the LoginComponent

if (!localStorage.getItem('sessionKey')) {
    const loginComponent = document.createElement('login-component');
    document.body.appendChild(loginComponent);
}

3. Listening for the Session Update

The LoginComponent dispatches a custom event named sessionUpdate once the user successfully logs in or registers. By listening for this event, you can take subsequent actions:

document.addEventListener('sessionUpdate', (event) => {
    console.log('Received session update:', event.detail);
    // Now you can perform actions like loading the job application form or any other user-specific content.
});

4. Using the Session Key with Other 3B Components

All other 3B components rely on the sessionKey in local storage to identify the user. Once the LoginComponent sets this key, other components can seamlessly recognize the user and deliver personalized content or functionalities.

Session Key

The login component generates a sessionKey, a hashed cookie-like string that sticks to the user's browser and has a set expiration date. The Login Component has the ability to check the validity of the sessionKey, and through Apex, developers can also use the sessionKey to extract the contact Id of the logged in user: RemoteUtils.getContextUserContactId(String sessionkey);

Login, Register and Reset Password

The login component allows user login, by using a Contacts for authentication. Here's a map of the fields involved in the authentication:

- Username is the Contact.Email

- Password is the Contact.b3p__Password__c,

- Veri Code (verification code) is the Contact.b3p__Temporary_Password__c

Note, that when the user requests password reset, the field b3p__Temporary_Password__c is set to a numerical value. The implementation team/developers would need to create a Flow/Automation to send an email to the Candidate with the value from that field. Each un-successful attempt to verify the veri-code will issue a new veri-code, so a new email should be sent.

Error Messages

Name	Label	Meaning	Action
Auth_WrongPassword	Invalid or wrong password.	Contact's password is blank or the request sent a blank password	Make sure that the contact has a password set in the b3p__Password__c field. If the issue persists even after ensuring that there is a password, contact 3B Support
Auth_InvalidUsername	Looks like you are not registered	We didn't find any contacts in the system with the requested email or the request to the server was made without a username	Make sure that the contact has an Email set in the Email field. If the issue persists even after ensuring that there is a password, contact 3B Support
Auth_InvalidUsernamePassword	Invalid username or password	The password entered by the user was incorrect	User needs to reset password
DMLException	An error displayed when user attempts to reset their password	When a user attempts to reset their password, we are setting the veri code to the b3p__Temporary_Password__c field. Validation rules or failing automations could prevent this.	Check for validation rules, flows, apex code or other automations that may prevent the user's contact from being updated.
Portal_InvalidTempPass	The provided verification code is invalid. Try again.	The user has entered a verification code that is invalid or old. The b3p__Temporary_Password__c field will be updated with a new verification code and the user can try again.	User needs to enter a valid verification code.
Auth_AlreadyRegistered	Looks like you are already registered. Try changing your password.	User attempted to register, but we identified that they already exist in the system.	User should attempt to reset password

Pre-populating the Login Form

You can pre-populate the fields on the login form by passing URL parameters to the Portal page that requires user login (only works if the user is not logged in already). Here are the parameters and their possible values:

• frontDoor - you can pass: register | resetPass | confirmPassReset | login (default)
• username - the user's email
• vericode - the verification code

So, to make it easier for user re-setting their password, you can forward them to a url that looks like this:

https://company.salesforce.com/onboarding#Page?frontDoor=confirmPassReset&username=test@email.com&vericode=1234

Adding Fields to Registration Form

It is not possible to add additional fields to the registration form.

Conclusion

By integrating the LoginComponent into your web page, you establish an effective session management mechanism that enhances user experience. It ensures users are properly authenticated before granting them access to specific functionalities. Always make sure to listen for the sessionUpdate event to stay informed about changes in the user's session status.