# Authentication

# What is it?

The authentication of Huggy Chat allows you to validate the identity of a user who wants to interact with your system. If the user is known, a session is started for them, and their attendance resumes exactly where it left off. You can authenticate the user even if they use different devices to access your system.

The step-by-step to configure the Huggy Chat authentication is divided into three steps:

• Find your secret key on Huggy's Panel
• Generate token needed to authenticate the user
• Include authentication in your system

# Finding the secret key

There is a unique secret key for each Huggy Chat configured on the platform. It works like a digital signature that guarantees all the authentication process security.

To view your secret key, go to the Settings menu on the Huggy Panel, then click on Channels, select the Widget option and choose the desired Huggy Chat. It will appear in the first field of the page, as indicated in the image below:

On this same page, you can also generate a new secret key for your Huggy Chat. We recommend using this option as a security measure if you identify that its confidentiality has been compromised.

# How to generate the authentication token

The next step is to generate the token needed for the authentication process. It will allow your user's unique information to be passed securely to our API, ensuring that the request came from your Huggy Chat.

In our case, they are:

• The secret key from the chosen Huggy Chat
• The HMAC-SHA256 Hash Algorithm

The example below demonstrates how to generate JWT using PHP or JavaScript:

<?php
function encodeStringToBase64($token)
{
    return str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($token));
}
function generateUserHash($userIdentifier, $huggyChatSecretKey): string
{
    $header = json_encode(['typ' => 'JWT', 'alg' => 'HS256']); 
    $payload = json_encode(['jti' => $userIdentifier]); 
    $base64UrlHeader = encodeStringToBase64($header); 
    $base64UrlPayload = encodeStringToBase64($payload); 
    $signature = hash_hmac('sha256', $base64UrlHeader . "." . $base64UrlPayload, $huggyChatSecretKey, true); 
    $base64UrlSignature = encodeStringToBase64($signature); 
    return $base64UrlHeader . "." . $base64UrlPayload . "." . $base64UrlSignature;
}
$userIdentifier = 'myuser@company.com';
$huggyChatSecretKey = 'eca50890942569fbf40f3752e6007f3x';
echo generateUserHash($userIdentifier, $huggyChatSecretKey);
?>

function base64Replace(text) {
    let encoded = CryptoJS.enc.Base64.stringify(text);
    encoded = encoded.replace(/=+$/, '').replace(/\+/g, '-').replace(/\//g, '_');
    return encoded;
}

function generateUserHash(userIdentifier, huggyChatSecretKey) {
    let header = JSON.stringify({
        "typ": 'JWT',
        "alg": 'HS256'
    });
    let payload = JSON.stringify({
        "jti": userIdentifier
    });
    let base64Header = base64Replace(CryptoJS.enc.Utf8.parse(header));
    let base64Payload = base64Replace(CryptoJS.enc.Utf8.parse(payload));
    let part = base64Header + "." + base64Payload;
    let base64Signature = base64Replace(CryptoJS.HmacSHA256(part, huggyChatSecretKey));
    return part + "." + base64Signature;
}

console.log(generateUserHash('myuser@company.com', 'eca50890942569fbf40f3752e6007f3x'));

# Include authentication in your system

You can include authentication in your system in two ways:

• Setting the huggyData global variable
• Using Huggy.login method (does not require page reload)

In either case, you will need to provide two properties: userIdentifier and userHash.

The userIdentifier is a unique identifier of your user. It can be, for example, an email address, a telephone number, or an alphanumeric value. The userHash, in turn, is the authentication token you learned to generate in the previous step.

# Setting the huggyData global variable

Choosing this option, you only need to include the huggyData variable in the global scope of the window object before starting Huggy Chat. See how this can be done:

window.huggyData = {
  userIdentifier: 'user@company.com',
  userHash: 'eyJ0eXAiOiJKV2QiLCJhbGciPiJIUzI1NiJ9.eyJqdGkiOiJ1c2VyMUBjb21wYW55LmNvbSJ9.upuQ_qWcSFWdzIAGjEfSi-v_RvWC-bicTLNyEePPOhY'
}

# Using Huggy.login method

This option offers the possibility to authenticate the user without a page reload. You can declare the method as follows:

Huggy.login({ 
  userIdentifier: 'john@doe.com',
  userHash: 'eyJ0eXAiOiJKV1QiLCJfbGcuOiJIUzI1NiJ9.eyJqdGkiOiJjYXJlb3MuYWd1cWFyQGh1Z2d5LmleIn0.zAqI8oaNPitqy6Eg7aw1LdlWeinT8acPwueQLQc7q70'
}) 

For more information, check HuggyChatLogin object specification.

# Logout the authenticated user session

To log the user out of Huggy Chat, you can use a method we provide called Huggy.logout. It offers some optional parameters to define whether or not Huggy Chat should be reloaded and trigger a callback method if necessary.

# Using Huggy.logout method

//Terminates user session and reloads Huggy Chat
Huggy.logout()

//Produces the same effect as the call without parameters
Huggy.logout(true)

//Terminates the user session, triggers a callback method and reloads Huggy Chat
Huggy.logout(true, function () {
  console.log('Huggy - Human Heat in Digital Attendance')
})

//Terminates user session without reloading Huggy Chat
Huggy.logout(false)

//Terminates the user's session and triggers a callback method (without reloading Huggy Chat)
Huggy.logout(false, function () {
  console.log('Huggy - Human Heat in Digital Attendance')
})

For more information, check HuggyChatLogout object specification.

# Types