Best approach to use Auth.logout

[Jorge_R]

Hello,

We currently have an authenticated web messenger deployed in our React environment. Is there a way where we can add the Genesys logout command in our unifiedSignout (see below) hook? With current implementation since the command registration happens after a check of typeof Genesys === 'undefined'. This condition will never be true when we are logging out and hence we will not parse through to execute logout command OR is there any other way to call logout command in stand alone way.

Genesys Script

import { useEffect } from 'react';
import { useUnifiedSignout } from 'lib/hooks/useUnifiedSignout';
export const GenesysScript = ({ id, name, authCode }) => {
  const { logOutClicked } = useUnifiedSignout();
  useEffect(() => {
    console.log('----logOutClicked value is-------');
    console.log(logOutClicked);
    // Wait for the Genesys library to initialize and establish WebSocket connection
    if (typeof Genesys === 'undefined') {
      // Genesys initialization code
      (function(g, e, n, es, ys) {
        g['_genesysJs'] = e;
        g[e] =
          g[e] ||
          function() {
            (g[e].q = g[e].q || []).push(arguments);
          };
        g[e].t = 1 * new Date();
        g[e].c = es;
        ys = document.createElement('script');
        ys.async = 1;
        ys.src = n;
        ys.charset = 'utf-8';
        document.head.appendChild(ys);
      })(
        window,
        'Genesys',
        'https://apps.usw2.pure.cloud/genesys-bootstrap/genesys.min.js',
        {
          environment: process.env.REACT_APP_GENESYS_ENVIRONMENT,
          deploymentId: process.env.REACT_APP_GENESYS_DEPLOYMENT_ID,
          debug: true
        }
      );
      // eslint-disable-next-line no-undef
      Genesys('registerPlugin', 'AuthProvider', AuthProvider => {
        /* Register Command - mandatory */
        AuthProvider.registerCommand('getAuthCode', e => {
          e.resolve({
            authCode: authCode,
            redirectUri: process.env.REACT_APP_AUTH0_FDR_CALLBACK_URL,
            iss: process.env.REACT_APP_AUTH0_FDR_ISSUER_URL
          });
        });
        AuthProvider.registerCommand('reAuthenticate', e => {
          e.resolve();
        });
        //logs out from genesys session
        if (logOutClicked) {
          console.log('-------it should appear here-');
          AuthProvider.command('Auth.logout');
        }
        /* Subscribe to Auth plugin events */
        AuthProvider.subscribe('Auth.loggedOut', () => {
          console.log('------adding event for testing---');
          // This event is published across the browser tabs/devices where the user is logged in, so you can do something on logout.
          // For example, clear any authenticated flags that you might have set during login.
        });

        // Tell Messenger that your plugin is ready (mandatory)
        AuthProvider.ready();
      });

      // Call the Genesys function after the delay
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        Genesys('command', 'Database.set', {
          messaging: {
            customAttributes: {
              SF_URLPop: id,
              name: name
            }
          }
        });
      }, 100);
    }
  }, [id, name, authCode, logOutClicked]);
  return null;
};

useUnifiedSignOut script

import { useCallback, useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { useAuth as useFirebaseAuth } from 'lib/hooks/useAuth';

export function useUnifiedSignout() {
  const auth0 = useAuth0();
  const firebase = useFirebaseAuth();
  const [logOutClicked, setLogOutClicked] = useState(false);

  /** Sign out user on both Firebase and Auth0 */
  const unifiedSignout = useCallback(
    (returnToPath = '') => {
      // validates the returnToPath is a string in case
      // signout is passed directly to an onClick handler
      // when this happens signout receives an event object, not a string
      if (typeof returnToPath !== 'string') {
        returnToPath = '';
      }

      // the path the user will be forwarded to after signing out
      const returnTo = returnToPath
        ? window.location.origin + returnToPath
        : undefined;

      setLogOutClicked(true); // Set the flag before initiating logout
      console.log('----from unified sign out page----');
      console.log(logOutClicked);
      firebase
        .signout()
        .then(() => {
          return auth0.logout({
            returnTo
          });
        })
        .catch(e => {
          console.error('Error signing out of Firebase', e);
          window.location.reload();
        });
    },
    // Only want to create this function once
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );

  return { signout: unifiedSignout, logOutClicked };
}

Thank you,

Jorge R