Add onError callback for API errors (#118)

.

Author: hwhmeikle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authsignal/browser",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

src/authsignal.ts

@@ -161,7 +161,7 @@ export class Authsignal {
   }
 
   private launchWithPopup(url: string, options: PopupLaunchOptions) {
-    const {popupOptions} = options;
+    const {popupOptions, onError} = options;
 
     const popupHandler = new PopupHandler({
       width: popupOptions?.width,
@@ -170,13 +170,16 @@ export class Authsignal {
     });
 
     const popupUrl = `${url}&mode=popup`;
+    const expectedOrigin = new URL(url).origin;
 
-    popupHandler.show({url: popupUrl});
+    popupHandler.show({url: popupUrl, expectedOrigin});
 
     return new Promise<TokenPayload>((resolve) => {
       let token: string | undefined = undefined;
 
       const onMessage = (event: MessageEvent) => {
+        if (event.origin !== expectedOrigin) return;
+
         let data: AuthsignalWindowMessageData | null = null;
 
         try {
@@ -185,6 +188,10 @@ export class Authsignal {
           // Ignore if the event data is not valid JSON
         }
 
+        if (data?.event === AuthsignalWindowMessage.AUTHSIGNAL_API_ERROR) {
+          onError?.({errorCode: data.errorCode, statusCode: data.statusCode});
+        }
+
         if (data?.event === AuthsignalWindowMessage.AUTHSIGNAL_CLOSE_POPUP) {
           token = data.token;
 
@@ -201,16 +208,19 @@ export class Authsignal {
   }
 
   private launchWithWindow(url: string, options: WindowLaunchOptions) {
-    const {windowOptions} = options;
+    const {windowOptions, onError} = options;
 
     const windowHandler = new WindowHandler();
 
     const windowUrl = `${url}&mode=popup`;
+    const expectedOrigin = new URL(url).origin;
 
     windowHandler.show({url: windowUrl, width: windowOptions?.width, height: windowOptions?.height});
 
     return new Promise<TokenPayload>((resolve) => {
       const onMessage = (event: MessageEvent) => {
+        if (event.origin !== expectedOrigin) return;
+
         let data: AuthsignalWindowMessageData | null = null;
 
         try {
@@ -219,6 +229,10 @@ export class Authsignal {
           // Ignore if the event data is not valid JSON
         }
 
+        if (data?.event === AuthsignalWindowMessage.AUTHSIGNAL_API_ERROR) {
+          onError?.({errorCode: data.errorCode, statusCode: data.statusCode});
+        }
+
         if (data?.event === AuthsignalWindowMessage.AUTHSIGNAL_CLOSE_POPUP) {
           windowHandler.close();
           resolve({token: data.token});

src/handlers/popup-handler.ts

@@ -12,6 +12,7 @@ const INITIAL_HEIGHT = "384px";
 
 type PopupShowInput = {
   url: string;
+  expectedOrigin: string;
 };
 
 type PopupHandlerOptions = {
@@ -23,6 +24,7 @@ type PopupHandlerOptions = {
 export class PopupHandler {
   private popup: A11yDialog | null = null;
   private height: string | undefined;
+  private resizeListener: ((event: MessageEvent) => void) | null = null;
 
   constructor({width, height, isClosable}: PopupHandlerOptions) {
     if (document.querySelector(`#${CONTAINER_ID}`)) {
@@ -138,10 +140,13 @@ export class PopupHandler {
       document.head.removeChild(styleEl);
     }
 
-    window.removeEventListener("message", resizeIframe);
+    if (this.resizeListener) {
+      window.removeEventListener("message", this.resizeListener);
+      this.resizeListener = null;
+    }
   }
 
-  show({url}: PopupShowInput) {
+  show({url, expectedOrigin}: PopupShowInput) {
     if (!this.popup) {
       throw new Error("Popup is not initialized");
     }
@@ -163,7 +168,12 @@ export class PopupHandler {
 
     // Dynamic resizing if no height is set.
     if (!this.height) {
-      window.addEventListener("message", resizeIframe);
+      this.resizeListener = (event: MessageEvent) => {
+        if (event.origin !== expectedOrigin) return;
+        resizeIframe(event);
+      };
+
+      window.addEventListener("message", this.resizeListener);
     }
 
     this.popup?.show();

src/types.ts

@@ -28,6 +28,10 @@ export type PopupLaunchOptions = BaseLaunchOptions & {
      */
     isClosable?: boolean;
   };
+  /**
+   * Called when an API error occurs in the pre-built UI.
+   */
+  onError?: (params: {errorCode?: string; statusCode?: number}) => void;
 };
 
 export type WindowLaunchOptions = BaseLaunchOptions & {
@@ -36,6 +40,10 @@ export type WindowLaunchOptions = BaseLaunchOptions & {
     width?: number;
     height?: number;
   };
+  /**
+   * Called when an API error occurs in the pre-built UI.
+   */
+  onError?: (params: {errorCode?: string; statusCode?: number}) => void;
 };
 
 export type LaunchOptions = RedirectLaunchOptions | PopupLaunchOptions | WindowLaunchOptions;
@@ -64,11 +72,14 @@ export type AuthsignalOptions = {
 
 export enum AuthsignalWindowMessage {
   AUTHSIGNAL_CLOSE_POPUP = "AUTHSIGNAL_CLOSE_POPUP",
+  AUTHSIGNAL_API_ERROR = "AUTHSIGNAL_API_ERROR",
 }
 
 export type AuthsignalWindowMessageData = {
   event: AuthsignalWindowMessage;
-  token: string;
+  token?: string;
+  errorCode?: string;
+  statusCode?: number;
 };
 
 export type TokenPayload = {