@authing/react-ui-components 3.0.2-beta.5 → 3.1.1-rc.1

package/scripts/test.js

@@ -1,37 +1,40 @@
+'use strict';
+
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test'
-process.env.NODE_ENV = 'test'
-process.env.PUBLIC_URL = ''
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', (err) => {
-  throw err
-})
+process.on('unhandledRejection', err => {
+  throw err;
+});
 
 // Ensure environment variables are read.
-require('../config/env')
+require('../config/env');
+
 
-const jest = require('jest')
-const execSync = require('child_process').execSync
-let argv = process.argv.slice(2)
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
 
 function isInGitRepository() {
   try {
-    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' })
-    return true
+    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    return true;
   } catch (e) {
-    return false
+    return false;
   }
 }
 
 function isInMercurialRepository() {
   try {
-    execSync('hg --cwd . root', { stdio: 'ignore' })
-    return true
+    execSync('hg --cwd . root', { stdio: 'ignore' });
+    return true;
   } catch (e) {
-    return false
+    return false;
   }
 }
 
@@ -42,8 +45,9 @@ if (
   argv.indexOf('--watchAll=false') === -1
 ) {
   // https://github.com/facebook/create-react-app/issues/5210
-  const hasSourceControl = isInGitRepository() || isInMercurialRepository()
-  argv.push(hasSourceControl ? '--watch' : '--watchAll')
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
 }
 
-jest.run(argv)
+
+jest.run(argv);

package/{components → src/common}/AuthingDropdown/index.tsx

@@ -1,6 +1,6 @@
 import { DownOutlined } from '@ant-design/icons'
 import React, { FC, useState } from 'react'
-import { getClassnames } from '../_utils'
+import { getClassnames } from '../../utils'
 
 import './style.less'
 

package/{components → src/common}/AuthingTabs/index.tsx

@@ -2,7 +2,7 @@ import { Button } from 'antd'
 import React, { FC, useMemo } from 'react'
 import { EllipsisOutlined } from '@ant-design/icons'
 
-import { getClassnames } from '../_utils'
+import { getClassnames } from '../../utils'
 
 import './style.less'
 

package/{components → src/common}/CopyAbleText/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { CopyOutlined, CheckOutlined } from '@ant-design/icons'
-import { copyToClipboard, getClassnames } from '../_utils'
+import { copyToClipboard, getClassnames } from '../../utils'
 
 import './style.less'
 import { useTranslation } from 'react-i18next'

package/{components → src/components}/AuthingGuard/AppMFALayout/index.tsx

@@ -2,13 +2,13 @@ import { message } from 'antd'
 import { User } from 'authing-js-sdk'
 import React, { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { AuthingDropdown } from '../../AuthingDropdown'
+import { AuthingDropdown } from 'src/common/AuthingDropdown'
 
 import {
   EmailMfaVerifyForm,
   SmsMfaVerifyForm,
 } from '../../../components/AuthingGuard/Forms'
-import { useGuardContext } from '../../context/global/context'
+import { useGuardContext } from '../../../context/global/context'
 import { ApplicationMfaType, ApplicationMfaTypeLabel } from '../api'
 
 import './style.less'

package/{components → src/components}/AuthingGuard/CompleteUserInfoLayout/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useGuardContext } from '../../context/global/context'
+import { useGuardContext } from '../../../context/global/context'
 import { CompleteUserInfoForm } from '../Forms/CompleteUserInfoForm'
 
 import './style.less'

package/{components → src/components}/AuthingGuard/Forms/ADLoginForm/index.tsx

@@ -3,14 +3,14 @@ import { FormInstance } from 'antd/lib/form'
 import { UserOutlined, LockOutlined } from '@ant-design/icons'
 import React, { forwardRef, useImperativeHandle, useState } from 'react'
 
-import { useGuardContext } from '../../../context/global/context'
+import { getRequiredRules } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 import {
   ADLoginFormProps,
   LoginMethods,
 } from '../../../../components/AuthingGuard/types'
 import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
 import { useTranslation } from 'react-i18next'
-import { getRequiredRules } from '../../../_utils'
 
 export const ADLoginForm = forwardRef<FormInstance, ADLoginFormProps>(
   ({ onSuccess, onValidateFail, onFail }, ref) => {

package/{components → src/components}/AuthingGuard/Forms/Agreements/index.tsx

@@ -1,8 +1,8 @@
 import React, { FC, useState, useMemo, useEffect } from 'react'
 import { Space, Checkbox } from 'antd'
 import { Agreement } from '../../api'
+import { getClassnames } from '../../../../utils'
 import './style.less'
-import { getClassnames } from '../../../_utils'
 
 export interface AgreementsProps {
   value?: boolean

package/{components → src/components}/AuthingGuard/Forms/CompleteUserInfoForm/index.tsx

@@ -1,13 +1,13 @@
 import { Button, Form, Input, message, Spin } from 'antd'
 import { useForm } from 'antd/lib/form/Form'
 import React, { FC, useEffect, useState } from 'react'
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import { User } from 'authing-js-sdk'
 import { UploadImage } from '../UploadImage'
-import { requestClient } from '../../../_utils/http'
+import { requestClient } from '../../api/http'
 import { CompleteUserInfoFormProps } from '../../types'
 import { useTranslation } from 'react-i18next'
-import { i18n } from '../../../_utils/locales'
+import { i18n } from '../../locales'
 
 export const CompleteUserInfoForm: FC<CompleteUserInfoFormProps> = ({
   onSuccess,

package/{components → src/components}/AuthingGuard/Forms/EmailMfaVerifyForm/CheckEmailForm.tsx

@@ -1,10 +1,12 @@
 import React, { FC, useState } from 'react'
 import { Button, Form, Input, message } from 'antd'
-import { useGuardContext } from '../../../context/global/context'
+
+import { useGuardContext } from '../../../../context/global/context'
 import { MFACheckEmailFormProps } from '../../types'
+
 import './style.less'
+import { VALIDATE_PATTERN } from '../../../../utils'
 import { useTranslation } from 'react-i18next'
-import { VALIDATE_PATTERN } from '../../../_utils'
 
 export const CheckEmailForm: FC<MFACheckEmailFormProps> = ({
   onSuccess,

package/{components → src/components}/AuthingGuard/Forms/EmailMfaVerifyForm/VerifyCodeForm.tsx

@@ -2,8 +2,8 @@ import { EmailScene, User } from 'authing-js-sdk'
 import React, { FC, useState } from 'react'
 import { Button, Form } from 'antd'
 
-import { VerifyCodeInput } from '../../../VerifyCodeInput'
-import { useGuardContext } from '../../../context/global/context'
+import { VerifyCodeInput } from '../../../../common/VerifyCodeInput'
+import { useGuardContext } from '../../../../context/global/context'
 import { EmailMFAVerifyFormProps } from '../../../../components/AuthingGuard/types'
 
 import './style.less'

package/{components → src/components}/AuthingGuard/Forms/EmailMfaVerifyForm/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useRef, useState } from 'react'
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from 'src/context/global/context'
 import { CheckEmailForm } from './CheckEmailForm'
 import { VerifyCodeForm } from './VerifyCodeForm'
 import { SmsMFAFormProps } from '../../types'

package/{components → src/components}/AuthingGuard/Forms/EmailRegisterForm/index.tsx

@@ -8,8 +8,8 @@ import {
   getRequiredRules,
   getUserRegisterParams,
   VALIDATE_PATTERN,
-} from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
+} from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 import {
   EmailRegisterFormProps,
   RegisterMethods,

package/{components → src/components}/AuthingGuard/Forms/LdapLoginForm/index.tsx

@@ -3,8 +3,8 @@ import { FormInstance } from 'antd/lib/form'
 import { UserOutlined, LockOutlined } from '@ant-design/icons'
 import React, { forwardRef, useImperativeHandle, useState } from 'react'
 
-import { getRequiredRules } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
+import { getRequiredRules } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 import { NEED_CAPTCHA } from '../../../../components/AuthingGuard/constants'
 import {
   LoginMethods,
@@ -18,8 +18,7 @@ export const LdapLoginForm = forwardRef<FormInstance, PasswordLoginFormProps>(
     const { t } = useTranslation()
 
     const { state } = useGuardContext()
-    const { config, authClient, realHost, guardEvents } = state
-    const autoRegister = config.autoRegister
+    const { authClient, realHost, guardEvents } = state
 
     const [rawForm] = Form.useForm()
 
@@ -68,12 +67,8 @@ export const LdapLoginForm = forwardRef<FormInstance, PasswordLoginFormProps>(
       try {
         const identity = values.identity && values.identity.trim()
         const password = values.password && values.password.trim()
-        const captchaCode = values.captchaCode && values.captchaCode.trim()
 
-        const user = await authClient.loginByLdap(identity, password, {
-          autoRegister,
-          captchaCode,
-        })
+        const user = await authClient.loginByLdap(identity, password)
         onSuccess && onSuccess(user)
       } catch (error) {
         if (typeof error.message === 'string') {

package/{components → src/components}/AuthingGuard/Forms/LoginFormFooter/index.tsx

@@ -1,6 +1,6 @@
 import { Button, Divider } from 'antd'
 import React, { FC } from 'react'
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import { GuardScenes } from '../../../../components/AuthingGuard/types'
 import './style.less'
 import { useTranslation } from 'react-i18next'

package/{components → src/components}/AuthingGuard/Forms/MfaResetCodeForm/Step1.tsx

@@ -1,8 +1,8 @@
 import { Input, Form, Button } from 'antd'
 import React, { FC, useState } from 'react'
 import { LockOutlined } from '@ant-design/icons'
-import { getRequiredRules } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
+import { getRequiredRules } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 import { User } from 'authing-js-sdk'
 import { useTranslation } from 'react-i18next'
 

package/{components → src/components}/AuthingGuard/Forms/MfaResetCodeForm/Step2.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 
 import { Button, Checkbox, Form } from 'antd'
-import { CopyAbleText } from '../../../CopyAbleText'
+import { CopyAbleText } from '../../../../common/CopyAbleText'
 import { useTranslation } from 'react-i18next'
 
 export interface MfaResetStep2Props {

package/{components → src/components}/AuthingGuard/Forms/MfaResetCodeForm/index.tsx

@@ -3,7 +3,7 @@ import React, { FC, useState } from 'react'
 
 import { MfaResetStep1 } from './Step1'
 import { MfaResetStep2 } from './Step2'
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import { MfaResetForm } from '../../../../components/AuthingGuard/types'
 
 import './style.less'

package/{components → src/components}/AuthingGuard/Forms/MfaVerifyForm/index.tsx

@@ -2,8 +2,8 @@ import { User } from 'authing-js-sdk'
 import React, { FC, useState } from 'react'
 import { Button, Form } from 'antd'
 
-import { VerifyCodeInput } from '../../../VerifyCodeInput'
-import { useGuardContext } from '../../../context/global/context'
+import { VerifyCodeInput } from '../../../../common/VerifyCodeInput'
+import { useGuardContext } from '../../../../context/global/context'
 import { MfaVerifyForm } from '../../../../components/AuthingGuard/types'
 
 import './style.less'

package/{components → src/components}/AuthingGuard/Forms/PasswordLoginForm/index.tsx

@@ -8,8 +8,8 @@ import React, {
   useState,
 } from 'react'
 
-import { getRequiredRules, getUserRegisterParams } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
+import { getRequiredRules, getUserRegisterParams } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 import { NEED_CAPTCHA } from '../../../../components/AuthingGuard/constants'
 import {
   LoginMethods,
@@ -19,7 +19,7 @@ import {
 import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
 import { useTranslation } from 'react-i18next'
 import { PasswordLoginMethods } from '../../api'
-import { requestClient } from '../../../_utils/http'
+import { requestClient } from '../../api/http'
 
 export const PasswordLoginForm = forwardRef<
   FormInstance,

package/{components → src/components}/AuthingGuard/Forms/PhoneCodeLoginForm/index.tsx

@@ -7,8 +7,8 @@ import {
   getRequiredRules,
   getUserRegisterParams,
   VALIDATE_PATTERN,
-} from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
+} from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 import {
   LoginMethods,
   PhoneCodeLoginFormProps,

package/{components → src/components}/AuthingGuard/Forms/PhoneRegisterForm/index.tsx

@@ -3,7 +3,7 @@ import { FormInstance } from 'antd/lib/form'
 import React, { forwardRef, useImperativeHandle, useState } from 'react'
 import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons'
 
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import {
   PhoneRegisterFormProps,
   RegisterMethods,
@@ -13,7 +13,7 @@ import {
   getRequiredRules,
   getUserRegisterParams,
   VALIDATE_PATTERN,
-} from '../../../_utils'
+} from '../../../../utils'
 import { SendPhoneCode } from '../../../../components/AuthingGuard/Forms/SendPhoneCode'
 import { RegisterFormFooter } from '../../../../components/AuthingGuard/Forms/RegisterFormFooter'
 import { useTranslation } from 'react-i18next'

package/{components → src/components}/AuthingGuard/Forms/QrCodeLoginForm/index.tsx

@@ -1,7 +1,7 @@
 import { Spin } from 'antd'
 import React, { FC, useEffect, useMemo, useRef } from 'react'
 
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import {
   LoginMethods,
   QrLoginFormProps,
@@ -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/{components → src/components}/AuthingGuard/Forms/RegisterFormFooter/index.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'antd'
 import React, { FC } from 'react'
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import { GuardScenes } from '../../../../components/AuthingGuard/types'
 
 import './style.less'

package/{components → src/components}/AuthingGuard/Forms/ResetPwdForm/Footer.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'antd'
 
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import { GuardScenes } from '../../../../components/AuthingGuard/types'
 import { useTranslation } from 'react-i18next'
 

package/{components → src/components}/AuthingGuard/Forms/ResetPwdForm/Step1.tsx

@@ -1,12 +1,12 @@
 import React, { FC, useState } from 'react'
 import { Form, Input, Button, message } from 'antd'
 
-import { validate } from '../../../_utils'
+import { validate } from '../../../../utils'
 import {
   ResetPasswordStep1Props,
   ResetPwdMethods,
 } from '../../../../components/AuthingGuard/types'
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import { EmailScene } from 'authing-js-sdk'
 import { useTranslation } from 'react-i18next'
 

package/{components → src/components}/AuthingGuard/Forms/ResetPwdForm/Step2.tsx

@@ -2,8 +2,8 @@ import React, { FC, useState } from 'react'
 import { Form, Input, Button } from 'antd'
 import { SafetyOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'
 
-import { getRequiredRules } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
+import { getRequiredRules } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 import { ResetPasswordStep2Props } from '../../../../components/AuthingGuard/types'
 import { SendPhoneCode } from '../../../../components/AuthingGuard/Forms/SendPhoneCode'
 import { useTranslation } from 'react-i18next'

package/{components → src/components}/AuthingGuard/Forms/ResetPwdForm/Step3.tsx

@@ -3,8 +3,8 @@ import { Form, Button, Input, message } from 'antd'
 import { SafetyOutlined, LockOutlined } from '@ant-design/icons'
 import { EmailScene } from 'authing-js-sdk'
 
-import { getRequiredRules } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
+import { getRequiredRules } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 import { ResetPasswordStep3Props } from '../../../../components/AuthingGuard/types'
 import { useTranslation } from 'react-i18next'
 

package/{components → src/components}/AuthingGuard/Forms/ResetPwdForm/Step4.tsx

@@ -1,4 +1,4 @@
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import React, { FC, useEffect, useRef, useState } from 'react'
 
 import { GuardScenes } from '../../../../components/AuthingGuard/types'

package/{components → src/components}/AuthingGuard/Forms/ResetPwdForm/index.tsx

@@ -5,7 +5,7 @@ import { ResetPasswordStep2 } from './Step2'
 import { ResetPasswordStep3 } from './Step3'
 import { ResetPasswordStep4 } from './Step4'
 import { ResetPwdFormFooter } from './Footer'
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import { ResetPasswordFormProps } from '../../../../components/AuthingGuard/types'
 
 import './style.less'

package/{components → src/components}/AuthingGuard/Forms/SendPhoneCode/index.tsx

@@ -3,8 +3,8 @@ import React, { FC } from 'react'
 import { CommonMessage } from 'authing-js-sdk'
 
 import { SendCodeBtn } from './SendCodeBtn'
-import { validate } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
+import { validate } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 
 import './style.less'
 import { useTranslation } from 'react-i18next'

package/{components → src/components}/AuthingGuard/Forms/SmsMfaVerifyForm/CheckPhoneForm.tsx

@@ -1,11 +1,11 @@
 import React, { FC, useState } from 'react'
 import { Button, Form, Input, message } from 'antd'
 
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 import { MFACheckPhoneFormProps } from '../../types'
 
 import './style.less'
-import { VALIDATE_PATTERN } from '../../../_utils'
+import { VALIDATE_PATTERN } from '../../../../utils'
 import { useTranslation } from 'react-i18next'
 
 export const CheckPhoneForm: FC<MFACheckPhoneFormProps> = ({

package/{components → src/components}/AuthingGuard/Forms/SmsMfaVerifyForm/VerifyCodeForm.tsx

@@ -2,8 +2,8 @@ import { User } from 'authing-js-sdk'
 import React, { FC, useState } from 'react'
 import { Button, Form } from 'antd'
 
-import { VerifyCodeInput } from '../../../VerifyCodeInput'
-import { useGuardContext } from '../../../context/global/context'
+import { VerifyCodeInput } from '../../../../common/VerifyCodeInput'
+import { useGuardContext } from '../../../../context/global/context'
 import { SmsMFAVerifyFormProps } from '../../../../components/AuthingGuard/types'
 
 import './style.less'

package/{components → src/components}/AuthingGuard/Forms/SmsMfaVerifyForm/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useRef, useState } from 'react'
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from 'src/context/global/context'
 import { CheckPhoneForm } from './CheckPhoneForm'
 import { VerifyCodeForm } from './VerifyCodeForm'
 import { SmsMFAFormProps } from '../../types'

package/{components → src/components}/AuthingGuard/Forms/SocialAndIdpLogin/index.tsx

@@ -3,8 +3,8 @@ import shortid from 'shortid'
 import React, { FC, useEffect } from 'react'
 import { Button, Avatar, Space, Tooltip, message } from 'antd'
 
-import { isWechatBrowser, popupCenter } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
+import { isWechatBrowser, popupCenter } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
 import {
   APP_MFA_CODE,
   OTP_MFA_CODE,
@@ -21,14 +21,14 @@ import {
   IAzureAdConnectionConfig,
   IOAuthConnectionConfig,
 } from '../../../../components/AuthingGuard/api'
-import { requestClient } from '../../../_utils/http'
+import { requestClient } from '../../api/http'
 
 import './style.less'
 import { IconFont } from '../../IconFont'
 import { useScreenSize } from '../../hooks/useScreenSize'
 import { SocialConnectionProvider } from 'authing-js-sdk'
 import { useTranslation } from 'react-i18next'
-import { i18n } from '../../../_utils/locales'
+import { i18n } from '../../locales'
 
 export const SocialAndIdpLogin: FC<SocialAndIdpLoginProps> = ({
   onFail = () => {},
@@ -218,7 +218,7 @@ export const SocialAndIdpLogin: FC<SocialAndIdpLoginProps> = ({
       }
 
       const onLogin = () => {
-        authClient.social.authorize(item.provider, {
+        authClient.social.authorize(item.identifier, {
           onSuccess(user) {
             onSuccess(user)
           },
@@ -254,12 +254,12 @@ export const SocialAndIdpLogin: FC<SocialAndIdpLoginProps> = ({
           }
           onClick={onLogin}
         >
-          {item.tooltip?.[i18n.language as Lang] || item.name}
+          {item.tooltip?.[i18n.language as Lang] || item.displayName}
         </Button>
       ) : (
         <Tooltip
           key={item.provider}
-          title={item.tooltip?.[i18n.language as Lang] || item.name}
+          title={item.tooltip?.[i18n.language as Lang] || item.displayName}
         >
           <div className="authing-social-login-item" onClick={onLogin}>
             <IconFont type={iconType} />