How to display logged in user's info into widget?

Developers
1

How to ensure that the chat updates with user details (name, email) when they log in.
Similarly, chat sessions is cleared when users log out.
Also when the user switches different languages how to load the widget with translation without reloading?
Here is my code :

// @ts-ignore
import TawkMessengerReact from '@tawk.to/tawk-messenger-react';
import CryptoJS from 'crypto-js';
import { useCallback, useEffect, useRef } from 'react';

interface ITawkComponent {
  authUser: any;
  lang: string;
}

declare global {
  interface Window {
    Tawk_API: any; // Adjust the type accordingly if you have more specific information about the Tawk API
  }
}

function hashInBase64(userId: string): string {
  const secretKey = 'b4a7d6783ff8**********f3c952d2a561dba883';
  const hash = CryptoJS.HmacSHA256(userId, secretKey);
  const hashInBase64 = CryptoJS.enc.Hex.stringify(hash);
  return hashInBase64;
}

const TawkComponent: React.FC<ITawkComponent> = ({ authUser, lang }) => {
  const tawkMessengerRef = useRef<any>();

  const loginToTawk = useCallback(() => {
    const userId = localStorage.getItem('userId');    //example : JLT6XX4MEFVS
    const userName = localStorage.getItem('userName');
    const userEmail = localStorage.getItem('userEmail');
    if (!userId || !userName || !userEmail) return; // Check if user information is available

    const hash = hashInBase64(userId);

    window.Tawk_API = window.Tawk_API || {};
    window.Tawk_API.login(
      {
        hash: hash,
        userId: userId,
        name: userName,
        email: userEmail,
      },
      function (error: any) {
        if (error) {
          console.error('Error occurred while logging in to Tawk:', error);
          // Handle error if needed
        } else {
          console.log('User logged in to Tawk successfully');
          // You can add further actions if login is successful
        }
      }
    );
  }, []);

  const onChatMaximized = useCallback(() => {
    loginToTawk();
  }, [loginToTawk]);

  useEffect(() => {
    const script = document.createElement('script');
    script.async = true;
    script.charset = 'UTF-8';
    script.setAttribute('crossorigin', '*');

    const widgetId = lang === 'en' || lang === 'de' ? '1g***d3ld' : '1ge***ccu';
    script.src = `https://embed.tawk.to/633605c******e12d8979f6c/${widgetId}`;

    script.onload = () => {
      window.Tawk_API = window.Tawk_API || {};
      window.Tawk_API.onLoad = () => {
        // Additional logic on Tawk load if needed
      };
    };

    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, [lang]);

  return (
    <>
      {authUser ? (
        <TawkMessengerReact
          propertyId='633605c******e12d8979f6c'
          widgetId={lang === 'en' || lang === 'de' ? '1g***d3ld' : '1ge***ccu'}
          ref={tawkMessengerRef}
          onChatMaximized={onChatMaximized}
        />
      ) : (
        <TawkMessengerReact
          propertyId='633605c******e12d8979f6c'
          widgetId={lang === 'en' || lang === 'de' ? '1g***d3ld' : '1ge***ccu'}
          ref={tawkMessengerRef}
        />
      )}
    </>
  );
};

export default TawkComponent;

I tried this way but it does not work.