@imtbl/auth 2.10.7-alpha.3 → 2.10.7-alpha.4

package/src/overlay/{confirmationOverlay.ts → loginPopupOverlay.ts}

@@ -2,7 +2,7 @@ import { PopupOverlayOptions } from '../types';
 import { PASSPORT_OVERLAY_CLOSE_ID, PASSPORT_OVERLAY_TRY_AGAIN_ID } from './constants';
 import { addLink, getBlockedOverlay, getGenericOverlay } from './elements';
 
-export default class ConfirmationOverlay {
+export default class LoginPopupOverlay {
   private disableGenericPopupOverlay: boolean;
 
   private disableBlockedPopupOverlay: boolean;

package/src/types.ts

@@ -126,3 +126,33 @@ export type DirectLoginOptions = {
   marketingConsentStatus?: MarketingConsentStatus;
   email?: string;
 };
+
+/**
+ * Extended login options with caching and silent login support
+ */
+export type LoginOptions = {
+  /** If true, attempts to use cached session without user interaction */
+  useCachedSession?: boolean;
+  /** If true, attempts silent authentication (force token refresh) */
+  useSilentLogin?: boolean;
+  /** If true, uses redirect flow instead of popup flow */
+  useRedirectFlow?: boolean;
+  /** Direct login options (social provider, email, etc.) */
+  directLoginOptions?: DirectLoginOptions;
+};
+
+/**
+ * Authentication events emitted by the Auth class
+ */
+export enum AuthEvents {
+  LOGGED_OUT = 'loggedOut',
+  LOGGED_IN = 'loggedIn',
+}
+
+/**
+ * Event map for typed event emitter
+ */
+export interface AuthEventMap extends Record<string, any> {
+  [AuthEvents.LOGGED_OUT]: [];
+  [AuthEvents.LOGGED_IN]: [User];
+}

package/src/utils/typedEventEmitter.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from 'events';
+
+export default class TypedEventEmitter<TEvents extends Record<string, any>> {
+  private emitter = new EventEmitter();
+
+  emit<TEventName extends keyof TEvents & string>(
+    eventName: TEventName,
+    ...eventArg: TEvents[TEventName]
+  ) {
+    this.emitter.emit(eventName, ...(eventArg as []));
+  }
+
+  on<TEventName extends keyof TEvents & string>(
+    eventName: TEventName,
+    handler: (...eventArg: TEvents[TEventName]) => void,
+  ) {
+    this.emitter.on(eventName, handler as any);
+  }
+
+  removeListener<TEventName extends keyof TEvents & string>(
+    eventName: TEventName,
+    handler: (...eventArg: TEvents[TEventName]) => void,
+  ) {
+    this.emitter.removeListener(eventName, handler as any);
+  }
+}

package/dist/types/confirmation/confirmation.d.ts

@@ -1,28 +0,0 @@
-import * as GeneratedClients from '@imtbl/generated-clients';
-import { ConfirmationResult } from './types';
-import { IAuthConfiguration } from '../config';
-export declare const CONFIRMATION_IFRAME_ID = "passport-confirm";
-export declare const CONFIRMATION_IFRAME_STYLE = "display: none; position: absolute;width:0px;height:0px;border:0;";
-type MessageHandler = (arg0: MessageEvent) => void;
-type MessageType = 'erc191' | 'eip712';
-export default class ConfirmationScreen {
-    private config;
-    private confirmationWindow;
-    private popupOptions;
-    private overlay;
-    private overlayClosed;
-    private timer;
-    constructor(config: IAuthConfiguration);
-    private getHref;
-    requestConfirmation(transactionId: string, etherAddress: string, chainType: GeneratedClients.mr.TransactionApprovalRequestChainTypeEnum, chainId?: string): Promise<ConfirmationResult>;
-    requestMessageConfirmation(messageID: string, etherAddress: string, messageType?: MessageType): Promise<ConfirmationResult>;
-    showServiceUnavailable(): Promise<void>;
-    loading(popupOptions?: {
-        width: number;
-        height: number;
-    }): void;
-    closeWindow(): void;
-    showConfirmationScreen(href: string, messageHandler: MessageHandler, resolve: Function): void;
-    private recreateConfirmationWindow;
-}
-export {};

package/dist/types/confirmation/index.d.ts

@@ -1,3 +0,0 @@
-export { default as ConfirmationScreen } from './confirmation';
-export { default as EmbeddedLoginPrompt } from './embeddedLoginPrompt';
-export * from './types';

package/dist/types/confirmation/popup.d.ts

@@ -1,8 +0,0 @@
-export type PopUpProps = {
-    url: string;
-    title: string;
-    width: number;
-    height: number;
-    query?: string;
-};
-export declare const openPopupCenter: ({ url, title, width, height, }: PopUpProps) => Window;

package/src/confirmation/confirmation.ts

@@ -1,275 +0,0 @@
-import * as GeneratedClients from '@imtbl/generated-clients';
-import { trackError } from '@imtbl/metrics';
-
-import {
-  ConfirmationResult,
-  PASSPORT_CONFIRMATION_EVENT_TYPE,
-  ConfirmationReceiveMessage,
-  ConfirmationSendMessage,
-} from './types';
-import { openPopupCenter } from './popup';
-import { IAuthConfiguration } from '../config';
-import ConfirmationOverlay from '../overlay/confirmationOverlay';
-
-const CONFIRMATION_WINDOW_TITLE = 'Confirm this transaction';
-const CONFIRMATION_WINDOW_HEIGHT = 720;
-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;
-
-type MessageType = 'erc191' | 'eip712';
-
-export default class ConfirmationScreen {
-  private config: IAuthConfiguration;
-
-  private confirmationWindow: Window | undefined;
-
-  private popupOptions: { width: number; height: number } | undefined;
-
-  private overlay: ConfirmationOverlay | undefined;
-
-  private overlayClosed: boolean;
-
-  private timer: NodeJS.Timeout | undefined;
-
-  constructor(config: IAuthConfiguration) {
-    this.config = config;
-    this.overlayClosed = false;
-  }
-
-  private getHref(relativePath: string, queryStringParams?: { [key: string]: any }) {
-    let href = `${this.config.passportDomain}/transaction-confirmation/${relativePath}`;
-
-    if (queryStringParams) {
-      const queryString = queryStringParams
-        ? Object.keys(queryStringParams)
-          .map((key) => `${key}=${queryStringParams[key]}`)
-          .join('&')
-        : '';
-
-      href = `${href}?${queryString}`;
-    }
-
-    return href;
-  }
-
-  requestConfirmation(
-    transactionId: string,
-    etherAddress: string,
-    chainType: GeneratedClients.mr.TransactionApprovalRequestChainTypeEnum,
-    chainId?: string,
-  ): Promise<ConfirmationResult> {
-    return new Promise((resolve, reject) => {
-      const messageHandler = ({ data, origin }: MessageEvent) => {
-        if (
-          origin !== this.config.passportDomain
-          || data.eventType !== PASSPORT_CONFIRMATION_EVENT_TYPE
-        ) {
-          return;
-        }
-
-        switch (data.messageType as ConfirmationReceiveMessage) {
-          case ConfirmationReceiveMessage.CONFIRMATION_WINDOW_READY: {
-            this.confirmationWindow?.postMessage({
-              eventType: PASSPORT_CONFIRMATION_EVENT_TYPE,
-              messageType: ConfirmationSendMessage.CONFIRMATION_START,
-            }, this.config.passportDomain);
-            break;
-          }
-          case ConfirmationReceiveMessage.TRANSACTION_CONFIRMED: {
-            this.closeWindow();
-            resolve({ confirmed: true });
-            break;
-          }
-          case ConfirmationReceiveMessage.TRANSACTION_REJECTED: {
-            this.closeWindow();
-            resolve({ confirmed: false });
-            break;
-          }
-          case ConfirmationReceiveMessage.TRANSACTION_ERROR: {
-            this.closeWindow();
-            reject(new Error('Error during transaction confirmation'));
-            break;
-          }
-          default:
-            this.closeWindow();
-            reject(new Error('Unsupported message type'));
-        }
-      };
-
-      let href = '';
-      if (chainType === GeneratedClients.mr.TransactionApprovalRequestChainTypeEnum.Starkex) {
-        href = this.getHref('transaction', { transactionId, etherAddress, chainType });
-      } else {
-        href = this.getHref('zkevm/transaction', {
-          transactionID: transactionId, etherAddress, chainType, chainID: chainId,
-        });
-      }
-      window.addEventListener('message', messageHandler);
-      this.showConfirmationScreen(href, messageHandler, resolve);
-    });
-  }
-
-  requestMessageConfirmation(
-    messageID: string,
-    etherAddress: string,
-    messageType?: MessageType,
-  ): Promise<ConfirmationResult> {
-    return new Promise((resolve, reject) => {
-      const messageHandler = ({ data, origin }: MessageEvent) => {
-        if (
-          origin !== this.config.passportDomain
-          || data.eventType !== PASSPORT_CONFIRMATION_EVENT_TYPE
-        ) {
-          return;
-        }
-        switch (data.messageType as ConfirmationReceiveMessage) {
-          case ConfirmationReceiveMessage.CONFIRMATION_WINDOW_READY: {
-            this.confirmationWindow?.postMessage({
-              eventType: PASSPORT_CONFIRMATION_EVENT_TYPE,
-              messageType: ConfirmationSendMessage.CONFIRMATION_START,
-            }, this.config.passportDomain);
-            break;
-          }
-          case ConfirmationReceiveMessage.MESSAGE_CONFIRMED: {
-            this.closeWindow();
-            resolve({ confirmed: true });
-            break;
-          }
-          case ConfirmationReceiveMessage.MESSAGE_REJECTED: {
-            this.closeWindow();
-            resolve({ confirmed: false });
-            break;
-          }
-          case ConfirmationReceiveMessage.MESSAGE_ERROR: {
-            this.closeWindow();
-            reject(new Error('Error during message confirmation'));
-            break;
-          }
-          default:
-            this.closeWindow();
-            reject(new Error('Unsupported message type'));
-        }
-      };
-
-      window.addEventListener('message', messageHandler);
-      const href = this.getHref('zkevm/message', {
-        messageID,
-        etherAddress,
-        ...(messageType ? { messageType } : {}),
-      });
-      this.showConfirmationScreen(href, messageHandler, resolve);
-    });
-  }
-
-  showServiceUnavailable(): Promise<void> {
-    return new Promise((_, reject) => {
-      this.showConfirmationScreen(
-        this.getHref('unavailable'),
-        () => {},
-        () => {
-          this.closeWindow();
-          reject(new Error('Service unavailable'));
-        },
-      );
-    });
-  }
-
-  loading(popupOptions?: { width: number; height: number }) {
-    if (this.config.crossSdkBridgeEnabled) {
-      // There is no need to open a confirmation window if cross-sdk bridge is enabled
-      return;
-    }
-
-    this.popupOptions = popupOptions;
-
-    try {
-      this.confirmationWindow = openPopupCenter({
-        url: this.getHref('loading'),
-        title: CONFIRMATION_WINDOW_TITLE,
-        width: popupOptions?.width || CONFIRMATION_WINDOW_WIDTH,
-        height: popupOptions?.height || CONFIRMATION_WINDOW_HEIGHT,
-      });
-      this.overlay = new ConfirmationOverlay(this.config.popupOverlayOptions || {});
-    } catch (error) {
-      // If an error is thrown here then the popup is blocked
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      trackError('passport', 'confirmationPopupDenied', new Error(errorMessage));
-      this.overlay = new ConfirmationOverlay(this.config.popupOverlayOptions || {}, true);
-    }
-
-    this.overlay.append(
-      () => {
-        try {
-          this.confirmationWindow?.close();
-          this.confirmationWindow = openPopupCenter({
-            url: this.getHref('loading'),
-            title: CONFIRMATION_WINDOW_TITLE,
-            width: this.popupOptions?.width || CONFIRMATION_WINDOW_WIDTH,
-            height: this.popupOptions?.height || CONFIRMATION_WINDOW_HEIGHT,
-          });
-        } catch { /* Empty */ }
-      },
-      () => {
-        this.overlayClosed = true;
-        this.closeWindow();
-      },
-    );
-  }
-
-  closeWindow() {
-    this.confirmationWindow?.close();
-    this.overlay?.remove();
-    this.overlay = undefined;
-  }
-
-  showConfirmationScreen(href: string, messageHandler: MessageHandler, resolve: Function) {
-    // If popup blocked, the confirmation window will not exist
-    if (this.confirmationWindow) {
-      this.confirmationWindow.location.href = href;
-    }
-
-    // This indicates the user closed the overlay so the transaction should be rejected
-    if (!this.overlay) {
-      this.overlayClosed = false;
-      resolve({ confirmed: false });
-      return;
-    }
-
-    // https://stackoverflow.com/questions/9388380/capture-the-close-event-of-popup-window-in-javascript/48240128#48240128
-    const timerCallback = () => {
-      if (this.confirmationWindow?.closed || this.overlayClosed) {
-        clearInterval(this.timer);
-        window.removeEventListener('message', messageHandler);
-        resolve({ confirmed: false });
-        this.overlayClosed = false;
-        this.confirmationWindow = undefined;
-      }
-    };
-    this.timer = setInterval(
-      timerCallback,
-      CONFIRMATION_WINDOW_CLOSED_POLLING_DURATION,
-    );
-    this.overlay.update(() => this.recreateConfirmationWindow(href, timerCallback));
-  }
-
-  private recreateConfirmationWindow(href: string, timerCallback: () => void) {
-    try {
-      // Clears and recreates the timer to ensure when the confirmation window
-      // is closed and recreated the transaction is not rejected.
-      clearInterval(this.timer);
-      this.confirmationWindow?.close();
-      this.confirmationWindow = openPopupCenter({
-        url: href,
-        title: CONFIRMATION_WINDOW_TITLE,
-        width: this.popupOptions?.width || CONFIRMATION_WINDOW_WIDTH,
-        height: this.popupOptions?.height || CONFIRMATION_WINDOW_HEIGHT,
-      });
-      this.timer = setInterval(timerCallback, CONFIRMATION_WINDOW_CLOSED_POLLING_DURATION);
-    } catch { /* Empty */ }
-  }
-}

package/src/confirmation/index.ts

@@ -1,3 +0,0 @@
-export { default as ConfirmationScreen } from './confirmation';
-export { default as EmbeddedLoginPrompt } from './embeddedLoginPrompt';
-export * from './types';

package/src/confirmation/popup.ts

@@ -1,41 +0,0 @@
-export type PopUpProps = {
-  url: string;
-  title: string;
-  width: number;
-  height: number;
-  query?: string;
-};
-
-export const openPopupCenter = ({
-  url,
-  title,
-  width,
-  height,
-}: PopUpProps): Window => {
-  const left = Math.max(
-    0,
-    Math.round(window.screenX + (window.outerWidth - width) / 2),
-  );
-  const top = Math.max(
-    0,
-    Math.round(window.screenY + (window.outerHeight - height) / 2),
-  );
-
-  const newWindow = window.open(
-    url,
-    title,
-    `
-      scrollbars=yes,
-      width=${width}, 
-      height=${height}, 
-      top=${top}, 
-      left=${left}
-     `,
-  );
-  if (!newWindow) {
-    throw new Error('Failed to open confirmation screen');
-  }
-
-  newWindow.focus();
-  return newWindow;
-};