[ID-1091]call confirmation screen logout (#882)

packages/passport/sdk/src/Passport.test.ts

@@ -3,6 +3,7 @@ import { ImmutableXClient } from '@imtbl/immutablex-client';
 import { MultiRollupApiClients } from '@imtbl/generated-clients';
 import AuthManager from './authManager';
 import MagicAdapter from './magicAdapter';
+import { ConfirmationScreen } from './confirmation';
 import { Passport } from './Passport';
 import { PassportImxProvider, PassportImxProviderFactory } from './starkEx';
 import { Networks, OidcConfiguration } from './types';
@@ -11,6 +12,7 @@ import { mockUser, mockLinkedAddresses } from './test/mocks';
 jest.mock('./authManager');
 jest.mock('./magicAdapter');
 jest.mock('./starkEx');
+jest.mock('./confirmation');
 jest.mock('@imtbl/generated-clients');
 
 const oidcConfiguration: OidcConfiguration = {
@@ -28,6 +30,7 @@ describe('Passport', () => {
   let logoutMock: jest.Mock;
   let magicLoginMock: jest.Mock;
   let magicLogoutMock: jest.Mock;
+  let confirmationLogoutMock: jest.Mock;
   let getUserMock: jest.Mock;
   let requestRefreshTokenMock: jest.Mock;
   let loginSilentMock: jest.Mock;
@@ -39,6 +42,7 @@ describe('Passport', () => {
     authLoginMock = jest.fn().mockReturnValue(mockUser);
     loginCallbackMock = jest.fn();
     magicLoginMock = jest.fn();
+    confirmationLogoutMock = jest.fn();
     magicLogoutMock = jest.fn();
     logoutMock = jest.fn();
     getUserMock = jest.fn();
@@ -55,6 +59,9 @@ describe('Passport', () => {
       loginSilent: loginSilentMock,
       requestRefreshTokenAfterRegistration: requestRefreshTokenMock,
     });
+    (ConfirmationScreen as jest.Mock).mockReturnValue({
+      logout: confirmationLogoutMock,
+    });
     (MagicAdapter as jest.Mock).mockReturnValue({
       login: magicLoginMock,
       logout: magicLogoutMock,
@@ -158,6 +165,7 @@ describe('Passport', () => {
       await passport.logout();
 
       expect(logoutMock).toBeCalledTimes(1);
+      expect(confirmationLogoutMock).toBeCalledTimes(1);
       expect(magicLogoutMock).toBeCalledTimes(1);
     });
   });

packages/passport/sdk/src/Passport.ts

@@ -117,7 +117,7 @@ export class Passport {
 
   public async logout(): Promise<void> {
     await this.authManager.logout();
-
+    await this.confirmationScreen.logout();
     // Code after this point is only executed if the logout mode is silent
     await this.magicAdapter.logout();
     this.passportEventEmitter.emit(PassportEvents.LOGGED_OUT);

packages/passport/sdk/src/confirmation/confirmation.test.ts

@@ -7,6 +7,7 @@ import ConfirmationScreen from './confirmation';
 import SpyInstance = jest.SpyInstance;
 import { testConfig } from '../test/mocks';
 import { PassportConfiguration } from '../config';
+import { PASSPORT_EVENT_TYPE, ReceiveMessage } from './types';
 
 let windowSpy: SpyInstance;
 const closeMock = jest.fn();
@@ -70,6 +71,26 @@ describe('confirmation', () => {
     });
   });
 
+  describe('logout', () => {
+    it('should logout the confirmation screen', async () => {
+      const mockedSuccessReturnValue = {
+        origin: testConfig.passportDomain,
+        data: {
+          eventType: PASSPORT_EVENT_TYPE,
+          messageType: ReceiveMessage.LOGOUT_SUCCESS,
+        },
+      };
+      addEventListenerMock
+        .mockImplementationOnce((event, callback) => {
+          callback(mockedSuccessReturnValue);
+        });
+
+      const result = await confirmationScreen.logout();
+
+      expect(addEventListenerMock).toHaveBeenCalledTimes(1);
+      expect(result.logout).toEqual(true);
+    });
+  });
   describe('requestConfirmation', () => {
     it('should handle popup window opened', async () => {
       const transactionId = 'transactionId123';

packages/passport/sdk/src/confirmation/confirmation.ts

@@ -12,6 +12,9 @@ const CONFIRMATION_WINDOW_HEIGHT = 380;
 const CONFIRMATION_WINDOW_WIDTH = 480;
 const CONFIRMATION_WINDOW_CLOSED_POLLING_DURATION = 1000;
 
+export const CONFIRMATION_IFRAME_ID = 'passport-confirm';
+export const CONFIRMATION_IFRAME_STYLE = 'display: none; position: absolute;width:0px;height:0px;border:0;';
+
 type MessageHandler = (arg0: MessageEvent) => void;
 
 export default class ConfirmationScreen {
@@ -127,6 +130,33 @@ export default class ConfirmationScreen {
     this.confirmationWindow?.close();
   }
 
+  logout(): Promise<{ logout: boolean }> {
+    return new Promise((resolve, rejects) => {
+      const iframe = document.createElement('iframe');
+      iframe.setAttribute('id', CONFIRMATION_IFRAME_ID);
+      iframe.setAttribute('src', `${this.config.passportDomain}/transaction-confirmation/logout`);
+      iframe.setAttribute('style', CONFIRMATION_IFRAME_STYLE);
+      const logoutHandler = ({ data, origin }: MessageEvent) => {
+        if (
+          origin !== this.config.passportDomain
+          || data.eventType !== PASSPORT_EVENT_TYPE
+        ) {
+          return;
+        }
+        window.removeEventListener('message', logoutHandler);
+        iframe.remove();
+
+        if (data.messageType === ReceiveMessage.LOGOUT_SUCCESS) {
+          resolve({ logout: true });
+        }
+        rejects(new Error('Unsupported logout type'));
+      };
+
+      window.addEventListener('message', logoutHandler);
+      document.body.appendChild(iframe);
+    });
+  }
+
   showConfirmationScreen(href: string, messageHandler: MessageHandler, resolve: Function) {
     this.confirmationWindow!.location.href = href;
     // https://stackoverflow.com/questions/9388380/capture-the-close-event-of-popup-window-in-javascript/48240128#48240128

packages/passport/sdk/src/confirmation/types.ts

@@ -4,6 +4,7 @@ export enum ReceiveMessage {
   TRANSACTION_ERROR = 'transaction_error',
   MESSAGE_CONFIRMED = 'message_confirmed',
   MESSAGE_REJECTED = 'message_rejected',
+  LOGOUT_SUCCESS = 'logout_success',
 }
 
 export type ConfirmationResult = {