[AUT-117] - Add modal support for enrolment (#10)

src/authsignal-browser.ts

@@ -0,0 +1,88 @@
+import {v4 as uuidv4} from "uuid";
+
+import {setCookie, getCookieDomain, getCookie} from "./helpers";
+import {AuthsignalOptions, AuthsignalWindowMessage, MfaInput, ChallengeInput, LaunchOptions} from "./types";
+import {PopupHandler} from "./popup-handler";
+
+const DEFAULT_ENDPOINT = "https://mfa.authsignal.com/";
+const DEFAULT_COOKIE_NAME = "__as_aid";
+
+export class AuthsignalBrowser {
+ anonymousId = "";
+ cookieDomain = "";
+ anonymousIdCookieName = "";
+ publishableKey = "";
+ endpoint = "";
+
+ constructor({publishableKey, cookieDomain, cookieName, endpoint}: AuthsignalOptions) {
+ this.publishableKey = publishableKey;
+ this.cookieDomain = cookieDomain || getCookieDomain();
+ this.anonymousIdCookieName = cookieName || DEFAULT_COOKIE_NAME;
+ this.endpoint = endpoint || DEFAULT_ENDPOINT;
+
+ const idCookie = getCookie(this.anonymousIdCookieName);
+
+ if (!idCookie) {
+ this.anonymousId = uuidv4();
+
+ setCookie({
+ name: this.anonymousIdCookieName,
+ value: this.anonymousId,
+ expire: Infinity,
+ domain: this.cookieDomain,
+ secure: document.location.protocol !== "http:",
+ });
+ }
+ }
+
+ /**
+ * @deprecated Use launch() instead.
+ */
+ mfa(challenge: {mode?: "redirect"} & MfaInput): undefined;
+ mfa(challenge: {mode: "popup"} & MfaInput): Promise<boolean>;
+ mfa({mode, url}: MfaInput) {
+ if (mode === "popup") {
+ return this.launch(url, {mode});
+ }
+ return this.launch(url, {mode});
+ }
+
+ /**
+ * @deprecated Use launch() instead.
+ */
+ challenge(challenge: {mode?: "redirect"} & ChallengeInput): undefined;
+ challenge(challenge: {mode: "popup"} & ChallengeInput): Promise<boolean>;
+ challenge({mode, challengeUrl: url}: ChallengeInput) {
+ if (mode === "popup") {
+ return this.launch(url, {mode});
+ }
+ return this.launch(url, {mode});
+ }
+
+ launch(url: string, options?: {mode?: "redirect"} & LaunchOptions): undefined;
+ launch(url: string, options?: {mode: "popup"} & LaunchOptions): Promise<boolean>;
+ launch(url: string, options?: LaunchOptions) {
+ const mode = options?.mode || "redirect";
+
+ if (mode === "redirect") {
+ window.location.href = url;
+ } else {
+ const Popup = new PopupHandler();
+
+ Popup.show({url});
+
+ return new Promise<boolean>((resolve) => {
+ const onMessage = (event: MessageEvent) => {
+ if (event.origin === this.endpoint) {
+ if (event.data === AuthsignalWindowMessage.AUTHSIGNAL_CLOSE_POPUP) {
+ Popup.close();
+ resolve(true);
+ }
+ }
+ };
+
+ window.addEventListener("message", onMessage, false);
+ });
+ }
+ }
+}

src/index.ts

@@ -1,2 +1,2 @@
-export {AuthsignalBrowser} from "./AuthsignalBrowser";
+export {AuthsignalBrowser} from "./authsignal-browser";
 export * from "./types";

src/PopupHandler.ts → src/popup-handler.ts

@@ -1,11 +1,14 @@
 import A11yDialog from "a11y-dialog";
-import {Challenge} from "./types";
 
 const CONTAINER_ID = "__authsignal-popup-container";
 const CONTENT_ID = "__authsignal-popup-content";
 const OVERLAY_ID = "__authsignal-popup-overlay";
 const STYLE_ID = "__authsignal-popup-style";
 
+type PopupShowInput = {
+ url: string;
+};
+
 class PopupHandler {
  private popup: A11yDialog | null = null;
 
@@ -48,7 +51,7 @@ class PopupHandler {
  }
 
  #${CONTAINER_ID} {
- z-index: 2;
+ z-index: 2147483647;
  display: flex;
  }
 
@@ -62,7 +65,7 @@ class PopupHandler {
 
  #${CONTENT_ID} {
  margin: auto;
- z-index: 2;
+ z-index: 2147483647;
  position: relative;
  background-color: white;
  height: 600px;
@@ -94,15 +97,15 @@ class PopupHandler {
  }
  }
 
- show({challengeUrl}: {challengeUrl: Challenge["challengeUrl"]}) {
+ show({url}: PopupShowInput) {
  if (!this.popup) {
  throw new Error("Popup is not initialized");
  }
 
  const iframe = document.createElement("iframe");
  iframe.setAttribute("name", "authsignal");
- iframe.setAttribute("title", "Authsignal multi-factor authentication challenge");
- iframe.setAttribute("src", challengeUrl);
+ iframe.setAttribute("title", "Authsignal multi-factor authentication");
+ iframe.setAttribute("src", url);
  iframe.setAttribute("frameborder", "0");
 
  const dialogContent = document.querySelector(`#${CONTENT_ID}`);

src/types.ts

@@ -1,10 +1,15 @@
-export type Challenge = {
+export type ChallengeInput = {
  challengeUrl: string;
  mode?: "popup" | "redirect";
 };
 
-export type Mfa = {
+export type MfaInput = {
  url: string;
+ mode?: "popup" | "redirect";
+};
+
+export type LaunchOptions = {
+ mode?: "popup" | "redirect";
 };
 
 export type AuthsignalOptions = {
@@ -26,4 +31,13 @@ export type AuthsignalOptions = {
  * Name of id cookie. __eventn_id by default
  */
  cookieName?: string;
+
+ /**
+ * A URL pointing to the Authsignal MFA page.
+ */
+ endpoint?: string;
 };
+
+export enum AuthsignalWindowMessage {
+ AUTHSIGNAL_CLOSE_POPUP = "AUTHSIGNAL_CLOSE_POPUP",
+}