@authing/native-js-ui-components 2.4.54 → 2.4.55

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@authing/native-js-ui-components",
-  "version": "2.4.54",
+  "version": "2.4.55",
   "private": false,
   "main": "lib/index.min.js",
   "typings": "lib/index.d.ts",
   "dependencies": {
-    "@authing/react-ui-components": "^2.4.53",
+    "@authing/react-ui-components": "^2.4.55",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
@@ -166,5 +166,5 @@
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4"
   },
-  "gitHead": "79e5f7b16eb83fa00af9fa0e01068ef2d9fe0706"
+  "gitHead": "8c8162fd4a91c1d1376bf68d4592f90572cc3a7e"
 }

package/src/App.tsx

@@ -1,32 +1,36 @@
-import React, { useEffect } from 'react'
-import './App.css'
-import { AuthingGuard, GuardMode } from './components'
+import React, { useEffect } from "react";
+import "./App.css";
+import { AuthingGuard, GuardMode } from "./components";
 
 function App() {
   useEffect(() => {
-    const guard = new AuthingGuard('59f86b4832eb28071bdd9214', {
-      target: '.App',
-      apiHost: 'http://console.authing.localhost:3000',
-      mode: GuardMode.Modal,
-    })
+    const guard = new AuthingGuard(
+      "6191cf610f772aa56dc70637",
+      {
+        target: ".App",
+        appHost: "https://core.dev2.authing-inc.co/",
+        mode: GuardMode.Modal,
+      },
+      "6194a41abf23c1d5268b362a"
+    );
 
     // @ts-ignore
-    window.guard = guard
+    window.guard = guard;
 
-    // guard.show()
+    guard.show();
 
-    guard.on('load', (e) => {
-      console.log('加载啊', e)
-    })
+    guard.on("load", (e: any) => {
+      console.log("加载啊", e);
+    });
 
-    guard.on('close', () => {
+    guard.on("close", () => {
       setTimeout(() => {
-        guard.show()
-      }, 2000)
-    })
-  }, [])
+        guard.show();
+      }, 2000);
+    });
+  }, []);
 
-  return <div className="App"></div>
+  return <div className="App"></div>;
 }
 
-export default App
+export default App;

package/src/components/AuthingGuard/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { AuthingGuard as ReactAuthingGuard } from '@authing/react-ui-components'
+import React from "react";
+import ReactDOM from "react-dom";
+import { AuthingGuard as ReactAuthingGuard } from "@authing/react-ui-components";
 import {
   User,
   GuardMode,
@@ -16,8 +16,8 @@ import {
   GuardEventsHandlerKebab,
   GuardEventsCamelToKebabMap,
   AuthenticationClientOptions,
-} from '@authing/react-ui-components'
-import '@authing/react-ui-components/lib/index.min.css'
+} from "@authing/react-ui-components";
+import "@authing/react-ui-components/lib/index.min.css";
 
 export type {
   User,
@@ -27,7 +27,7 @@ export type {
   AuthenticationClient,
   GuardEventsHandlerKebab,
   AuthenticationClientOptions,
-}
+};
 
 export {
   GuardMode,
@@ -37,99 +37,91 @@ export {
   initAuthClient,
   RegisterMethods,
   GuardEventsCamelToKebabMap,
-}
+};
 
 export type EventListeners = {
-  [key in keyof GuardEventsHandlerKebab]: Exclude<
-    Required<GuardEventsHandlerKebab>[key],
-    undefined
-  >[]
-}
+  [key in keyof GuardEventsHandlerKebab]: Exclude<Required<GuardEventsHandlerKebab>[key], undefined>[];
+};
 
 export class AuthingGuard {
-  constructor(private appId: string, private config?: UserConfig) {
-    this.render()
+  constructor(private appId: string, private config?: UserConfig, private tenantId?: string) {
+    this.render();
   }
 
   static getGuardContainer(selector?: string | HTMLElement) {
-    const defaultId = 'authing_guard_container'
+    const defaultId = "authing_guard_container";
 
     if (!selector) {
-      let container = document.querySelector(`#${defaultId}`)
+      let container = document.querySelector(`#${defaultId}`);
       if (!container) {
-        container = document.createElement('div')
-        container.id = defaultId
-        document.body.appendChild(container)
+        container = document.createElement("div");
+        container.id = defaultId;
+        document.body.appendChild(container);
       }
 
-      return container
+      return container;
     }
 
-    if (typeof selector === 'string') {
-      return document.querySelector(selector)
+    if (typeof selector === "string") {
+      return document.querySelector(selector);
     }
 
-    return selector
+    return selector;
   }
 
-  private visible = this.config?.mode === GuardMode.Modal ? false : true
+  private visible = this.config?.mode === GuardMode.Modal ? false : true;
 
-  private eventListeners = Object.values(GuardEventsCamelToKebabMap).reduce(
-    (acc, evtName) => {
-      return Object.assign({}, acc, {
-        [evtName]: [],
-      })
-    },
-    {} as EventListeners
-  )
+  private eventListeners = Object.values(GuardEventsCamelToKebabMap).reduce((acc, evtName) => {
+    return Object.assign({}, acc, {
+      [evtName]: [],
+    });
+  }, {} as EventListeners);
 
   private render(cb?: () => void) {
-    const evts: GuardEventsHandler = Object.entries(
-      GuardEventsCamelToKebabMap
-    ).reduce((acc, [reactEvt, nativeEvt]) => {
+    const evts: GuardEventsHandler = Object.entries(GuardEventsCamelToKebabMap).reduce((acc, [reactEvt, nativeEvt]) => {
       return Object.assign({}, acc, {
         [reactEvt]: (...rest: any) => {
-          if (nativeEvt === 'close') {
-            this.hide()
+          if (nativeEvt === "close") {
+            this.hide();
           }
 
           // TODO 返回最后一个执行函数的值，实际应该只让监听一次
-          return this.eventListeners[nativeEvt]
-            // @ts-ignore
-            .map((item: any) => {
-              return item(...rest)
-            })
-            .slice(-1)[0] ?? true
+          return (
+            this.eventListeners[nativeEvt]
+              // @ts-ignore
+              .map((item: any) => {
+                return item(...rest);
+              })
+              .slice(-1)[0] ?? true
+          );
         },
-      })
-    }, {} as GuardEventsHandler)
+      });
+    }, {} as GuardEventsHandler);
 
     return ReactDOM.render(
       <ReactAuthingGuard
         {...evts}
         appId={this.appId}
+        tenantId={this.tenantId}
         config={this.config}
         visible={this.visible}
       />,
       AuthingGuard.getGuardContainer(this.config?.target),
       cb
-    )
+    );
   }
 
-  on<T extends keyof GuardEventsHandlerKebab>(
-    evt: T,
-    handler: Exclude<GuardEventsHandlerKebab[T], undefined>
-  ) {
-    this.eventListeners[evt]!.push(handler as any)
+  on<T extends keyof GuardEventsHandlerKebab>(evt: T, handler: Exclude<GuardEventsHandlerKebab[T], undefined>) {
+    this.eventListeners[evt]!.push(handler as any);
   }
 
   show() {
-    this.visible = true
-    this.render()
+    this.visible = true;
+    this.render();
   }
 
   hide() {
-    this.visible = false
-    this.render()
+    this.visible = false;
+    this.render();
   }
 }