@arcblock/did-connect-react 3.1.0

package/src/OAuth/context.jsx

@@ -0,0 +1,346 @@
+import PropTypes from 'prop-types';
+import isUndefined from 'lodash/isUndefined';
+import { createContext, use } from 'react';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useCreation, useLatest, useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+import omit from 'lodash/omit';
+import { joinURL } from 'ufo';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { getFederatedEnabled, getMaster, getBlockletData } from '@arcblock/ux/lib/Util/federated';
+import { LOGIN_PROVIDER_NAME, BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
+
+// eslint-disable-next-line import/no-unresolved
+import { getApiErrorMessage, createAxios, openPopup, runPopup, sleep } from '../utils';
+import { PassportSwitcher, parseResponse } from './passport-switcher';
+
+const OAuthContext = createContext({});
+const { Provider, Consumer: OAuthConsumer } = OAuthContext;
+
+const prefix = `${BLOCKLET_SERVICE_PATH_PREFIX}/api/oauth`;
+
+const translations = {
+  zh: {
+    bindOAuth: '绑定第三方登录',
+    bind: '绑定',
+    noneOAuth: '未配置第三方登录方式',
+    bindOAuthSucceed: '绑定 {provider} 成功',
+    unbindOAuthSucceed: '解绑 {provider} 成功',
+    loginOAuthFailed: '登录 {provider} 失败',
+    bindOAuthFailed: '绑定 {provider} 失败',
+    unbindOAuthFailed: '绑定 {provider} 失败',
+    loginRequired: '授权请求被拒绝',
+    cancelAuth: '取消授权',
+    noPassports: '没有可更换的通行证',
+  },
+  en: {
+    bindOAuth: 'Bind third party login',
+    bind: 'Bind ',
+    noneOAuth: 'Third party login is not configured',
+    bindOAuthSucceed: 'Bind {provider} succeed',
+    unbindOAuthSucceed: 'Unbind {provider} succeed',
+    loginOAuthFailed: 'Login {provider} failed',
+    bindOAuthFailed: 'Bind {provider} failed',
+    unbindOAuthFailed: 'Unbind {provider} failed',
+    loginRequired: 'You have declined the authentication request',
+    cancelAuth: 'Cancel authentication',
+    noPassports: 'No passports to switch',
+  },
+};
+
+function OAuthProvider({ children, locale = 'en', onBindOAuth = noop, onUnbindOAuth = noop, onSwitchPassport = noop }) {
+  const state = useReactive({
+    baseUrl: '/',
+    bindFnSession: undefined,
+    bindAuthLoading: false,
+    unbindAuthLoading: false,
+  });
+  const switchState = useReactive({
+    open: false,
+    currentUser: null,
+    passports: [],
+    selectedPassport: undefined,
+    reset() {
+      switchState.open = false;
+      switchState.currentUser = null;
+      switchState.passports = [];
+      switchState.selectedPassport = undefined;
+    },
+  });
+  const oauthState = useReactive({
+    user: null,
+    // loginLoading: false,
+    checking: false,
+    loading: false,
+    error: '',
+    status: '', // scanned, succeed, error
+    reset({ status = '' } = {}) {
+      oauthState.loading = !!status;
+      oauthState.checking = false;
+      oauthState.error = '';
+      oauthState.status = status;
+    },
+  });
+
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const rawApi = useCreation(() => {
+    return createAxios({
+      // NOTICE: 请求必须向当前站点发起
+      baseURL: prefix,
+    });
+  }, [state.baseUrl, prefix]);
+
+  const api = useLatest(rawApi);
+
+  const getBlocklet = useMemoizedFn(async () => {
+    if (state.baseUrl === '/') {
+      return window.blocklet;
+    }
+    try {
+      const url = new URL(state.baseUrl);
+      if (url.host === window.location.host) {
+        return window.blocklet;
+      }
+      // eslint-disable-next-line no-empty
+    } catch {}
+
+    const blocklet = await getBlockletData(state.baseUrl);
+    return blocklet;
+  });
+
+  const getOAuthConfigs = useMemoizedFn(async ({ sourceAppPid } = {}) => {
+    const blocklet = await getBlocklet();
+    const federatedEnabled = getFederatedEnabled(blocklet);
+    const master = getMaster(blocklet);
+    if (federatedEnabled && master?.appPid && sourceAppPid === master?.appPid) {
+      const masterBlocklet = await getBlockletData(master.appUrl);
+      return masterBlocklet?.settings?.oauth || {};
+    }
+    return blocklet?.settings?.oauth || {};
+  });
+  const getOAuthConfigList = useMemoizedFn(async ({ sourceAppPid } = {}) => {
+    const oauthConfigs = await getOAuthConfigs({ sourceAppPid });
+    const oauthConfigList = Object.entries(oauthConfigs)
+      .map(([key, value]) => {
+        return { ...value, provider: key };
+      })
+      .filter((item) => item.enabled)
+      .sort((a, b) => {
+        if (a?.order !== undefined && b?.order !== undefined) {
+          return a.order - b.order;
+        }
+        if (a?.order !== undefined) {
+          return -1;
+        }
+        return 1;
+      });
+    return oauthConfigList;
+  });
+
+  const getCode = useMemoizedFn(async ({ provider } = {}) => {
+    const popup = openPopup(joinURL(state.baseUrl, BLOCKLET_SERVICE_PATH_PREFIX, '/oauth/login', provider), {
+      name: 'oauth-login:popup',
+      offsetX: 650,
+      height: 700,
+      width: 500,
+    });
+    try {
+      const data = await runPopup({
+        popup,
+        closeTimeout: 0,
+      });
+      if (data?.response) {
+        return data.response?.code;
+      }
+
+      return null;
+    } catch (err) {
+      if (err?.message === 'Popup closed') {
+        throw new Error(t('cancelAuth'));
+      }
+      throw err;
+    }
+  });
+
+  const bindOAuth = async ({ session, oauthItem } = {}) => {
+    state.bindFnSession = session;
+    state.bindAuthLoading = true;
+
+    try {
+      const code = await getCode(oauthItem);
+      const sourceAppPid = state.bindFnSession?.user?.sourceAppPid;
+      await api.current.post('/bind', {
+        locale,
+        provider: oauthItem.provider,
+        code,
+        sourceAppPid,
+      });
+
+      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] })));
+    } finally {
+      state.bindAuthLoading = false;
+    }
+  };
+
+  const unbindOAuth = async ({ session, connectedAccount }) => {
+    state.unbindAuthLoading = true;
+    try {
+      const sourceAppPid = session?.user?.sourceAppPid;
+      await api.current.post('/unbind', {
+        locale,
+        connectedAccount: omit(connectedAccount, ['showProvider']),
+        sourceAppPid,
+      });
+
+      Toast.success(
+        t('unbindOAuthSucceed', {
+          provider: LOGIN_PROVIDER_NAME[connectedAccount.showProvider || connectedAccount.provider],
+        })
+      );
+      onUnbindOAuth(connectedAccount);
+    } catch (err) {
+      Toast.error(
+        getApiErrorMessage(
+          err,
+          t('unbindOAuthFailed', {
+            provider: LOGIN_PROVIDER_NAME[connectedAccount.showProvider || connectedAccount.provider],
+          })
+        )
+      );
+    } finally {
+      state.unbindAuthLoading = false;
+    }
+  };
+
+  const switchOAuthPassport = async (user = {}) => {
+    try {
+      const { data: passports } = await api.current.get('/passports');
+      if (passports.length > 0) {
+        switchState.open = true;
+        switchState.currentUser = user;
+        switchState.passports = passports || [];
+      } else {
+        Toast.error(t('noPassports'));
+      }
+    } catch (err) {
+      Toast.error(err.message || t('getPassportFailed'));
+    }
+  };
+
+  const handleSwitchPassport = useMemoizedFn((...args) => {
+    switchState.reset();
+    onSwitchPassport(...args);
+  });
+
+  const setBaseUrl = (value) => {
+    state.baseUrl = value || '/';
+  };
+
+  const loginOAuth = useMemoizedFn(async ({ provider } = {}, { action = 'login', ...extraParams } = {}) => {
+    // 打开 oauth 弹窗
+    // 弹窗中回调 code 或者 token 给我
+    // 通过 code 或 token 去执行登录操作
+    const backupBaseUrl = state.baseUrl;
+    if (extraParams?.sourceAppPid === window.blocklet?.appPid) {
+      state.baseUrl = window.blocklet?.appUrl || '/';
+    } else if (extraParams?.sourceAppPid) {
+      const blocklet = await getBlocklet();
+      const federatedEnabled = getFederatedEnabled(blocklet);
+      const master = getMaster(blocklet);
+      if (federatedEnabled && master?.appPid && extraParams?.sourceAppPid === master?.appPid) {
+        state.baseUrl = master.appUrl;
+      }
+    }
+
+    const componentId = window?.blocklet?.componentId;
+
+    try {
+      const code = await getCode({ provider });
+      // 获取 code 必须设置为主站的 appUrl，设置完后就恢复其原有值
+      state.baseUrl = backupBaseUrl;
+      await sleep(100);
+      if (code) {
+        const payload = {
+          ...extraParams,
+          action,
+          locale,
+          code,
+          provider,
+          componentId,
+        };
+        if (isUndefined(payload.inviter) && window.localStorage.getItem('inviter')) {
+          payload.inviter = window.localStorage.getItem('inviter');
+        }
+
+        // @FIXME: 暂时兼容一下 connect-to-did-space 的情况 @zhanghan
+        // FIXME: @zhanghan 增强安全性，防止 code 泄漏后就可以直接登录。之后可以尝试将 service 接入 CSRF-token
+        const loginWithAction = ['connect-to-did-space', 'connect-to-did-domain'].includes(payload.action)
+          ? 'login'
+          : payload.action;
+        const { data: loginData } = await api.current.post('/login', { ...payload, action: loginWithAction });
+
+        const loginResult = parseResponse(loginData);
+        loginResult.provider = provider;
+
+        return loginResult;
+      }
+      state.baseUrl = backupBaseUrl;
+      return null;
+    } catch (err) {
+      const errMsg = getApiErrorMessage(err, t('loginOAuthFailed', { provider: LOGIN_PROVIDER_NAME[provider] }));
+      state.baseUrl = backupBaseUrl;
+      throw new Error(errMsg);
+    }
+  });
+  const logoutOAuth = useMemoizedFn(() => {});
+
+  return (
+    <Provider
+      value={{
+        locale,
+        getOAuthConfigs,
+        getOAuthConfigList,
+        bindOAuth,
+        unbindOAuth,
+        loginOAuth,
+        logoutOAuth,
+        switchOAuthPassport,
+        baseUrl: state.baseUrl,
+        setBaseUrl,
+        oauthState,
+        unbindAuthLoading: state.unbindAuthLoading,
+        bindAuthLoading: state.bindAuthLoading,
+        t,
+      }}>
+      {children}
+      <PassportSwitcher
+        api={api.current}
+        locale={locale}
+        switchState={switchState}
+        onSwitchPassport={handleSwitchPassport}
+      />
+    </Provider>
+  );
+}
+
+function useOAuth() {
+  const context = use(OAuthContext);
+
+  return omit(context, ['locale', 'getToken']);
+}
+
+OAuthProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  locale: PropTypes.string,
+  onBindOAuth: PropTypes.func,
+  onUnbindOAuth: PropTypes.func,
+  onSwitchPassport: PropTypes.func,
+};
+
+export { OAuthContext, OAuthConsumer, OAuthProvider, useOAuth };

package/src/OAuth/guest.svg

@@ -0,0 +1,20 @@
+<svg width="420" height="475" viewBox="0 0 420 475" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="418" height="473" rx="19" fill="#FBFBFB"/>
+<g clip-path="url(#clip0_8323_86657)">
+<rect opacity="0.7" y="100" width="420" height="168" fill="#DDDDDD"/>
+</g>
+<circle cx="210" cy="248" r="60" fill="#C4C5CA"/>
+<path d="M181 284L188.2 276.8L195.4 284L202.6 273.2L209.8 284L217 273.2L224.2 284L231.4 276.8L238.6 284V240.8C238.6 224.893 225.707 212 209.8 212C193.893 212 181 224.893 181 240.8V284Z" fill="#C4C5CA" stroke="white" stroke-width="5" stroke-linejoin="round"/>
+<path d="M200.797 240.812H204.397H200.797ZM222.397 240.812H225.997H222.397Z" fill="#C4C5CA"/>
+<path d="M200.797 240.812H204.397M222.397 240.812H225.997" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.7" d="M24 29H213V69H24V29Z" fill="#C4C5CA"/>
+<rect opacity="0.42" x="313" y="24" width="83" height="14" fill="#C4C5CA"/>
+<rect opacity="0.7" x="291" y="50" width="105" height="26" fill="#C4C5CA"/>
+<path d="M177.388 388.4C175.655 388.4 174.068 388.187 172.628 387.76C171.215 387.333 169.948 386.707 168.828 385.88C167.735 385.053 166.748 384.053 165.868 382.88L169.628 378.6C170.935 380.413 172.228 381.653 173.508 382.32C174.815 382.96 176.228 383.28 177.748 383.28C178.575 383.28 179.308 383.173 179.948 382.96C180.615 382.72 181.135 382.387 181.508 381.96C181.881 381.533 182.068 381.027 182.068 380.44C182.068 380.013 181.975 379.627 181.788 379.28C181.601 378.907 181.335 378.587 180.988 378.32C180.641 378.027 180.228 377.773 179.748 377.56C179.268 377.32 178.735 377.12 178.148 376.96C177.561 376.773 176.921 376.627 176.228 376.52C174.735 376.173 173.428 375.76 172.308 375.28C171.188 374.773 170.255 374.16 169.508 373.44C168.761 372.693 168.201 371.853 167.828 370.92C167.481 369.987 167.308 368.933 167.308 367.76C167.308 366.56 167.575 365.453 168.108 364.44C168.641 363.4 169.375 362.507 170.308 361.76C171.268 361.013 172.361 360.44 173.588 360.04C174.841 359.64 176.161 359.44 177.548 359.44C179.255 359.44 180.748 359.64 182.028 360.04C183.308 360.413 184.415 360.96 185.348 361.68C186.308 362.4 187.108 363.28 187.748 364.32L183.948 368C183.388 367.253 182.775 366.627 182.108 366.12C181.468 365.613 180.761 365.24 179.988 365C179.241 364.733 178.468 364.6 177.668 364.6C176.788 364.6 176.028 364.72 175.388 364.96C174.748 365.173 174.241 365.493 173.868 365.92C173.521 366.347 173.348 366.867 173.348 367.48C173.348 367.96 173.468 368.387 173.708 368.76C173.948 369.133 174.295 369.467 174.748 369.76C175.201 370.027 175.748 370.267 176.388 370.48C177.028 370.693 177.735 370.88 178.508 371.04C179.975 371.333 181.295 371.72 182.468 372.2C183.641 372.68 184.641 373.267 185.468 373.96C186.321 374.627 186.975 375.427 187.428 376.36C187.881 377.267 188.108 378.293 188.108 379.44C188.108 381.333 187.655 382.947 186.748 384.28C185.841 385.613 184.588 386.64 182.988 387.36C181.388 388.053 179.521 388.4 177.388 388.4ZM194.782 388V361.48H200.462V388H194.782ZM190.822 371.92V366.84H204.782V371.92H190.822ZM216.209 388.4C214.449 388.4 212.863 387.92 211.449 386.96C210.036 386 208.916 384.693 208.089 383.04C207.263 381.387 206.849 379.493 206.849 377.36C206.849 375.227 207.263 373.347 208.089 371.72C208.943 370.067 210.089 368.773 211.529 367.84C212.969 366.88 214.609 366.4 216.449 366.4C217.489 366.4 218.436 366.56 219.289 366.88C220.169 367.173 220.929 367.587 221.569 368.12C222.236 368.653 222.796 369.267 223.249 369.96C223.703 370.653 224.023 371.4 224.209 372.2L223.009 372V366.84H228.649V388H222.929V382.92L224.209 382.8C223.996 383.547 223.649 384.253 223.169 384.92C222.689 385.587 222.089 386.187 221.369 386.72C220.676 387.227 219.889 387.64 219.009 387.96C218.129 388.253 217.196 388.4 216.209 388.4ZM217.769 383.48C218.836 383.48 219.769 383.227 220.569 382.72C221.369 382.213 221.983 381.507 222.409 380.6C222.863 379.667 223.089 378.587 223.089 377.36C223.089 376.16 222.863 375.107 222.409 374.2C221.983 373.293 221.369 372.587 220.569 372.08C219.769 371.547 218.836 371.28 217.769 371.28C216.729 371.28 215.809 371.547 215.009 372.08C214.236 372.587 213.623 373.293 213.169 374.2C212.716 375.107 212.489 376.16 212.489 377.36C212.489 378.587 212.716 379.667 213.169 380.6C213.623 381.507 214.236 382.213 215.009 382.72C215.809 383.227 216.729 383.48 217.769 383.48ZM236.835 397.2L241.475 386.32L241.555 389.6L231.235 366.84H237.675L242.835 379.04C243.048 379.493 243.248 380.027 243.435 380.64C243.648 381.227 243.822 381.8 243.955 382.36L242.995 382.76C243.155 382.307 243.342 381.787 243.555 381.2C243.768 380.613 243.982 379.987 244.195 379.32L248.635 366.84H255.115L246.235 388L242.595 397.2H236.835ZM92.8005 438L103.76 410H109.12L120.04 438H113.88L108.24 422.92C108.08 422.493 107.88 421.947 107.64 421.28C107.427 420.613 107.2 419.907 106.96 419.16C106.72 418.413 106.494 417.707 106.28 417.04C106.067 416.347 105.907 415.773 105.8 415.32L106.88 415.28C106.72 415.893 106.534 416.533 106.32 417.2C106.134 417.84 105.934 418.507 105.72 419.2C105.507 419.867 105.28 420.52 105.04 421.16C104.8 421.8 104.574 422.427 104.36 423.04L98.7205 438H92.8005ZM97.8805 432.12L99.8405 427.28H112.68L114.68 432.12H97.8805ZM123.172 438V416.84H128.612L128.772 421.16L127.652 421.64C127.945 420.68 128.465 419.813 129.212 419.04C129.985 418.24 130.905 417.6 131.972 417.12C133.039 416.64 134.159 416.4 135.332 416.4C136.932 416.4 138.265 416.72 139.332 417.36C140.425 418 141.239 418.973 141.772 420.28C142.332 421.56 142.612 423.147 142.612 425.04V438H136.932V425.48C136.932 424.52 136.799 423.72 136.532 423.08C136.265 422.44 135.852 421.973 135.292 421.68C134.759 421.36 134.092 421.227 133.292 421.28C132.652 421.28 132.052 421.387 131.492 421.6C130.959 421.787 130.492 422.067 130.092 422.44C129.719 422.813 129.412 423.24 129.172 423.72C128.959 424.2 128.852 424.72 128.852 425.28V438H126.052C125.439 438 124.892 438 124.412 438C123.932 438 123.519 438 123.172 438ZM157.895 438.4C155.735 438.4 153.802 437.933 152.095 437C150.415 436.04 149.082 434.733 148.095 433.08C147.135 431.427 146.655 429.533 146.655 427.4C146.655 425.267 147.135 423.387 148.095 421.76C149.082 420.107 150.415 418.8 152.095 417.84C153.802 416.88 155.735 416.4 157.895 416.4C160.028 416.4 161.935 416.88 163.615 417.84C165.322 418.8 166.655 420.107 167.615 421.76C168.575 423.387 169.055 425.267 169.055 427.4C169.055 429.533 168.575 431.427 167.615 433.08C166.655 434.733 165.322 436.04 163.615 437C161.935 437.933 160.028 438.4 157.895 438.4ZM157.895 433.44C158.935 433.44 159.868 433.187 160.695 432.68C161.522 432.147 162.162 431.427 162.615 430.52C163.095 429.587 163.335 428.547 163.335 427.4C163.335 426.227 163.095 425.187 162.615 424.28C162.162 423.347 161.522 422.627 160.695 422.12C159.868 421.587 158.935 421.32 157.895 421.32C156.828 421.32 155.882 421.587 155.055 422.12C154.228 422.653 153.575 423.373 153.095 424.28C152.615 425.187 152.388 426.227 152.415 427.4C152.388 428.547 152.615 429.587 153.095 430.52C153.575 431.427 154.228 432.147 155.055 432.68C155.882 433.187 156.828 433.44 157.895 433.44ZM173.328 438V416.84H178.768L178.928 421.16L177.808 421.64C178.102 420.68 178.622 419.813 179.368 419.04C180.142 418.24 181.062 417.6 182.128 417.12C183.195 416.64 184.315 416.4 185.488 416.4C187.088 416.4 188.422 416.72 189.488 417.36C190.582 418 191.395 418.973 191.928 420.28C192.488 421.56 192.768 423.147 192.768 425.04V438H187.088V425.48C187.088 424.52 186.955 423.72 186.688 423.08C186.422 422.44 186.008 421.973 185.448 421.68C184.915 421.36 184.248 421.227 183.448 421.28C182.808 421.28 182.208 421.387 181.648 421.6C181.115 421.787 180.648 422.067 180.248 422.44C179.875 422.813 179.568 423.24 179.328 423.72C179.115 424.2 179.008 424.72 179.008 425.28V438H176.208C175.595 438 175.048 438 174.568 438C174.088 438 173.675 438 173.328 438ZM200.976 447.2L205.616 436.32L205.696 439.6L195.376 416.84H201.816L206.976 429.04C207.189 429.493 207.389 430.027 207.576 430.64C207.789 431.227 207.962 431.8 208.096 432.36L207.136 432.76C207.296 432.307 207.482 431.787 207.696 431.2C207.909 430.613 208.122 429.987 208.336 429.32L212.776 416.84H219.256L210.376 438L206.736 447.2H200.976ZM222.273 438V416.84H227.753L227.873 420.88L227.033 421.04C227.326 420.347 227.713 419.72 228.193 419.16C228.673 418.6 229.233 418.12 229.873 417.72C230.539 417.32 231.233 417.013 231.953 416.8C232.673 416.56 233.393 416.44 234.113 416.44C235.206 416.44 236.193 416.613 237.073 416.96C237.953 417.307 238.699 417.853 239.313 418.6C239.926 419.32 240.406 420.28 240.753 421.48L239.873 421.4L240.153 420.76C240.499 420.12 240.939 419.547 241.473 419.04C242.006 418.507 242.606 418.053 243.273 417.68C243.939 417.28 244.633 416.973 245.353 416.76C246.073 416.547 246.779 416.44 247.473 416.44C249.126 416.44 250.499 416.773 251.593 417.44C252.686 418.08 253.499 419.053 254.033 420.36C254.593 421.667 254.873 423.267 254.873 425.16V438H249.193V425.56C249.193 424.6 249.059 423.813 248.793 423.2C248.526 422.587 248.139 422.133 247.633 421.84C247.126 421.52 246.473 421.36 245.673 421.36C245.059 421.36 244.486 421.467 243.953 421.68C243.446 421.867 242.993 422.147 242.593 422.52C242.219 422.867 241.926 423.28 241.713 423.76C241.499 424.24 241.393 424.773 241.393 425.36V438H235.713V425.52C235.713 424.64 235.566 423.893 235.273 423.28C235.006 422.64 234.619 422.16 234.113 421.84C233.606 421.52 232.979 421.36 232.233 421.36C231.619 421.36 231.046 421.467 230.513 421.68C230.006 421.867 229.566 422.147 229.193 422.52C228.819 422.867 228.513 423.28 228.273 423.76C228.059 424.24 227.953 424.76 227.953 425.32V438H222.273ZM270.121 438.4C267.961 438.4 266.028 437.933 264.321 437C262.641 436.04 261.308 434.733 260.321 433.08C259.361 431.427 258.881 429.533 258.881 427.4C258.881 425.267 259.361 423.387 260.321 421.76C261.308 420.107 262.641 418.8 264.321 417.84C266.028 416.88 267.961 416.4 270.121 416.4C272.255 416.4 274.161 416.88 275.841 417.84C277.548 418.8 278.881 420.107 279.841 421.76C280.801 423.387 281.281 425.267 281.281 427.4C281.281 429.533 280.801 431.427 279.841 433.08C278.881 434.733 277.548 436.04 275.841 437C274.161 437.933 272.255 438.4 270.121 438.4ZM270.121 433.44C271.161 433.44 272.095 433.187 272.921 432.68C273.748 432.147 274.388 431.427 274.841 430.52C275.321 429.587 275.561 428.547 275.561 427.4C275.561 426.227 275.321 425.187 274.841 424.28C274.388 423.347 273.748 422.627 272.921 422.12C272.095 421.587 271.161 421.32 270.121 421.32C269.055 421.32 268.108 421.587 267.281 422.12C266.455 422.653 265.801 423.373 265.321 424.28C264.841 425.187 264.615 426.227 264.641 427.4C264.615 428.547 264.841 429.587 265.321 430.52C265.801 431.427 266.455 432.147 267.281 432.68C268.108 433.187 269.055 433.44 270.121 433.44ZM292.835 438.4C291.288 438.4 289.955 438.067 288.835 437.4C287.742 436.707 286.888 435.733 286.275 434.48C285.688 433.2 285.395 431.667 285.395 429.88V416.84H291.075V428.96C291.075 429.92 291.235 430.76 291.555 431.48C291.875 432.173 292.328 432.707 292.915 433.08C293.502 433.453 294.222 433.64 295.075 433.64C295.688 433.64 296.262 433.547 296.795 433.36C297.328 433.147 297.782 432.853 298.155 432.48C298.528 432.107 298.822 431.667 299.035 431.16C299.248 430.653 299.355 430.107 299.355 429.52V416.84H305.035V438H299.635L299.435 433.64L300.475 433.16C300.155 434.147 299.622 435.04 298.875 435.84C298.128 436.64 297.235 437.267 296.195 437.72C295.155 438.173 294.035 438.4 292.835 438.4ZM317.87 438.4C315.897 438.4 314.137 438.08 312.59 437.44C311.07 436.773 309.843 435.867 308.91 434.72L312.43 431.68C313.257 432.56 314.177 433.2 315.19 433.6C316.203 433.973 317.217 434.16 318.23 434.16C318.63 434.16 318.99 434.12 319.31 434.04C319.657 433.933 319.95 433.8 320.19 433.64C320.43 433.453 320.603 433.24 320.71 433C320.843 432.733 320.91 432.453 320.91 432.16C320.91 431.573 320.67 431.107 320.19 430.76C319.923 430.627 319.51 430.467 318.95 430.28C318.39 430.067 317.67 429.84 316.79 429.6C315.43 429.253 314.27 428.853 313.31 428.4C312.377 427.92 311.63 427.387 311.07 426.8C310.59 426.24 310.217 425.64 309.95 425C309.71 424.333 309.59 423.6 309.59 422.8C309.59 421.84 309.803 420.973 310.23 420.2C310.657 419.4 311.243 418.72 311.99 418.16C312.763 417.6 313.643 417.173 314.63 416.88C315.617 416.56 316.657 416.4 317.75 416.4C318.843 416.4 319.91 416.533 320.95 416.8C321.99 417.067 322.95 417.453 323.83 417.96C324.737 418.44 325.523 419.013 326.19 419.68L323.15 423.04C322.67 422.587 322.123 422.173 321.51 421.8C320.923 421.427 320.31 421.133 319.67 420.92C319.03 420.707 318.457 420.6 317.95 420.6C317.497 420.6 317.083 420.64 316.71 420.72C316.363 420.8 316.07 420.92 315.83 421.08C315.59 421.24 315.403 421.453 315.27 421.72C315.163 421.96 315.11 422.227 315.11 422.52C315.11 422.813 315.177 423.093 315.31 423.36C315.47 423.627 315.683 423.853 315.95 424.04C316.243 424.2 316.67 424.387 317.23 424.6C317.817 424.813 318.603 425.053 319.59 425.32C320.87 425.667 321.95 426.053 322.83 426.48C323.737 426.907 324.457 427.4 324.99 427.96C325.443 428.44 325.777 428.987 325.99 429.6C326.203 430.213 326.31 430.893 326.31 431.64C326.31 432.947 325.937 434.12 325.19 435.16C324.47 436.173 323.47 436.973 322.19 437.56C320.91 438.12 319.47 438.4 317.87 438.4Z" fill="#25292F"/>
+<rect x="1" y="1" width="418" height="558" rx="19" stroke="#DDDDDD" stroke-width="2"/>
+<defs>
+<clipPath id="clip0_8323_86657">
+<rect width="420" height="168" fill="white" transform="translate(0 100)"/>
+</clipPath>
+</defs>
+</svg>

package/src/OAuth/index.jsx

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

package/src/OAuth/passport-switcher.jsx

@@ -0,0 +1,133 @@
+/* eslint-disable react/prop-types */
+import pick from 'lodash/pick';
+import { Confirm } from '@arcblock/ux/lib/Dialog';
+import { Box } from '@mui/material';
+import Toast from '@arcblock/ux/lib/Toast';
+import CardSelector from '@arcblock/ux/lib/CardSelector';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { createPassportSvg } from '@arcblock/ux/lib/Util/passport';
+
+// eslint-disable-next-line import/no-unresolved
+import Guest from './guest.svg?react';
+
+export const parseResponse = (data) => {
+  if (!data) {
+    return {};
+  }
+
+  // for backward compatibility
+  if (typeof data === 'string') {
+    return { sessionToken: data };
+  }
+
+  return pick(data, ['sessionToken', 'refreshToken', 'visitorId', 'destroySessionId']);
+};
+
+const translations = {
+  zh: {
+    switchPassport: '切换通行证',
+    switchPassportFailed: '切换通行证失败',
+    switchPassportSucceed: '切换通行证成功',
+    selectedPassport: '请选择一个通行证',
+    switch: '切换',
+    cancel: '取消',
+    currentRole: '当前角色：',
+    passport: '通行证',
+    getPassportFailed: '获取通行证失败',
+  },
+  en: {
+    switchPassport: 'Switch passport',
+    switchPassportFailed: 'Switch passport failed',
+    switchPassportSucceed: 'Switch passport succeed',
+    selectedPassport: 'Select a passport to switch',
+    switch: 'Switch',
+    cancel: 'Cancel',
+    currentRole: 'Current role: ',
+    passport: 'Passport',
+    getPassportFailed: 'Get passports failed',
+  },
+};
+
+export function PassportSwitcher({ api, locale, switchState, onSwitchPassport }) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const visiblePassports = useCreation(() => {
+    return switchState.passports.filter((x) => x.role !== switchState.currentUser?.role);
+  }, [switchState.passports, switchState.currentUser?.role]);
+
+  const onSwitch = async () => {
+    try {
+      const { data } = await api.post('/switch', { passportId: switchState.selectedPassport });
+      const { sessionToken, refreshToken } = parseResponse(data);
+      onSwitchPassport({ sessionToken, refreshToken });
+      Toast.success(t('switchPassportSucceed'));
+    } catch (err) {
+      Toast.error(err.message || t('switchPassportFailed'));
+    }
+  };
+
+  return (
+    <Confirm
+      open={switchState.open}
+      title={t('switchPassport')}
+      onConfirm={onSwitch}
+      onCancel={switchState.reset}
+      confirmButton={{
+        text: t('switch'),
+        props: {
+          variant: 'contained',
+          color: 'primary',
+        },
+      }}
+      cancelButton={{
+        text: t('cancel'),
+        props: {
+          color: 'inherit',
+        },
+      }}
+      PaperProps={{ style: { width: 600 } }}>
+      <Box
+        sx={{
+          mb: 2,
+        }}>
+        {t('currentRole')}
+        {switchState.currentUser?.role}
+      </Box>
+      <CardSelector
+        width={160}
+        height={240}
+        cardSpace={24}
+        list={[
+          // eslint-disable-next-line react/no-unstable-nested-components
+          () => <Guest />,
+          ...visiblePassports.map((x) => {
+            if (x.display) {
+              return {
+                src: x.display,
+                name: x.title,
+              };
+            }
+
+            // eslint-disable-next-line react/no-unstable-nested-components, react/function-component-definition
+            return () => (
+              <Box
+                key={x.id}
+                sx={{ width: '100%' }}
+                dangerouslySetInnerHTML={{
+                  __html: createPassportSvg(x),
+                }}
+              />
+            );
+          }),
+        ]}
+        onSelect={(index) => {
+          switchState.selectedPassport = index > 0 ? visiblePassports[index - 1].id : undefined;
+        }}
+        defaultIndex={0}
+      />
+    </Confirm>
+  );
+}