@arcblock/did-connect-react 3.2.0 → 3.2.2

package/lib/OAuth/bind-conflict-alert.js

@@ -0,0 +1,29 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { Box as d, Typography as m } from "@mui/material";
+import p from "prop-types";
+import c from "@arcblock/ux/lib/UserCard";
+import { withQuery as l, joinURL as f } from "ufo";
+import { useMemoizedFn as u } from "ahooks";
+import { BLOCKLET_SERVICE_PATH_PREFIX as x } from "../constant.js";
+function h({ data: e }) {
+  const { message: i, data: o } = e, t = a(() => new URLSearchParams(window.location.search).get("locale") || "en", []), n = u(() => {
+    window.open(
+      l(f(x, "user"), {
+        locale: t,
+        did: o.did
+      }),
+      "_blank"
+    );
+  });
+  return /* @__PURE__ */ s(d, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+    /* @__PURE__ */ r(m, { sx: { fontSize: 14, color: "text.secondary" }, children: i }),
+    /* @__PURE__ */ r(c, { showDid: !0, did: o.did, onAvatarClick: n })
+  ] });
+}
+h.propTypes = {
+  data: p.object.isRequired
+};
+export {
+  h as default
+};

package/lib/OAuth/context.js

@@ -1,18 +1,21 @@
-import { jsxs as K, jsx as W } from "react/jsx-runtime";
-import l from "prop-types";
-import Y from "lodash/isUndefined";
-import { createContext as $, use as J } from "react";
-import h from "@arcblock/ux/lib/Toast";
-import { useReactive as m, useMemoizedFn as d, useCreation as Q, useLatest as Z } from "ahooks";
-import v from "lodash/noop";
-import R from "lodash/omit";
-import { joinURL as ee } from "ufo";
-import { translate as te } from "@arcblock/ux/lib/Locale/util";
-import { getBlockletData as S, getFederatedEnabled as k, getMaster as F } from "@arcblock/ux/lib/Util/federated";
-import { BLOCKLET_SERVICE_PATH_PREFIX as B, LOGIN_PROVIDER_NAME as A } from "@arcblock/ux/lib/Util/constant";
-import { createAxios as oe, openPopup as re, runPopup as ne, sleep as ie, getApiErrorMessage as O } from "../utils.js";
-import { parseResponse as se, PassportSwitcher as ae } from "../components/PassportSwitcher.js";
-const E = $({}), { Provider: de, Consumer: Le } = E, C = `${B}/api/oauth`, ce = {
+import { jsxs as J, jsx as E } from "react/jsx-runtime";
+import h from "prop-types";
+import Q from "lodash/isUndefined";
+import { createContext as Z, use as ee } from "react";
+import l from "@arcblock/ux/lib/Toast";
+import { useReactive as v, useMemoizedFn as u, useCreation as te, useLatest as oe } from "ahooks";
+import O from "lodash/noop";
+import B from "lodash/omit";
+import { joinURL as re } from "ufo";
+import { translate as ne } from "@arcblock/ux/lib/Locale/util";
+import ie from "@arcblock/ux/lib/Dialog/use-confirm";
+import { getBlockletData as S, getFederatedEnabled as C, getMaster as R } from "@arcblock/ux/lib/Util/federated";
+import { BLOCKLET_SERVICE_PATH_PREFIX as F, LOGIN_PROVIDER_NAME as f } from "@arcblock/ux/lib/Util/constant";
+import { createAxios as se, openPopup as ae, runPopup as de, sleep as ce, getApiErrorMessage as m } from "../utils.js";
+import { parseResponse as ue, PassportSwitcher as le } from "../components/PassportSwitcher.js";
+import pe from "../Session/hooks/use-mobile.js";
+import he from "./bind-conflict-alert.js";
+const D = Z({}), { Provider: fe, Consumer: Te } = D, k = `${F}/api/oauth`, be = {
   zh: {
     bindOAuth: "绑定第三方登录",
     bind: "绑定",
@@ -24,7 +27,10 @@ const E = $({}), { Provider: de, Consumer: Le } = E, C = `${B}/api/oauth`, ce =
     unbindOAuthFailed: "绑定 {provider} 失败",
     loginRequired: "授权请求被拒绝",
     cancelAuth: "取消授权",
-    noPassports: "没有可更换的通行证"
+    noPassports: "没有可更换的通行证",
+    confirm: "我知道了",
+    ALREADY_EXIST: "当前账户已存在",
+    ALREADY_BIND: "当前账户绑定过 {provider}"
   },
   en: {
     bindOAuth: "Bind third party login",
@@ -37,31 +43,41 @@ const E = $({}), { Provider: de, Consumer: Le } = E, C = `${B}/api/oauth`, ce =
     unbindOAuthFailed: "Unbind {provider} failed",
     loginRequired: "You have declined the authentication request",
     cancelAuth: "Cancel authentication",
-    noPassports: "No passports to switch"
+    noPassports: "No passports to switch",
+    confirm: "I know",
+    ALREADY_EXIST: "Your account already exists",
+    ALREADY_BIND: "Your account is already bind to {provider}"
   }
 };
-function ue({
+function Ae({
   children: w,
   locale: p = "en",
-  onBindOAuth: T = v,
-  onUnbindOAuth: j = v,
-  onSwitchPassport: x = v,
-  session: M = null
+  onBindOAuth: T = O,
+  onUnbindOAuth: _ = O,
+  onSwitchPassport: I = O,
+  session: Y = null
 }) {
-  const o = m({
+  const x = pe(), { confirmApi: M, confirmHolder: N } = ie({
+    maxWidth: !1,
+    PaperProps: {
+      style: {
+        minWidth: x ? "100%" : 600
+      }
+    }
+  }), r = v({
     baseUrl: "/",
     bindFnSession: void 0,
     bindAuthLoading: !1,
     unbindAuthLoading: !1
-  }), i = m({
+  }), c = v({
     open: !1,
     currentUser: null,
     passports: [],
     selectedPassport: void 0,
     reset() {
-      i.open = !1, i.currentUser = null, i.passports = [], i.selectedPassport = void 0;
+      c.open = !1, c.currentUser = null, c.passports = [], c.selectedPassport = void 0;
     }
-  }), b = m({
+  }), b = v({
     user: null,
     // loginLoading: false,
     checking: !1,
@@ -72,172 +88,189 @@ function ue({
     reset({ status: t = "" } = {}) {
       b.loading = !!t, b.checking = !1, b.error = "", b.status = t;
     }
-  }), s = d((t, e = {}) => te(ce, t, p, "en", e)), _ = Q(() => oe({
+  }), i = u((t, e = {}) => ne(be, t, p, "en", e)), j = te(() => se({
     // NOTICE: 请求必须向当前站点发起
-    baseURL: C
-  }), [o.baseUrl, C]), g = Z(_), P = d(async () => {
-    if (o.baseUrl === "/")
+    baseURL: k
+  }), [r.baseUrl, k]), A = oe(j), P = u(async () => {
+    if (r.baseUrl === "/")
       return window.blocklet;
     try {
-      if (new URL(o.baseUrl).host === window.location.host)
+      if (new URL(r.baseUrl).host === window.location.host)
         return window.blocklet;
     } catch {
     }
-    return await S(o.baseUrl);
-  }), U = d(async ({ sourceAppPid: t } = {}) => {
-    const e = await P(), r = k(e), n = F(e);
-    return r && n?.appPid && t === n?.appPid ? (await S(n.appUrl))?.settings?.oauth || {} : e?.settings?.oauth || {};
-  }), q = d(async ({ sourceAppPid: t } = {}) => {
+    return await S(r.baseUrl);
+  }), U = u(async ({ sourceAppPid: t } = {}) => {
+    const e = await P(), o = C(e), n = R(e);
+    return o && n?.appPid && t === n?.appPid ? (await S(n.appUrl))?.settings?.oauth || {} : e?.settings?.oauth || {};
+  }), X = u(async ({ sourceAppPid: t } = {}) => {
     const e = await U({ sourceAppPid: t });
-    return Object.entries(e).map(([n, c]) => ({ ...c, provider: n })).filter((n) => n.enabled).sort((n, c) => n?.order !== void 0 && c?.order !== void 0 ? n.order - c.order : n?.order !== void 0 ? -1 : 1);
-  }), y = d(async ({ provider: t } = {}) => {
-    const e = re(ee(o.baseUrl, B, "/oauth/login", t), {
+    return Object.entries(e).map(([n, a]) => ({ ...a, provider: n })).filter((n) => n.enabled).sort((n, a) => n?.order !== void 0 && a?.order !== void 0 ? n.order - a.order : n?.order !== void 0 ? -1 : 1);
+  }), L = u(async ({ provider: t } = {}) => {
+    const e = ae(re(r.baseUrl, F, "/oauth/login", t), {
       name: "oauth-login:popup",
       offsetX: 650,
       height: 700,
       width: 500
     });
     try {
-      const r = await ne({
+      const o = await de({
         popup: e,
         closeTimeout: 0
       });
-      return r?.response ? r.response?.code : null;
-    } catch (r) {
-      throw r?.message === "Popup closed" ? new Error(s("cancelAuth")) : r;
+      return o?.response ? o.response?.code : null;
+    } catch (o) {
+      throw o?.message === "Popup closed" ? new Error(i("cancelAuth")) : o;
     }
-  }), I = async ({ session: t, oauthItem: e } = {}) => {
-    o.bindFnSession = t, o.bindAuthLoading = !0;
+  }), q = async ({ session: t, oauthItem: e } = {}) => {
+    r.bindFnSession = t, r.bindAuthLoading = !0;
     try {
-      const r = await y(e), n = o.bindFnSession?.user?.sourceAppPid;
-      await g.current.post("/bind", {
+      const o = await L(e), n = r.bindFnSession?.user?.sourceAppPid;
+      await A.current.post("/bind", {
         locale: p,
         provider: e.provider,
-        code: r,
+        code: o,
         sourceAppPid: n
-      }), h.success(s("bindOAuthSucceed", { provider: A[e.provider] })), T(e);
-    } catch (r) {
-      h.error(O(r, s("bindOAuthFailed", { provider: A[e.provider] })));
+      }), l.success(i("bindOAuthSucceed", { provider: f[e.provider] })), T(e);
+    } catch (o) {
+      if (o.response?.status === 409) {
+        const { data: a = {} } = o.response || {}, { code: d } = a || {};
+        ["ALREADY_EXIST", "ALREADY_BIND"].includes(d) ? M.open({
+          title: i(d, { provider: e.provider }),
+          showCancelButton: !1,
+          confirmButtonText: i("confirm"),
+          content: /* @__PURE__ */ E(he, { data: a }),
+          onConfirm(s) {
+            s();
+          }
+        }) : l.error(
+          m(o, i("bindOAuthFailed", { provider: f[e.provider] }))
+        );
+      } else
+        l.error(
+          m(o, i("bindOAuthFailed", { provider: f[e.provider] }))
+        );
     } finally {
-      o.bindAuthLoading = !1;
+      r.bindAuthLoading = !1;
     }
-  }, D = async ({ session: t, connectedAccount: e }) => {
-    o.unbindAuthLoading = !0;
+  }, W = async ({ session: t, connectedAccount: e }) => {
+    r.unbindAuthLoading = !0;
     try {
-      const r = t?.user?.sourceAppPid;
-      await g.current.post("/unbind", {
+      const o = t?.user?.sourceAppPid;
+      await A.current.post("/unbind", {
         locale: p,
-        connectedAccount: R(e, ["showProvider"]),
-        sourceAppPid: r
-      }), h.success(
-        s("unbindOAuthSucceed", {
-          provider: A[e.showProvider || e.provider]
+        connectedAccount: B(e, ["showProvider"]),
+        sourceAppPid: o
+      }), l.success(
+        i("unbindOAuthSucceed", {
+          provider: f[e.showProvider || e.provider]
         })
-      ), j(e);
-    } catch (r) {
-      h.error(
-        O(
-          r,
-          s("unbindOAuthFailed", {
-            provider: A[e.showProvider || e.provider]
+      ), _(e);
+    } catch (o) {
+      l.error(
+        m(
+          o,
+          i("unbindOAuthFailed", {
+            provider: f[e.showProvider || e.provider]
           })
         )
       );
     } finally {
-      o.unbindAuthLoading = !1;
+      r.unbindAuthLoading = !1;
     }
-  }, N = async (t = {}) => {
+  }, z = async (t = {}) => {
     try {
-      const { data: e } = await g.current.get("/passports");
-      e.length > 0 ? (i.open = !0, i.currentUser = t, i.passports = e || []) : h.error(s("noPassports"));
+      const { data: e } = await A.current.get("/passports");
+      e.length > 0 ? (c.open = !0, c.currentUser = t, c.passports = e || []) : l.error(i("noPassports"));
     } catch (e) {
-      h.error(e.message || s("getPassportFailed"));
+      l.error(e.message || i("getPassportFailed"));
     }
-  }, z = d((...t) => {
-    i.reset(), x(...t);
+  }, H = u((...t) => {
+    c.reset(), I(...t);
   }), V = (t) => {
-    o.baseUrl = t || "/";
-  }, X = d(async ({ provider: t } = {}, { action: e = "login", ...r } = {}) => {
-    const n = o.baseUrl;
-    if (r?.sourceAppPid === window.blocklet?.appPid)
-      o.baseUrl = window.blocklet?.appUrl || "/";
-    else if (r?.sourceAppPid) {
-      const u = await P(), a = k(u), f = F(u);
-      a && f?.appPid && r?.sourceAppPid === f?.appPid && (o.baseUrl = f.appUrl);
+    r.baseUrl = t || "/";
+  }, G = u(async ({ provider: t } = {}, { action: e = "login", ...o } = {}) => {
+    const n = r.baseUrl;
+    if (o?.sourceAppPid === window.blocklet?.appPid)
+      r.baseUrl = window.blocklet?.appUrl || "/";
+    else if (o?.sourceAppPid) {
+      const d = await P(), s = C(d), g = R(d);
+      s && g?.appPid && o?.sourceAppPid === g?.appPid && (r.baseUrl = g.appUrl);
     }
-    const c = window?.blocklet?.componentId;
+    const a = window?.blocklet?.componentId;
     try {
-      const u = await y({ provider: t });
-      if (o.baseUrl = n, await ie(100), u) {
-        const a = {
-          ...r,
+      const d = await L({ provider: t });
+      if (r.baseUrl = n, await ce(100), d) {
+        const s = {
+          ...o,
           action: e,
           locale: p,
-          code: u,
+          code: d,
           provider: t,
-          componentId: c
+          componentId: a
         };
-        Y(a.inviter) && window.localStorage.getItem("inviter") && (a.inviter = window.localStorage.getItem("inviter"));
-        const f = ["connect-to-did-space", "connect-to-did-domain"].includes(a.action) ? "login" : a.action, { data: H } = await g.current.post("/login", { ...a, action: f }), L = se(H);
-        return L.provider = t, L;
+        Q(s.inviter) && window.localStorage.getItem("inviter") && (s.inviter = window.localStorage.getItem("inviter"));
+        const g = ["connect-to-did-space", "connect-to-did-domain"].includes(s.action) ? "login" : s.action, { data: $ } = await A.current.post("/login", { ...s, action: g }), y = ue($);
+        return y.provider = t, y;
       }
-      return o.baseUrl = n, null;
-    } catch (u) {
-      const a = O(u, s("loginOAuthFailed", { provider: A[t] }));
-      throw o.baseUrl = n, new Error(a);
+      return r.baseUrl = n, null;
+    } catch (d) {
+      const s = m(d, i("loginOAuthFailed", { provider: f[t] }));
+      throw r.baseUrl = n, new Error(s);
     }
-  }), G = d(() => {
+  }), K = u(() => {
   });
-  return /* @__PURE__ */ K(
-    de,
+  return /* @__PURE__ */ J(
+    fe,
     {
       value: {
         locale: p,
         getOAuthConfigs: U,
-        getOAuthConfigList: q,
-        bindOAuth: I,
-        unbindOAuth: D,
-        loginOAuth: X,
-        logoutOAuth: G,
-        switchOAuthPassport: N,
-        baseUrl: o.baseUrl,
+        getOAuthConfigList: X,
+        bindOAuth: q,
+        unbindOAuth: W,
+        loginOAuth: G,
+        logoutOAuth: K,
+        switchOAuthPassport: z,
+        baseUrl: r.baseUrl,
         setBaseUrl: V,
         oauthState: b,
-        unbindAuthLoading: o.unbindAuthLoading,
-        bindAuthLoading: o.bindAuthLoading,
-        t: s
+        unbindAuthLoading: r.unbindAuthLoading,
+        bindAuthLoading: r.bindAuthLoading,
+        t: i
       },
       children: [
         w,
-        /* @__PURE__ */ W(
-          ae,
+        N,
+        /* @__PURE__ */ E(
+          le,
           {
-            api: g.current,
+            api: A.current,
             locale: p,
-            switchState: i,
-            onSwitchPassport: z,
-            session: M
+            switchState: c,
+            onSwitchPassport: H,
+            session: Y
           }
         )
       ]
     }
   );
 }
-function Se() {
-  const w = J(E);
-  return R(w, ["locale", "getToken"]);
+function _e() {
+  const w = ee(D);
+  return B(w, ["locale", "getToken"]);
 }
-ue.propTypes = {
-  children: l.node.isRequired,
-  locale: l.string,
-  onBindOAuth: l.func,
-  onUnbindOAuth: l.func,
-  onSwitchPassport: l.func,
-  session: l.object
+Ae.propTypes = {
+  children: h.node.isRequired,
+  locale: h.string,
+  onBindOAuth: h.func,
+  onUnbindOAuth: h.func,
+  onSwitchPassport: h.func,
+  session: h.object
 };
 export {
-  Le as OAuthConsumer,
-  E as OAuthContext,
-  ue as OAuthProvider,
-  Se as useOAuth
+  Te as OAuthConsumer,
+  D as OAuthContext,
+  Ae as OAuthProvider,
+  _e as useOAuth
 };

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const o = "3.2.0", s = {
+const o = "3.2.2", s = {
   version: o
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "description": "Client side library to work with DID Connect by ArcBlock.",
   "keywords": [
     "react",
@@ -32,16 +32,16 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "3.2.0",
-    "@arcblock/did": "^1.27.2",
-    "@arcblock/icons": "3.2.0",
-    "@arcblock/react-hooks": "3.2.0",
-    "@arcblock/ws": "^1.27.2",
+    "@arcblock/bridge": "3.2.2",
+    "@arcblock/did": "^1.27.3",
+    "@arcblock/icons": "3.2.2",
+    "@arcblock/react-hooks": "3.2.2",
+    "@arcblock/ws": "^1.27.3",
     "@fontsource/lexend": "^5.2.9",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^5.2.1",
-    "@ocap/util": "^1.27.2",
+    "@ocap/util": "^1.27.3",
     "@simplewebauthn/browser": "^13.1.0",
     "ahooks": "^3.8.5",
     "axios": "^1.10.0",
@@ -80,5 +80,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "b43cf8c7c072e6d6bbaa72d985672945566af2dc"
+  "gitHead": "d6da30f57d7f5f855462aa75b4189fb8be48fecc"
 }

package/src/OAuth/bind-conflict-alert.jsx

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { Box, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import UserCard from '@arcblock/ux/lib/UserCard';
+import { joinURL, withQuery } from 'ufo';
+import { useMemoizedFn } from 'ahooks';
+
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '../constant';
+
+export default function BindConflictAlert({ data }) {
+  const { message, data: userInfo } = data;
+
+  const locale = useMemo(() => {
+    return new URLSearchParams(window.location.search).get('locale') || 'en';
+  }, []);
+
+  const visitUser = useMemoizedFn(() => {
+    window.open(
+      withQuery(joinURL(BLOCKLET_SERVICE_PATH_PREFIX, 'user'), {
+        locale,
+        did: userInfo.did,
+      }),
+      '_blank'
+    );
+  });
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <Typography sx={{ fontSize: 14, color: 'text.secondary' }}>{message}</Typography>
+      <UserCard showDid did={userInfo.did} onAvatarClick={visitUser} />
+    </Box>
+  );
+}
+
+BindConflictAlert.propTypes = {
+  data: PropTypes.object.isRequired,
+};

package/src/OAuth/context.jsx

@@ -7,6 +7,7 @@ import noop from 'lodash/noop';
 import omit from 'lodash/omit';
 import { joinURL } from 'ufo';
 import { translate } from '@arcblock/ux/lib/Locale/util';
+import useConfirm from '@arcblock/ux/lib/Dialog/use-confirm';
 import { getFederatedEnabled, getMaster, getBlockletData } from '@arcblock/ux/lib/Util/federated';
 import { LOGIN_PROVIDER_NAME, BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
 
@@ -14,6 +15,9 @@ import { LOGIN_PROVIDER_NAME, BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/
 import { getApiErrorMessage, createAxios, openPopup, runPopup, sleep } from '../utils';
 import { PassportSwitcher, parseResponse } from '../components/PassportSwitcher';
 
+import useMobile from '../Session/hooks/use-mobile';
+import BindConflictAlert from './bind-conflict-alert';
+
 const OAuthContext = createContext({});
 const { Provider, Consumer: OAuthConsumer } = OAuthContext;
 
@@ -32,6 +36,9 @@ const translations = {
     loginRequired: '授权请求被拒绝',
     cancelAuth: '取消授权',
     noPassports: '没有可更换的通行证',
+    confirm: '我知道了',
+    ALREADY_EXIST: '当前账户已存在',
+    ALREADY_BIND: '当前账户绑定过 {provider}',
   },
   en: {
     bindOAuth: 'Bind third party login',
@@ -45,6 +52,9 @@ const translations = {
     loginRequired: 'You have declined the authentication request',
     cancelAuth: 'Cancel authentication',
     noPassports: 'No passports to switch',
+    confirm: 'I know',
+    ALREADY_EXIST: 'Your account already exists',
+    ALREADY_BIND: 'Your account is already bind to {provider}',
   },
 };
 
@@ -56,6 +66,15 @@ function OAuthProvider({
   onSwitchPassport = noop,
   session = null,
 }) {
+  const isMobile = useMobile();
+  const { confirmApi, confirmHolder } = useConfirm({
+    maxWidth: false,
+    PaperProps: {
+      style: {
+        minWidth: isMobile ? '100%' : 600,
+      },
+    },
+  });
   const state = useReactive({
     baseUrl: '/',
     bindFnSession: undefined,
@@ -189,7 +208,31 @@ function OAuthProvider({
       Toast.success(t('bindOAuthSucceed', { provider: LOGIN_PROVIDER_NAME[oauthItem.provider] }));
       onBindOAuth(oauthItem);
     } catch (err) {
-      Toast.error(getApiErrorMessage(err, t('bindOAuthFailed', { provider: LOGIN_PROVIDER_NAME[oauthItem.provider] })));
+      // 对已存在的错误类型特殊处理
+      const statusCode = err.response?.status;
+      if (statusCode === 409) {
+        const { data = {} } = err.response || {};
+        const { code } = data || {};
+        if (['ALREADY_EXIST', 'ALREADY_BIND'].includes(code)) {
+          confirmApi.open({
+            title: t(code, { provider: oauthItem.provider }),
+            showCancelButton: false,
+            confirmButtonText: t('confirm'),
+            content: <BindConflictAlert data={data} />,
+            onConfirm(close) {
+              close();
+            },
+          });
+        } else {
+          Toast.error(
+            getApiErrorMessage(err, t('bindOAuthFailed', { provider: LOGIN_PROVIDER_NAME[oauthItem.provider] }))
+          );
+        }
+      } else {
+        Toast.error(
+          getApiErrorMessage(err, t('bindOAuthFailed', { provider: LOGIN_PROVIDER_NAME[oauthItem.provider] }))
+        );
+      }
     } finally {
       state.bindAuthLoading = false;
     }
@@ -326,6 +369,7 @@ function OAuthProvider({
         t,
       }}>
       {children}
+      {confirmHolder}
       <PassportSwitcher
         api={api.current}
         locale={locale}