@frontegg/js 6.0.1-alpha.0

package/AdminPortal/index.d.ts

@@ -0,0 +1,4 @@
+export declare class AdminPortal {
+    static show(name?: string): void;
+    static hide(name?: string): void;
+}

package/AdminPortal/index.js

@@ -0,0 +1,11 @@
+import { AppHolder } from '../AppHolder';
+export class AdminPortal {
+  static show(name = 'default') {
+    AppHolder.getInstance(name).showAdminPortal();
+  }
+
+  static hide(name = 'default') {
+    AppHolder.getInstance(name).hideAdminPortal();
+  }
+
+}

package/AdminPortal/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/AdminPortal/index.js",
+  "types": "./index.d.ts"
+}

package/AppHolder/index.d.ts

@@ -0,0 +1,6 @@
+import { FronteggApp } from '../FronteggApp';
+export declare class AppHolder {
+    private static _apps;
+    static setInstance(name: string, app: FronteggApp): void;
+    static getInstance(name: string): FronteggApp;
+}

package/AppHolder/index.js

@@ -0,0 +1,17 @@
+export class AppHolder {
+  static setInstance(name, app) {
+    AppHolder._apps[name] = app;
+  }
+
+  static getInstance(name) {
+    const app = AppHolder._apps[name];
+
+    if (!app) {
+      throw Error(`[${name}] FronteggApp not found`);
+    }
+
+    return app;
+  }
+
+}
+AppHolder._apps = {};

package/AppHolder/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/AppHolder/index.js",
+  "types": "./index.d.ts"
+}

package/CheckoutDialog/index.d.ts

@@ -0,0 +1,5 @@
+import { FronteggCheckoutDialogOptions } from '@frontegg/types';
+export declare class CheckoutDialog {
+    static show(opts: FronteggCheckoutDialogOptions, name?: string): void;
+    static hide(name?: string): void;
+}

package/CheckoutDialog/index.js

@@ -0,0 +1,11 @@
+import { AppHolder } from '../AppHolder';
+export class CheckoutDialog {
+  static show(opts, name = 'default') {
+    AppHolder.getInstance(name).showCheckoutDialog(opts);
+  }
+
+  static hide(name = 'default') {
+    AppHolder.getInstance(name).hideCheckoutDialog();
+  }
+
+}

package/CheckoutDialog/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/CheckoutDialog/index.js",
+  "types": "./index.d.ts"
+}

package/FronteggApp/FronteggApp.d.ts

@@ -0,0 +1,44 @@
+import { EnhancedStore } from '@reduxjs/toolkit';
+import { Dispatch, RootState } from '@frontegg/redux-store';
+import { FronteggAppOptions, FronteggCheckoutDialogOptions, LocalizationsOverrides } from '@frontegg/types';
+declare type FronteggAppContainers = {
+    adminPortalEl: HTMLElement;
+    loginBoxEl: HTMLElement;
+    checkoutDialogEl: HTMLElement;
+    adminPortalContainer: HTMLElement;
+    loginBoxContainer: HTMLElement;
+    checkoutDialogContainer: HTMLElement;
+};
+export declare class FronteggApp {
+    readonly name: string;
+    readonly iframeRendering: boolean;
+    options: FronteggAppOptions;
+    loading: boolean;
+    customElementName: string;
+    adminPortalEl?: HTMLElement;
+    loginBoxEl?: HTMLElement;
+    checkoutDialogEl?: HTMLElement;
+    adminPortalContainer?: HTMLElement;
+    loginBoxContainer?: HTMLElement;
+    checkoutDialogContainer?: HTMLElement;
+    store: Omit<EnhancedStore<RootState>, 'dispatch'> & {
+        dispatch: Dispatch;
+    };
+    loadingListeners: (() => void)[];
+    updateLocalizations?: (localizations: LocalizationsOverrides) => void;
+    constructor(_options: FronteggAppOptions, name: string, iframeRendering?: boolean);
+    loadAdminBoxMetadata: () => Promise<void>;
+    requestAuthorize: () => Promise<void>;
+    initContainers(elements: FronteggAppContainers): Promise<void>;
+    updateLocalizationsSetter: (localizationUpdateFn: (localizations: LocalizationsOverrides) => void) => void;
+    updateMetadata(metadata: FronteggAppOptions['metadata']): void;
+    addOnLoadedListener(listener: () => void): void;
+    loadScript(url: string, component: string): Promise<unknown>;
+    loadLoginBox(): Promise<void>;
+    showAdminPortal(): Promise<void>;
+    hideAdminPortal(): void;
+    showCheckoutDialog(opts: FronteggCheckoutDialogOptions): void;
+    hideCheckoutDialog(): void;
+    close(): void;
+}
+export {};

package/FronteggApp/FronteggApp.js

@@ -0,0 +1,173 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createFronteggStore } from '@frontegg/redux-store';
+import { Metadata } from '@frontegg/types';
+import { formatName } from '../utils';
+import { AppHolder } from '../AppHolder';
+import { fetch as FronteggFetch } from '@frontegg/rest-api';
+export class FronteggApp {
+  constructor(_options, name, iframeRendering = false) {
+    var _this$options$store, _this$options$authOpt, _this$options$authOpt2, _this$options$auditsO;
+
+    this.name = void 0;
+    this.iframeRendering = void 0;
+    this.options = void 0;
+    this.loading = true;
+    this.customElementName = '';
+    this.adminPortalEl = void 0;
+    this.loginBoxEl = void 0;
+    this.checkoutDialogEl = void 0;
+    this.adminPortalContainer = void 0;
+    this.loginBoxContainer = void 0;
+    this.checkoutDialogContainer = void 0;
+    this.store = void 0;
+    this.loadingListeners = [];
+    this.updateLocalizations = void 0;
+
+    this.loadAdminBoxMetadata = async () => {
+      const {
+        Get
+      } = FronteggFetch;
+
+      if (!this.options.metadata) {
+        try {
+          var _data$rows$0$configur, _data$rows, _data$rows$;
+
+          const data = await Get(`/metadata`, {
+            entityName: 'adminBox'
+          });
+          this.options.metadata = (_data$rows$0$configur = data == null ? void 0 : (_data$rows = data.rows) == null ? void 0 : (_data$rows$ = _data$rows[0]) == null ? void 0 : _data$rows$.configuration) != null ? _data$rows$0$configur : {};
+        } catch (e) {
+          console.error('failed to get admin portal metadata', e);
+        }
+      }
+
+      Metadata.set(this.options.metadata, this.name);
+    };
+
+    this.requestAuthorize = async () => {
+      if (!this.options.hostedLoginBox && !this.options.builderMode && this.options.framework !== 'nextjs') {
+        this.store.dispatch({
+          type: 'auth/requestAuthorize',
+          payload: true
+        });
+      }
+    };
+
+    this.updateLocalizationsSetter = localizationUpdateFn => {
+      this.updateLocalizations = localizationUpdateFn;
+    };
+
+    let appName = formatName(name);
+    let customElementName = `frontegg-app-${appName}`;
+    this.iframeRendering = iframeRendering;
+    this.name = appName;
+    this.options = _extends({}, _options, {
+      contextOptions: _extends({
+        requestCredentials: 'include'
+      }, _options.contextOptions)
+    });
+    this.customElementName = customElementName;
+    this.store = (_this$options$store = this.options.store) != null ? _this$options$store : createFronteggStore({
+      context: this.options.contextOptions
+    }, this, this.options.previewMode, (_this$options$authOpt = this.options.authOptions) != null ? _this$options$authOpt : {}, {
+      auth: (_this$options$authOpt2 = this.options.authOptions) != null ? _this$options$authOpt2 : {},
+      audits: (_this$options$auditsO = this.options.auditsOptions) != null ? _this$options$auditsO : {}
+    });
+    AppHolder.setInstance(appName, this);
+  }
+
+  async initContainers(elements) {
+    this.adminPortalEl = elements.adminPortalEl;
+    this.loginBoxEl = elements.loginBoxEl;
+    this.checkoutDialogEl = elements.checkoutDialogEl;
+    this.adminPortalContainer = elements.adminPortalContainer;
+    this.loginBoxContainer = elements.loginBoxContainer;
+    this.checkoutDialogContainer = elements.checkoutDialogContainer;
+
+    try {
+      document.body.classList.add('frontegg-loading');
+    } catch (e) {}
+
+    await Promise.all([this.loadAdminBoxMetadata(), this.requestAuthorize()]);
+
+    if (!this.options.previewMode && !this.options.customLoginBox) {
+      this.loadLoginBox();
+    }
+
+    this.loadScript('http://localhost:3002/index.js', 'FronteggAdminPortal');
+  }
+
+  updateMetadata(metadata) {
+    Metadata.set(metadata, this.name);
+
+    if (metadata != null && metadata.localizations) {
+      var _this$updateLocalizat;
+
+      (_this$updateLocalizat = this.updateLocalizations) == null ? void 0 : _this$updateLocalizat.call(this, metadata.localizations);
+    }
+  }
+
+  addOnLoadedListener(listener) {
+    if (!this.loading) {
+      listener();
+      return;
+    }
+
+    this.loadingListeners.push(listener);
+  }
+
+  loadScript(url, component) {
+    return new Promise((resolve, reject) => {
+      if (window[component]) {
+        resolve(window[component]);
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = url;
+
+      script.onload = () => {
+        resolve(window[component]);
+      };
+
+      script.onerror = e => {
+        console.log('Profile page error', e);
+        reject(e);
+      };
+
+      document.body.append(script);
+    });
+  }
+
+  async loadLoginBox() {
+    const FronteggLoginBox = await this.loadScript('http://localhost:3001/index.js', 'FronteggLoginBox');
+    FronteggLoginBox.render(this.loginBoxEl, {
+      injector: this,
+      options: this.options
+    });
+    this.loading = false;
+    this.loadingListeners.forEach(listener => {
+      try {
+        listener();
+      } catch (e) {}
+    });
+    this.loadingListeners = [];
+  }
+
+  async showAdminPortal() {
+    const FronteggAdminPortal = await this.loadScript('http://localhost:3002/index.js', 'FronteggAdminPortal');
+    FronteggAdminPortal.render(this.adminPortalEl, {
+      injector: this,
+      options: this.options
+    });
+  }
+
+  hideAdminPortal() {}
+
+  showCheckoutDialog(opts) {}
+
+  hideCheckoutDialog() {}
+
+  close() {}
+
+}

package/FronteggApp/index.d.ts

@@ -0,0 +1 @@
+export * from './FronteggApp';

package/FronteggApp/index.js

@@ -0,0 +1 @@
+export * from './FronteggApp';

package/FronteggApp/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/FronteggApp/index.js",
+  "types": "./index.d.ts"
+}

package/HostedLogin/index.d.ts

@@ -0,0 +1,4 @@
+import { User } from '@frontegg/redux-store';
+export declare class HostedLogin {
+    static setAuthentication(isAuthenticated: boolean, accessToken?: string, user?: User, appName?: string): void;
+}

package/HostedLogin/index.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { authActions } from '@frontegg/redux-store';
+import { AppHolder } from '../AppHolder';
+import { ContextHolder } from '@frontegg/rest-api';
+export class HostedLogin {
+  static setAuthentication(isAuthenticated, accessToken, user, appName = 'default') {
+    const app = AppHolder.getInstance(appName);
+
+    if (isAuthenticated && accessToken) {
+      ContextHolder.setAccessToken(accessToken);
+      ContextHolder.setUser(_extends({}, user, {
+        accessToken
+      }));
+      app.store.dispatch(authActions.setState({
+        isLoading: false,
+        isAuthenticated,
+        user
+      }));
+      app.store.dispatch(authActions.loadTenants());
+    } else {
+      ContextHolder.setAccessToken(null);
+      ContextHolder.setUser(null);
+      app.store.dispatch(authActions.setState({
+        isLoading: false,
+        isAuthenticated: false,
+        user: null
+      }));
+    }
+  }
+
+}

package/HostedLogin/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/HostedLogin/index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -0,0 +1,6 @@
+export * from './AppHolder';
+export * from './FronteggApp';
+export * from './HostedLogin';
+export * from './AdminPortal';
+export * from './CheckoutDialog';
+export * from './initialize';

package/index.js

@@ -0,0 +1,11 @@
+/** @license Frontegg v6.0.1-alpha.0
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from './AppHolder';
+export * from './FronteggApp';
+export * from './HostedLogin';
+export * from './AdminPortal';
+export * from './CheckoutDialog';
+export * from './initialize';

package/initialize.d.ts

@@ -0,0 +1,3 @@
+import { FronteggApp } from './FronteggApp';
+import { FronteggAppOptions } from '@frontegg/types';
+export declare const initialize: (options: FronteggAppOptions, name?: string) => FronteggApp;

package/initialize.js

@@ -0,0 +1,110 @@
+import { FronteggApp } from './FronteggApp';
+import { AppHolder } from './AppHolder';
+import { createElement } from './utils';
+export const initialize = (options, name = 'default') => {
+  const createdApp = new FronteggApp(options, name);
+
+  if (typeof document !== 'undefined') {
+    var _document$querySelect;
+
+    if (!customElements.get('frontegg-app')) {
+      class FronteggAppContainer extends HTMLElement {
+        constructor(...args) {
+          super(...args);
+          this.app = null;
+        }
+
+        static get observedAttributes() {
+          return ['app-name'];
+        }
+
+        connectedCallback() {
+          this.updateContent();
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+          if (name === 'app-name') {
+            if (oldValue === null) {
+              return;
+            }
+
+            if (oldValue === newValue) {
+              return;
+            }
+
+            this.innerHTML = '';
+
+            if (newValue === null) {
+              this.remove();
+            } else {
+              this.updateContent();
+            }
+          }
+
+          console.debug('attributeChangedCallback', name, oldValue, newValue);
+        }
+
+        updateContent() {
+          var _this$getAttribute;
+
+          const appName = (_this$getAttribute = this.getAttribute('app-name')) != null ? _this$getAttribute : 'default';
+          const app = AppHolder.getInstance(appName);
+
+          if (app === null) {
+            throw Error(`FronteggApp not found for appName: '${appName}'`);
+          }
+
+          this.setAttribute('id', `frontegg-app-${app.name}`);
+          const adminPortalContainer = createElement(this, 'div', {
+            id: `frontegg-admin-portal-container-${app.name}`
+          });
+          const loginBoxContainer = createElement(this, 'div', {
+            id: `frontegg-login-box-container-${app.name}`
+          });
+          const checkoutDialogContainer = createElement(this, 'div', {
+            id: `frontegg-checkout-dialog-container-${app.name}`
+          });
+          const adminBoxShadowEl = adminPortalContainer.attachShadow({
+            mode: 'open'
+          });
+          const loginBoxShadowEl = loginBoxContainer.attachShadow({
+            mode: 'open'
+          });
+          const checkoutDialogShadowEl = checkoutDialogContainer.attachShadow({
+            mode: 'open'
+          });
+          const adminPortalEl = createElement(adminBoxShadowEl, 'div', {
+            id: `frontegg-admin-portal-${app.name}`,
+            class: 'frontegg-root-content'
+          });
+          const loginBoxEl = createElement(loginBoxShadowEl, 'div', {
+            id: `frontegg-login-box-${app.name}`,
+            class: 'frontegg-root-content'
+          });
+          const checkoutDialogEl = createElement(checkoutDialogShadowEl, 'div', {
+            id: `frontegg-checkout-dialog-${app.name}`,
+            class: 'frontegg-root-content'
+          });
+          app.initContainers({
+            adminPortalEl,
+            loginBoxEl,
+            adminPortalContainer,
+            loginBoxContainer,
+            checkoutDialogContainer,
+            checkoutDialogEl
+          });
+        }
+
+      }
+
+      customElements.define('frontegg-app', FronteggAppContainer);
+    }
+
+    (_document$querySelect = document.querySelector(`frontegg-app[app-name="${createdApp.name}"]`)) == null ? void 0 : _document$querySelect.remove();
+    const element = document.createElement('frontegg-app');
+    element.setAttribute('app-name', createdApp.name);
+    document.body.appendChild(element);
+  }
+
+  return createdApp;
+};

package/node/AdminPortal/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AdminPortal = void 0;
+
+var _AppHolder = require("../AppHolder");
+
+class AdminPortal {
+  static show(name = 'default') {
+    _AppHolder.AppHolder.getInstance(name).showAdminPortal();
+  }
+
+  static hide(name = 'default') {
+    _AppHolder.AppHolder.getInstance(name).hideAdminPortal();
+  }
+
+}
+
+exports.AdminPortal = AdminPortal;

package/node/AppHolder/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppHolder = void 0;
+
+class AppHolder {
+  static setInstance(name, app) {
+    AppHolder._apps[name] = app;
+  }
+
+  static getInstance(name) {
+    const app = AppHolder._apps[name];
+
+    if (!app) {
+      throw Error(`[${name}] FronteggApp not found`);
+    }
+
+    return app;
+  }
+
+}
+
+exports.AppHolder = AppHolder;
+AppHolder._apps = {};

package/node/CheckoutDialog/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckoutDialog = void 0;
+
+var _AppHolder = require("../AppHolder");
+
+class CheckoutDialog {
+  static show(opts, name = 'default') {
+    _AppHolder.AppHolder.getInstance(name).showCheckoutDialog(opts);
+  }
+
+  static hide(name = 'default') {
+    _AppHolder.AppHolder.getInstance(name).hideCheckoutDialog();
+  }
+
+}
+
+exports.CheckoutDialog = CheckoutDialog;

package/node/FronteggApp/FronteggApp.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FronteggApp = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reduxStore = require("@frontegg/redux-store");
+
+var _types = require("@frontegg/types");
+
+var _utils = require("../utils");
+
+var _AppHolder = require("../AppHolder");
+
+var _restApi = require("@frontegg/rest-api");
+
+class FronteggApp {
+  constructor(_options, name, iframeRendering = false) {
+    var _this$options$store, _this$options$authOpt, _this$options$authOpt2, _this$options$auditsO;
+
+    this.name = void 0;
+    this.iframeRendering = void 0;
+    this.options = void 0;
+    this.loading = true;
+    this.customElementName = '';
+    this.adminPortalEl = void 0;
+    this.loginBoxEl = void 0;
+    this.checkoutDialogEl = void 0;
+    this.adminPortalContainer = void 0;
+    this.loginBoxContainer = void 0;
+    this.checkoutDialogContainer = void 0;
+    this.store = void 0;
+    this.loadingListeners = [];
+    this.updateLocalizations = void 0;
+
+    this.loadAdminBoxMetadata = async () => {
+      const {
+        Get
+      } = _restApi.fetch;
+
+      if (!this.options.metadata) {
+        try {
+          var _data$rows$0$configur, _data$rows, _data$rows$;
+
+          const data = await Get(`/metadata`, {
+            entityName: 'adminBox'
+          });
+          this.options.metadata = (_data$rows$0$configur = data == null ? void 0 : (_data$rows = data.rows) == null ? void 0 : (_data$rows$ = _data$rows[0]) == null ? void 0 : _data$rows$.configuration) != null ? _data$rows$0$configur : {};
+        } catch (e) {
+          console.error('failed to get admin portal metadata', e);
+        }
+      }
+
+      _types.Metadata.set(this.options.metadata, this.name);
+    };
+
+    this.requestAuthorize = async () => {
+      if (!this.options.hostedLoginBox && !this.options.builderMode && this.options.framework !== 'nextjs') {
+        this.store.dispatch({
+          type: 'auth/requestAuthorize',
+          payload: true
+        });
+      }
+    };
+
+    this.updateLocalizationsSetter = localizationUpdateFn => {
+      this.updateLocalizations = localizationUpdateFn;
+    };
+
+    let appName = (0, _utils.formatName)(name);
+    let customElementName = `frontegg-app-${appName}`;
+    this.iframeRendering = iframeRendering;
+    this.name = appName;
+    this.options = (0, _extends2.default)({}, _options, {
+      contextOptions: (0, _extends2.default)({
+        requestCredentials: 'include'
+      }, _options.contextOptions)
+    });
+    this.customElementName = customElementName;
+    this.store = (_this$options$store = this.options.store) != null ? _this$options$store : (0, _reduxStore.createFronteggStore)({
+      context: this.options.contextOptions
+    }, this, this.options.previewMode, (_this$options$authOpt = this.options.authOptions) != null ? _this$options$authOpt : {}, {
+      auth: (_this$options$authOpt2 = this.options.authOptions) != null ? _this$options$authOpt2 : {},
+      audits: (_this$options$auditsO = this.options.auditsOptions) != null ? _this$options$auditsO : {}
+    });
+
+    _AppHolder.AppHolder.setInstance(appName, this);
+  }
+
+  async initContainers(elements) {
+    this.adminPortalEl = elements.adminPortalEl;
+    this.loginBoxEl = elements.loginBoxEl;
+    this.checkoutDialogEl = elements.checkoutDialogEl;
+    this.adminPortalContainer = elements.adminPortalContainer;
+    this.loginBoxContainer = elements.loginBoxContainer;
+    this.checkoutDialogContainer = elements.checkoutDialogContainer;
+
+    try {
+      document.body.classList.add('frontegg-loading');
+    } catch (e) {}
+
+    await Promise.all([this.loadAdminBoxMetadata(), this.requestAuthorize()]);
+
+    if (!this.options.previewMode && !this.options.customLoginBox) {
+      this.loadLoginBox();
+    }
+
+    this.loadScript('http://localhost:3002/index.js', 'FronteggAdminPortal');
+  }
+
+  updateMetadata(metadata) {
+    _types.Metadata.set(metadata, this.name);
+
+    if (metadata != null && metadata.localizations) {
+      var _this$updateLocalizat;
+
+      (_this$updateLocalizat = this.updateLocalizations) == null ? void 0 : _this$updateLocalizat.call(this, metadata.localizations);
+    }
+  }
+
+  addOnLoadedListener(listener) {
+    if (!this.loading) {
+      listener();
+      return;
+    }
+
+    this.loadingListeners.push(listener);
+  }
+
+  loadScript(url, component) {
+    return new Promise((resolve, reject) => {
+      if (window[component]) {
+        resolve(window[component]);
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = url;
+
+      script.onload = () => {
+        resolve(window[component]);
+      };
+
+      script.onerror = e => {
+        console.log('Profile page error', e);
+        reject(e);
+      };
+
+      document.body.append(script);
+    });
+  }
+
+  async loadLoginBox() {
+    const FronteggLoginBox = await this.loadScript('http://localhost:3001/index.js', 'FronteggLoginBox');
+    FronteggLoginBox.render(this.loginBoxEl, {
+      injector: this,
+      options: this.options
+    });
+    this.loading = false;
+    this.loadingListeners.forEach(listener => {
+      try {
+        listener();
+      } catch (e) {}
+    });
+    this.loadingListeners = [];
+  }
+
+  async showAdminPortal() {
+    const FronteggAdminPortal = await this.loadScript('http://localhost:3002/index.js', 'FronteggAdminPortal');
+    FronteggAdminPortal.render(this.adminPortalEl, {
+      injector: this,
+      options: this.options
+    });
+  }
+
+  hideAdminPortal() {}
+
+  showCheckoutDialog(opts) {}
+
+  hideCheckoutDialog() {}
+
+  close() {}
+
+}
+
+exports.FronteggApp = FronteggApp;

package/node/FronteggApp/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _FronteggApp = require("./FronteggApp");
+
+Object.keys(_FronteggApp).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FronteggApp[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FronteggApp[key];
+    }
+  });
+});

package/node/HostedLogin/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HostedLogin = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reduxStore = require("@frontegg/redux-store");
+
+var _AppHolder = require("../AppHolder");
+
+var _restApi = require("@frontegg/rest-api");
+
+class HostedLogin {
+  static setAuthentication(isAuthenticated, accessToken, user, appName = 'default') {
+    const app = _AppHolder.AppHolder.getInstance(appName);
+
+    if (isAuthenticated && accessToken) {
+      _restApi.ContextHolder.setAccessToken(accessToken);
+
+      _restApi.ContextHolder.setUser((0, _extends2.default)({}, user, {
+        accessToken
+      }));
+
+      app.store.dispatch(_reduxStore.authActions.setState({
+        isLoading: false,
+        isAuthenticated,
+        user
+      }));
+      app.store.dispatch(_reduxStore.authActions.loadTenants());
+    } else {
+      _restApi.ContextHolder.setAccessToken(null);
+
+      _restApi.ContextHolder.setUser(null);
+
+      app.store.dispatch(_reduxStore.authActions.setState({
+        isLoading: false,
+        isAuthenticated: false,
+        user: null
+      }));
+    }
+  }
+
+}
+
+exports.HostedLogin = HostedLogin;

package/node/index.js

@@ -0,0 +1,88 @@
+/** @license Frontegg v6.0.1-alpha.0
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _AppHolder = require("./AppHolder");
+
+Object.keys(_AppHolder).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AppHolder[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AppHolder[key];
+    }
+  });
+});
+
+var _FronteggApp = require("./FronteggApp");
+
+Object.keys(_FronteggApp).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FronteggApp[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FronteggApp[key];
+    }
+  });
+});
+
+var _HostedLogin = require("./HostedLogin");
+
+Object.keys(_HostedLogin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HostedLogin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HostedLogin[key];
+    }
+  });
+});
+
+var _AdminPortal = require("./AdminPortal");
+
+Object.keys(_AdminPortal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AdminPortal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AdminPortal[key];
+    }
+  });
+});
+
+var _CheckoutDialog = require("./CheckoutDialog");
+
+Object.keys(_CheckoutDialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CheckoutDialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CheckoutDialog[key];
+    }
+  });
+});
+
+var _initialize = require("./initialize");
+
+Object.keys(_initialize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _initialize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _initialize[key];
+    }
+  });
+});

package/node/initialize.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initialize = void 0;
+
+var _FronteggApp = require("./FronteggApp");
+
+var _AppHolder = require("./AppHolder");
+
+var _utils = require("./utils");
+
+const initialize = (options, name = 'default') => {
+  const createdApp = new _FronteggApp.FronteggApp(options, name);
+
+  if (typeof document !== 'undefined') {
+    var _document$querySelect;
+
+    if (!customElements.get('frontegg-app')) {
+      class FronteggAppContainer extends HTMLElement {
+        constructor(...args) {
+          super(...args);
+          this.app = null;
+        }
+
+        static get observedAttributes() {
+          return ['app-name'];
+        }
+
+        connectedCallback() {
+          this.updateContent();
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+          if (name === 'app-name') {
+            if (oldValue === null) {
+              return;
+            }
+
+            if (oldValue === newValue) {
+              return;
+            }
+
+            this.innerHTML = '';
+
+            if (newValue === null) {
+              this.remove();
+            } else {
+              this.updateContent();
+            }
+          }
+
+          console.debug('attributeChangedCallback', name, oldValue, newValue);
+        }
+
+        updateContent() {
+          var _this$getAttribute;
+
+          const appName = (_this$getAttribute = this.getAttribute('app-name')) != null ? _this$getAttribute : 'default';
+
+          const app = _AppHolder.AppHolder.getInstance(appName);
+
+          if (app === null) {
+            throw Error(`FronteggApp not found for appName: '${appName}'`);
+          }
+
+          this.setAttribute('id', `frontegg-app-${app.name}`);
+          const adminPortalContainer = (0, _utils.createElement)(this, 'div', {
+            id: `frontegg-admin-portal-container-${app.name}`
+          });
+          const loginBoxContainer = (0, _utils.createElement)(this, 'div', {
+            id: `frontegg-login-box-container-${app.name}`
+          });
+          const checkoutDialogContainer = (0, _utils.createElement)(this, 'div', {
+            id: `frontegg-checkout-dialog-container-${app.name}`
+          });
+          const adminBoxShadowEl = adminPortalContainer.attachShadow({
+            mode: 'open'
+          });
+          const loginBoxShadowEl = loginBoxContainer.attachShadow({
+            mode: 'open'
+          });
+          const checkoutDialogShadowEl = checkoutDialogContainer.attachShadow({
+            mode: 'open'
+          });
+          const adminPortalEl = (0, _utils.createElement)(adminBoxShadowEl, 'div', {
+            id: `frontegg-admin-portal-${app.name}`,
+            class: 'frontegg-root-content'
+          });
+          const loginBoxEl = (0, _utils.createElement)(loginBoxShadowEl, 'div', {
+            id: `frontegg-login-box-${app.name}`,
+            class: 'frontegg-root-content'
+          });
+          const checkoutDialogEl = (0, _utils.createElement)(checkoutDialogShadowEl, 'div', {
+            id: `frontegg-checkout-dialog-${app.name}`,
+            class: 'frontegg-root-content'
+          });
+          app.initContainers({
+            adminPortalEl,
+            loginBoxEl,
+            adminPortalContainer,
+            loginBoxContainer,
+            checkoutDialogContainer,
+            checkoutDialogEl
+          });
+        }
+
+      }
+
+      customElements.define('frontegg-app', FronteggAppContainer);
+    }
+
+    (_document$querySelect = document.querySelector(`frontegg-app[app-name="${createdApp.name}"]`)) == null ? void 0 : _document$querySelect.remove();
+    const element = document.createElement('frontegg-app');
+    element.setAttribute('app-name', createdApp.name);
+    document.body.appendChild(element);
+  }
+
+  return createdApp;
+};
+
+exports.initialize = initialize;

package/node/utils/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatName = exports.createElement = void 0;
+
+const formatName = name => name.replace(/\W+/g, ' ').split(/ |\B(?=[A-Z])/).map(word => word.toLowerCase()).join('');
+
+exports.formatName = formatName;
+
+const createElement = (container, type, attrs = {}) => {
+  const el = document.createElement(type);
+  Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
+  container.appendChild(el);
+  return el;
+};
+
+exports.createElement = createElement;

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@frontegg/js",
+  "version": "6.0.1-alpha.0",
+  "main": "./node/index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.17.2",
+    "@frontegg/types": "6.0.1-alpha.0"
+  },
+  "sideEffects": false,
+  "private": false,
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}

package/utils/index.d.ts

@@ -0,0 +1,4 @@
+export declare const formatName: (name: string) => string;
+export declare const createElement: (container: HTMLElement | ShadowRoot, type: string, attrs?: {
+    [x: string]: string;
+}) => HTMLElement;

package/utils/index.js

@@ -0,0 +1,7 @@
+export const formatName = name => name.replace(/\W+/g, ' ').split(/ |\B(?=[A-Z])/).map(word => word.toLowerCase()).join('');
+export const createElement = (container, type, attrs = {}) => {
+  const el = document.createElement(type);
+  Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
+  container.appendChild(el);
+  return el;
+};

package/utils/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/utils/index.js",
+  "types": "./index.d.ts"
+}