@authing/react-ui-components 2.4.53 → 2.4.55-alpha.1

package/lib/index.min.js.LICENSE.txt

@@ -4,6 +4,15 @@
   http://jedwatson.github.io/classnames
 */
 
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
 /** @license React v16.13.1
  * react-is.production.min.js
  *

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@authing/react-ui-components",
-  "version": "2.4.53",
+  "version": "2.4.55-alpha.1",
   "private": false,
   "main": "lib/index.min.js",
   "typings": "lib/index.d.ts",
   "dependencies": {
     "antd": "^4.8.0",
-    "authing-js-sdk": "4.22.18",
+    "authing-js-sdk": "4.22.26-alpha.5",
     "qs": "^6.9.4"
   },
   "peerDependencies": {
@@ -184,6 +184,5 @@
     "webpack-dev-server": "3.11.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4"
-  },
-  "gitHead": "9162c7339ae6fdb5189aa14146ec18550f8b37bd"
+  }
 }

package/src/components/AuthingGuard/Forms/QrCodeLoginForm/index.tsx

@@ -14,6 +14,7 @@ export const QrCodeLoginForm: FC<QrLoginFormProps> = ({
   onFail,
   onSuccess,
   type,
+  idpId,
 }) => {
   const {
     state: { authClient, config },
@@ -31,6 +32,7 @@ export const QrCodeLoginForm: FC<QrLoginFormProps> = ({
 
   useEffect(() => {
     client.startScanning('authingGuardQrcode', {
+      extIdpConnId: idpId,
       autoExchangeUserInfo: true,
       ...config.qrCodeScanOptions,
       onStart(timer) {
@@ -46,7 +48,7 @@ export const QrCodeLoginForm: FC<QrLoginFormProps> = ({
       },
     })
     return () => clearInterval(timerRef.current)
-  }, [client, config.qrCodeScanOptions, onFail, onSuccess])
+  }, [client, config.qrCodeScanOptions, idpId, onFail, onSuccess])
 
   return (
     <div className="authing-guard-qr-form">

package/src/components/AuthingGuard/GuardLayout/index.tsx

@@ -165,9 +165,12 @@ const useGuardConfig = () => {
     // 默认登录方式
     const defaultLoginMethod =
       userConfig.defaultLoginMethod ||
+      appConfig.loginTabs?.defaultV2 ||
       appConfig.loginTabs?.default ||
       defaultGuardConfig.defaultLoginMethod
 
+    const loginMethodTitleMapping = appConfig.loginTabs?.title
+
     // 注册方式
     const registerMethods =
       userConfig.registerMethods ||
@@ -184,6 +187,8 @@ const useGuardConfig = () => {
       ? ''
       : userConfig.title ?? appConfig.name ?? defaultGuardConfig.title
 
+    const description = loading ? '' : appConfig.description ?? ''
+
     // 应用 logo
     const logo = loading
       ? ''
@@ -218,6 +223,7 @@ const useGuardConfig = () => {
       {
         logo,
         title,
+        description,
         autoRegister,
         loginMethods,
         passwordLoginMethods,
@@ -232,16 +238,19 @@ const useGuardConfig = () => {
         publicKey: appConfig.publicKey,
         agreementEnabled: appConfig.agreementEnabled,
         agreements: appConfig.agreements,
+        loginMethodTitleMapping: loginMethodTitleMapping,
       }
     )
   }, [
     userConfig,
     appConfig.loginTabs?.list,
     appConfig.loginTabs?.default,
+    appConfig.loginTabs?.title,
     appConfig.passwordTabConfig?.enabledLoginMethods,
     appConfig.registerTabs?.list,
     appConfig.registerTabs?.default,
     appConfig.name,
+    appConfig.description,
     appConfig.logo,
     appConfig.ssoPageComponentDisplay?.autoRegisterThenLoginHintInfo,
     appConfig.ssoPageComponentDisplay?.registerBtn,

package/src/components/AuthingGuard/Header/index.tsx

@@ -10,7 +10,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 export const GuardHeader: FC<HeaderProps> = (props) => {
   const {
     state: {
-      config: { logo, title },
+      config: { logo, title, description },
     },
   } = useGuardContext()
 
@@ -19,7 +19,10 @@ export const GuardHeader: FC<HeaderProps> = (props) => {
       {Boolean(logo) && (
         <Avatar className="authing-guard-logo" src={logo} size={50}></Avatar>
       )}
-      <div className="authing-guard-title">{title}</div>
+      <div className="authing-guard-title-container">
+        <div className="authing-guard-title">{title}</div>
+        <div className="authing-guard-description">{description}</div>
+      </div>
     </div>
   )
 }

package/src/components/AuthingGuard/Header/style.less

@@ -13,23 +13,26 @@
   object-fit: contain;
 }
 
+.authing-guard-title-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
 .authing-guard-title {
-  color: #abb9d7;
+  color: #282d3c;
   font-size: 24px;
-  margin-bottom: 24px;
+  margin-bottom: 4px;
   width: 100%;
   word-break: break-all;
   text-align: center;
 }
-
-// .large .logo {
-//   margin-bottom: 16px;
-// }
-
-// .large .title {
-//   color: #333333;
-//   font-size: 32px;
-// }
+.authing-guard-description {
+  font-size: 16px;
+  color: #878a95;
+  margin-bottom: 23px;
+}
 
 @media only screen and (max-width: 719px) {
   .authing-guard-header {
@@ -45,8 +48,17 @@
     padding-left: 8px;
     color: #333333;
     font-weight: 500;
+    text-align: unset;
   }
   .authing-guard-logo {
     margin: 0;
   }
+  .authing-guard-title-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .authing-guard-description {
+    margin-bottom: 0px;
+    padding-left: 8px;
+  }
 }

package/src/components/AuthingGuard/LoginLayout/index.tsx

@@ -75,36 +75,36 @@ const useNormalLoginTabs = ({ onSuccess, onFail }: BaseFormProps) => {
   }
 
   const LOGIN_FORM_MAP = {
-    [LoginMethods.Password]: (
+    [LoginMethods.Password]: (props: any) => (
       <PasswordLoginForm
-        {...formProps}
+        {...props}
         ref={(v) => (formRef.current[LoginMethods.Password] = v!)}
       />
     ),
-    [LoginMethods.PhoneCode]: (
+    [LoginMethods.PhoneCode]: (props: any) => (
       <PhoneCodeLoginForm
-        {...formProps}
+        {...props}
         ref={(v) => (formRef.current[LoginMethods.PhoneCode] = v!)}
       />
     ),
-    [LoginMethods.AppQr]: (
-      <QrCodeLoginForm type={LoginMethods.AppQr} {...formProps} />
+    [LoginMethods.AppQr]: (props: any) => (
+      <QrCodeLoginForm type={LoginMethods.AppQr} {...props} />
     ),
-    [LoginMethods.WxMinQr]: (
-      <QrCodeLoginForm type={LoginMethods.WxMinQr} {...formProps} />
+    [LoginMethods.WxMinQr]: (props: any) => (
+      <QrCodeLoginForm type={LoginMethods.WxMinQr} {...props} />
     ),
-    [LoginMethods.LDAP]: (
+    [LoginMethods.LDAP]: (props: any) => (
       <LdapLoginForm
-        {...formProps}
+        {...props}
         ref={(v) => (formRef.current[LoginMethods.LDAP] = v!)}
       />
     ),
-    [LoginMethods.WechatMpQrcode]: (
-      <QrCodeLoginForm type={LoginMethods.WechatMpQrcode} {...formProps} />
+    [LoginMethods.WechatMpQrcode]: (props: any) => (
+      <QrCodeLoginForm type={LoginMethods.WechatMpQrcode} {...props} />
     ),
-    [LoginMethods.AD]: (
+    [LoginMethods.AD]: (props: any) => (
       <ADLoginForm
-        {...formProps}
+        {...props}
         ref={(v) => (formRef.current[LoginMethods.AD] = v!)}
       />
     ),
@@ -113,13 +113,38 @@ const useNormalLoginTabs = ({ onSuccess, onFail }: BaseFormProps) => {
   const {
     state: { config },
   } = useGuardContext()
-  const { loginMethods = [] } = config
-
-  const tabs = loginMethods.map((item) => ({
-    key: item,
-    label: LOGIN_METHODS_MAP()?.[item]!,
-    component: LOGIN_FORM_MAP[item],
-  }))
+  const { loginMethods = [], loginMethodTitleMapping } = config
+
+  const tabs = loginMethods
+    .map((tab) => {
+      if (
+        !loginMethods.every(
+          (item) => !(item.split(':').length > 1 && item.split(':')[0] === tab)
+        )
+      )
+        return undefined
+
+      const idpId = tab.split(':').length > 1 ? tab.split(':')[1] : undefined
+
+      if (idpId) {
+        const type = tab.split(':')[0] as LoginMethods
+        return {
+          key: tab,
+          label: loginMethodTitleMapping[tab]!,
+          component: LOGIN_FORM_MAP[type]({
+            ...formProps,
+            idpId: idpId,
+          }),
+        }
+      } else {
+        return {
+          key: tab,
+          label: LOGIN_METHODS_MAP()?.[tab]!,
+          component: LOGIN_FORM_MAP[tab](formProps),
+        }
+      }
+    })
+    .filter((i) => i !== undefined)
 
   return {
     tabs,
@@ -143,7 +168,13 @@ export const LoginLayout = () => {
   return (
     <>
       <AuthingTabs
-        tabs={tabs}
+        tabs={
+          tabs as {
+            key: LoginMethods
+            label: string
+            component: JSX.Element
+          }[]
+        }
         onTabClick={(t) =>
           setValue('activeTabs', {
             ...activeTabs,

package/src/components/AuthingGuard/api/appConfig.ts

@@ -75,6 +75,7 @@ export interface ApplicationConfig {
   css: string
   name: string
   logo: string
+  description?: string
   redirectUris: string[]
   registerDisabled: boolean
   registerTabs: {
@@ -85,6 +86,7 @@ export interface ApplicationConfig {
   loginTabs: {
     list: string[]
     default: string
+    defaultV2?: string
     title: { [x: string]: string }
   }
   socialConnections: SocialConnectionItem[]

package/src/components/AuthingGuard/api/http.ts

@@ -17,6 +17,15 @@ requestClient.get = async <T>(
   query: Record<string, any> = {},
   init?: RequestInit
 ): Promise<AuthingResponse<T>> => {
+  const headers: Record<string, any> = {
+    ...init?.headers,
+    'Content-Type': 'application/json',
+    [requestClient.langHeader]: i18n.language,
+  }
+
+  if (requestClient.tenantId !== '')
+    headers[requestClient.tenantHeader] = requestClient.tenantId
+
   const res = await fetch(
     `${requestClient.baseUrl}${path}${qs.stringify(query, {
       addQueryPrefix: true,
@@ -24,10 +33,7 @@ requestClient.get = async <T>(
     {
       ...init,
       credentials: 'include',
-      headers: {
-        ...init?.headers,
-        [requestClient.langHeader]: i18n.language,
-      },
+      headers,
     }
   )
 
@@ -41,15 +47,20 @@ requestClient.post = async <T>(
     headers: any
   }
 ): Promise<AuthingResponse<T>> => {
+  const headers: Record<string, any> = {
+    ...config?.headers,
+    'Content-Type': 'application/json',
+    [requestClient.langHeader]: i18n.language,
+  }
+
+  if (requestClient.tenantId !== '')
+    headers[requestClient.tenantHeader] = requestClient.tenantId
+
   const res = await fetch(`${requestClient.baseUrl}${path}`, {
     method: 'POST',
     body: JSON.stringify(data),
     credentials: 'include',
-    headers: {
-      ...config?.headers,
-      'Content-Type': 'application/json',
-      [requestClient.langHeader]: i18n.language,
-    },
+    headers: headers,
   })
   return res.json()
 }
@@ -59,7 +70,19 @@ requestClient.setBaseUrl = (base: string) => {
   requestClient.baseUrl = base.replace(/\/$/, '')
 }
 const DEFAULT_LANG_HEADER = 'x-authing-lang'
+const DEFAULT_TENANT_HEADER = 'x-authing-app-tenant-idåå'
 requestClient.langHeader = DEFAULT_LANG_HEADER
+requestClient.tenantHeader = DEFAULT_TENANT_HEADER
+requestClient.tenantId = ''
+
 requestClient.setLangHeader = (key: string | undefined) => {
   requestClient.langHeader = key || DEFAULT_LANG_HEADER
 }
+
+requestClient.setTenantHeader = (key: string | undefined) => {
+  requestClient.tenantHeader = key || DEFAULT_LANG_HEADER
+}
+
+requestClient.setTenantId = (tenantId: string) => {
+  requestClient.tenantId = tenantId
+}

package/src/components/AuthingGuard/constants.ts

@@ -95,10 +95,12 @@ export const defaultHeaders: {
   'app-id': string
   'sdk-version': string
   'request-from': string
+  'tenant-id': string
   lang: string
 } = {
   'userpool-id': 'x-authing-userpool-id',
   'app-id': 'x-authing-app-id',
+  'tenant-id': 'x-authing-app-tenant-id',
   'request-from': 'x-authing-request-from',
   'sdk-version': 'x-authing-sdk-version',
   lang: 'x-authing-lang',

package/src/components/AuthingGuard/index.tsx

@@ -28,6 +28,7 @@ message.config({
 
 interface AuthingGuardProps extends GuardEventsHandler {
   appId: string
+  tenantId?: string
   config?: UserConfig
   visible?: boolean
   className?: string
@@ -36,6 +37,7 @@ interface AuthingGuardProps extends GuardEventsHandler {
 
 export const AuthingGuard: FC<AuthingGuardProps> = ({
   appId,
+  tenantId,
   config = {},
   visible,
   className,
@@ -71,9 +73,15 @@ export const AuthingGuard: FC<AuthingGuardProps> = ({
   requestClient.setBaseUrl(realHost)
   requestClient.setLangHeader(headers?.lang)
 
+  if (tenantId) {
+    requestClient.setTenantHeader(headers?.['tenant-id'])
+    requestClient.setTenantId(tenantId)
+  }
+
   const authClient = new AuthenticationClient({
     appHost: realHost!,
     appId,
+    tenantId,
     requestFrom: 'ui-components',
     lang: localesConfig.defaultLang ?? lang,
     headers,

package/src/components/AuthingGuard/types/Forms.ts

@@ -27,6 +27,7 @@ export interface LdapLoginFormProps extends BaseFormProps {
 
 export interface QrLoginFormProps extends BaseFormProps {
   type: LoginMethods.AppQr | LoginMethods.WxMinQr | LoginMethods.WechatMpQrcode
+  idpId?: string
 }
 
 export interface EmailRegisterFormProps extends BaseFormProps {

package/src/components/AuthingGuard/types/GuardConfig.ts

@@ -353,6 +353,7 @@ export interface GuardEventsHandler {
 export interface UserConfig {
   logo?: string
   title?: string
+  description?: string
   zIndex?: number
   isSSO?: boolean
   mode?: GuardMode
@@ -411,6 +412,7 @@ export interface GuardConfig extends UserConfig {
   publicKey: ApplicationConfig['publicKey']
   agreementEnabled: boolean
   agreements: Agreement[]
+  loginMethodTitleMapping: Record<string, string>
 }
 
 export interface LocalesConfig {

package/src/index.tsx

@@ -1,7 +1,7 @@
 import { Button } from 'antd'
 import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
-import { initAuthClient, Lang } from './components'
+import { Lang } from './components'
 import { AuthingGuard } from './components/AuthingGuard'
 
 import {
@@ -20,9 +20,8 @@ const App = () => {
   const [title, setTitle] = useState('标题')
 
   const config: UserConfig = {
-    title,
     mode: GuardMode.Modal,
-    // appHost: 'https://sample-sso.authing.cn',
+    appHost: 'https://core.dev2.authing-inc.co',
     // apiHost: 'http://console.authing.localhost:3000',
     // apiHost: 'http://192.168.50.57:3000',
     // loginMethods: Object.values(LoginMethods),
@@ -55,16 +54,6 @@ const App = () => {
     // `,
     // // autoRegister: true,
     // socialConnections: [SocialConnections.AppleWeb],
-    passwordLoginMethods: ['username-password'],
-    localesConfig: {
-      defaultLang: 'en-US',
-      isShowChange: true,
-      onChange: (value) => {
-        console.log('...........')
-        console.log(value)
-      },
-    },
-    lang: lang,
   }
 
   const [visible, setVisible] = useState(false)
@@ -73,10 +62,10 @@ const App = () => {
   //   setTimeout(() => setVisible(true), 3000)
   // }, [])
 
-  initAuthClient({
-    appId: '60c02a89a9e0431e271d9ff0',
-    // appHost: 'http://console.authing.localhost:3000',
-  })
+  // initAuthClient({
+  //   appId: '60c02a89a9e0431e271d9ff0',
+  //   // appHost: 'http://console.authing.localhost:3000',
+  // })
 
   return (
     // eslint-disable-next-line react/jsx-no-undef
@@ -125,7 +114,8 @@ const App = () => {
         }}
         // onLoad={(a) => console.log(a, '加载完成')}
         // onPwdResetError={(e) => console.log(e)}
-        appId="60c02a89a9e0431e271d9ff0"
+        appId="619c7976cd38c13a2222464f"
+        tenantId="619c864928b15c6421d12e35"
         // appId="5fd877fb0ba0421962eced94"
         config={config}
       />