@arcblock/did-connect-react 3.1.0

package/src/Passkey/dialog.jsx

@@ -0,0 +1,391 @@
+import PropTypes from 'prop-types';
+import { useImperativeHandle, useState } from 'react';
+import styled from '@emotion/styled';
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+  TextField,
+} from '@mui/material';
+import isEmail from 'validator/lib/isEmail';
+import { Icon } from '@iconify/react';
+import passKeyRoundedIcon from '@iconify-icons/material-symbols/passkey-rounded';
+import { useMemoizedFn } from 'ahooks';
+import Toast from '@arcblock/ux/lib/Toast';
+import Typography from '@arcblock/ux/lib/Typography';
+import { getCookieOptions } from '@arcblock/ux/lib/Util';
+import trim from 'lodash/trim';
+import base64 from 'base64-url';
+import Cookie from 'js-cookie';
+import noop from 'lodash/noop';
+
+import { usePasskey } from './context';
+import { getWebAuthnErrorMessage } from '../utils';
+import { VERIFY_CODE_LENGTH } from './constants';
+
+function PasskeyDialog({ ref, extraParams = {}, createMode = 'connect', action, onSuccess = noop, onError = noop }) {
+  const { api, locale, t, loginPasskey, logoutPasskey, passkeyState, connectPasskey } = usePasskey();
+  const isEmailRequired = createMode === 'register';
+  const [isEmailVerified, setIsEmailVerified] = useState(false);
+  const handleOpenDialog = useMemoizedFn(() => {
+    passkeyState.openDialog = true;
+    passkeyState.error = '';
+    passkeyState.creatingStatus = '';
+    passkeyState.verifyingStatus = '';
+    const initialEmail = passkeyState.email;
+    setIsEmailVerified(initialEmail && isEmailRequired ? !isEmail(initialEmail) : false);
+  });
+  const handleCloseDialog = useMemoizedFn(() => {
+    passkeyState.openDialog = false;
+    passkeyState.error = '';
+    passkeyState.creatingStatus = '';
+    passkeyState.verifyingStatus = '';
+    const initialEmail = passkeyState.email;
+    setIsEmailVerified(initialEmail && isEmailRequired ? !isEmail(initialEmail) : false);
+  });
+
+  const handleSendCode = useMemoizedFn(async (e) => {
+    e.preventDefault();
+    if (isEmailRequired && !isEmail(passkeyState.email)) {
+      setIsEmailVerified(true);
+      return;
+    }
+    setIsEmailVerified(false);
+    passkeyState.loading = true;
+    try {
+      await api.post(`../kyc/email/send?locale=${locale}`, { email: passkeyState.email });
+      passkeyState.sent = true;
+      Toast.success(t('codeSentSuccess'));
+    } catch (error) {
+      Toast.error(error.message);
+      document.getElementById('email-input')?.focus();
+    } finally {
+      passkeyState.loading = false;
+    }
+  });
+
+  const handleVerifyPasskey = useMemoizedFn(async (credentialId = '') => {
+    try {
+      passkeyState.verifying = true;
+      passkeyState.error = '';
+      if (!credentialId) {
+        passkeyState.verifyingStatus = '';
+      }
+
+      const result = await loginPasskey({
+        ...extraParams,
+        action,
+        credentialId,
+      });
+
+      const cookieOptions = getCookieOptions({ expireInDays: 7 });
+      Cookie.remove('connected_did', cookieOptions);
+      Cookie.remove('connected_pk', cookieOptions);
+      Cookie.remove('connected_wallet_os', cookieOptions);
+
+      passkeyState.verifying = false;
+      if (result?.sessionToken) {
+        passkeyState.verifyingStatus = 'succeed';
+        onSuccess({ ...result, encrypted: false }, (val) => val);
+      }
+    } catch (err) {
+      console.error('Failed to verify passkey', err);
+      const errorMessage = getWebAuthnErrorMessage(err, t('verifyPasskeyFailed'));
+      passkeyState.verifying = false;
+      passkeyState.error = errorMessage;
+      passkeyState.verifyingStatus = 'error';
+      await logoutPasskey();
+      onError(new Error(errorMessage));
+    }
+  });
+
+  const handleCreatePasskey = useMemoizedFn(async () => {
+    if (isEmailRequired && !isEmail(passkeyState.email)) {
+      setIsEmailVerified(true);
+      return;
+    }
+    setIsEmailVerified(false);
+    passkeyState.creating = true;
+    passkeyState.error = '';
+    passkeyState.creatingStatus = '';
+
+    try {
+      const result = await connectPasskey({
+        ...extraParams,
+        action,
+        purpose: isEmailRequired ? 'register' : 'connect',
+        email: isEmailRequired ? base64.encode(passkeyState.email) : '',
+      });
+      if (!result) {
+        // 用户取消的操作
+        passkeyState.error = t('cancelAuth');
+        passkeyState.creatingStatus = 'error';
+        passkeyState.creating = false;
+        passkeyState.verifying = false;
+        passkeyState.verifyingStatus = '';
+        return;
+      }
+      passkeyState.creating = false;
+      passkeyState.openDialog = false;
+      passkeyState.creatingStatus = 'succeed';
+
+      if (createMode === 'connect') {
+        onSuccess({ ...result, encrypted: false }, (val) => val);
+      } else if (result?.credentialId) {
+        handleVerifyPasskey(result.credentialId);
+      }
+    } catch (err) {
+      console.error('Failed to create passkey', err);
+      passkeyState.creating = false;
+      passkeyState.error = getWebAuthnErrorMessage(err, t('createPasskeyFailed'));
+      passkeyState.creatingStatus = 'error';
+    }
+  });
+
+  const handleVerifyCode = useMemoizedFn(async (e) => {
+    if (e) e.preventDefault();
+    passkeyState.loading = true;
+    try {
+      await api.post(`../kyc/email/verify?locale=${locale}`, { code: passkeyState.code });
+      passkeyState.verified = true;
+      handleCreatePasskey();
+    } catch (error) {
+      Toast.error(error.message);
+      passkeyState.verified = false;
+      document.getElementById(`code-input-${trim(passkeyState.code).length - 1}`)?.focus();
+    } finally {
+      passkeyState.loading = false;
+    }
+  });
+
+  useImperativeHandle(ref, () => {
+    return {
+      open: handleOpenDialog,
+      close: handleCloseDialog,
+      handleVerifyCode,
+    };
+  }, [handleOpenDialog, handleCloseDialog, handleVerifyCode]);
+
+  return (
+    <StyledDialog
+      open={passkeyState.openDialog}
+      onClose={handleCloseDialog}
+      fullWidth
+      maxWidth="sm"
+      fullScreen={window.innerWidth < 600}>
+      <StyledDialogTitle>
+        <KeyIcon>
+          <Icon icon={passKeyRoundedIcon} fontSize={24} color="initial" />
+        </KeyIcon>
+        {t('createPasskey')}
+      </StyledDialogTitle>
+      <StyledDialogContent>
+        <Typography variant="body1">{t('createPasskeyDesc1')}</Typography>
+        <Typography variant="body1">{t('createPasskeyDesc2')}</Typography>
+        {passkeyState.error && <Alert severity="error">{passkeyState.error}</Alert>}
+        {isEmailRequired && (
+          <Form>
+            {!passkeyState.sent && (
+              <TextField
+                type="email"
+                id="email-input"
+                size="medium"
+                placeholder={t('emailPlaceholder')}
+                sx={{ width: '100%', '.MuiFormHelperText-root': { ml: 0 } }}
+                value={passkeyState.email}
+                onChange={(e) => {
+                  passkeyState.email = e.target.value;
+                  setIsEmailVerified(!isEmail(passkeyState.email));
+                }}
+                disabled={passkeyState.loading || passkeyState.creating}
+                required
+                error={isEmailVerified}
+                helperText={isEmailVerified ? t('emailInvalid') : ''}
+              />
+            )}
+            {passkeyState.sent && !passkeyState.verified && (
+              <Stack
+                direction="column"
+                sx={{
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  mb: 2,
+                }}>
+                <Typography variant="body2">{t('codeSentMessage', { email: passkeyState.email })}</Typography>
+                <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between', gap: 2, mt: 0 }}>
+                  {Array(VERIFY_CODE_LENGTH)
+                    .fill('')
+                    .map((_, index) => (
+                      <TextField
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={`code-input-${index}`}
+                        value={trim(passkeyState.code[index]) || ''}
+                        type="number"
+                        margin="none"
+                        onChange={(e) => {
+                          const newCode = passkeyState.code.split('');
+                          newCode[index] = e.target.value;
+                          passkeyState.code = newCode.join('');
+                          if (e.target.value && index < 5) {
+                            document.getElementById(`code-input-${index + 1}`)?.focus();
+                          }
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Backspace' && !trim(passkeyState.code[index]) && index > 0) {
+                            document.getElementById(`code-input-${index - 1}`)?.focus();
+                          }
+                        }}
+                        disabled={passkeyState.loading}
+                        required
+                        id={`code-input-${index}`}
+                        autoComplete="off"
+                        slotProps={{
+                          htmlInput: {
+                            maxLength: 1,
+                            style: { textAlign: 'center', fontSize: '1.5rem' },
+                            autoComplete: 'off',
+                          },
+                        }}
+                      />
+                    ))}
+                </Box>
+              </Stack>
+            )}
+          </Form>
+        )}
+      </StyledDialogContent>
+      <StyledDialogActions>
+        <Button onClick={handleCloseDialog} sx={{ color: 'text.secondary' }}>
+          {t('cancel')}
+        </Button>
+        {isEmailRequired && (
+          <Button
+            variant="contained"
+            onClick={
+              // eslint-disable-next-line no-nested-ternary
+              passkeyState.verified ? handleCreatePasskey : passkeyState.sent ? handleVerifyCode : handleSendCode
+            }
+            disabled={
+              passkeyState.verifying ||
+              passkeyState.creating ||
+              !passkeyState.email ||
+              (passkeyState.sent && trim(passkeyState.code).length !== VERIFY_CODE_LENGTH)
+            }>
+            {(passkeyState.loading || passkeyState.creating) && <CircularProgress size={16} sx={{ mr: 1 }} />}
+            {/* eslint-disable-next-line no-nested-ternary */}
+            {passkeyState.verified ? t('createPasskey') : passkeyState.sent ? t('verifyButton') : t('sendCodeButton')}
+          </Button>
+        )}
+        {!isEmailRequired && (
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleCreatePasskey}
+            disabled={
+              passkeyState.loading ||
+              passkeyState.creating ||
+              (isEmailRequired && (!passkeyState.email || !passkeyState.verified))
+            }
+            startIcon={
+              (passkeyState.loading || passkeyState.creating) && (
+                <CircularProgress size={16} sx={{ mr: 1 }} color="inherit" />
+              )
+            }>
+            {passkeyState.loading || passkeyState.creating ? t('creatingPasskey') : t('createPasskey')}
+          </Button>
+        )}
+      </StyledDialogActions>
+    </StyledDialog>
+  );
+}
+PasskeyDialog.propTypes = {
+  extraParams: PropTypes.object,
+  createMode: PropTypes.string,
+  action: PropTypes.string.isRequired,
+  onSuccess: PropTypes.func,
+  onError: PropTypes.func,
+  ref: PropTypes.any.isRequired,
+};
+
+export default PasskeyDialog;
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paper {
+    border-radius: 12px;
+    max-width: 440px;
+  }
+`;
+
+const StyledDialogTitle = styled(DialogTitle)`
+  text-align: center;
+  padding: 24px 24px 16px;
+  font-size: 20px;
+  font-weight: 600;
+`;
+
+const StyledDialogContent = styled(DialogContent)`
+  padding: 0 24px;
+
+  .MuiTypography-body1 {
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 16px;
+  }
+
+  .MuiTextField-root {
+    margin-top: 16px;
+    width: 100%;
+  }
+`;
+
+const StyledDialogActions = styled(DialogActions)`
+  text-align: center;
+  padding: 16px 24px 24px;
+
+  .MuiButton-root {
+    text-transform: none;
+    font-size: 14px;
+    border-radius: 6px;
+    padding: 6px 16px;
+  }
+`;
+
+const KeyIcon = styled('div')`
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 16px;
+  background-color: #f6f8fa;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+`;
+
+const Form = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 24px;
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  div.Mui-focused input {
+    caret-color: ${(props) => props.theme.palette.primary.main};
+  }
+`;

package/src/Passkey/icon.jsx

@@ -0,0 +1,10 @@
+export default function PasskeyIcon(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M3 20v-2.8q0-.85.438-1.562T4.6 14.55q1.55-.775 3.15-1.162T11 13q.5 0 1 .038t1 .112q-.1 1.45.525 2.738T15.35 18v2zm16 3l-1.5-1.5v-4.65q-1.1-.325-1.8-1.237T15 13.5q0-1.45 1.025-2.475T18.5 10t2.475 1.025T22 13.5q0 1.125-.638 2t-1.612 1.25L21 18l-1.5 1.5L21 21zm-8-11q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m7.5 2q.425 0 .713-.288T19.5 13t-.288-.712T18.5 12t-.712.288T17.5 13t.288.713t.712.287"
+      />
+    </svg>
+  );
+}

package/src/Passkey/index.jsx

@@ -0,0 +1,2 @@
+export * from './context';
+export { default as PasskeyActions } from './actions';

package/src/Service/index.jsx

@@ -0,0 +1,96 @@
+import { joinURL } from 'ufo';
+import { createAxios } from '../utils';
+
+async function renewRefreshToken(refreshToken, { authServicePrefix, serviceHost }) {
+  if (!refreshToken) {
+    throw new Error('Refresh token not found');
+  }
+  const refreshApi = createAxios({
+    baseURL: serviceHost,
+    timeout: 10 * 1000,
+    secure: true,
+    headers: {
+      authorization: `Bearer ${encodeURIComponent(refreshToken)}`,
+    },
+  });
+  const { data } = await refreshApi.post(joinURL(authServicePrefix, '/refreshSession'));
+  return data;
+}
+
+export default function createService(
+  {
+    refreshTokenStorage,
+    sessionTokenStorage,
+    serviceHost,
+    authServicePrefix,
+    onRefreshTokenError,
+    onRefreshTokenSuccess,
+  },
+  options = {}
+) {
+  let refreshingTokenRequest = null;
+  const service = createAxios({
+    baseURL: serviceHost,
+    timeout: 30 * 1000,
+    ...options,
+  });
+  const { getToken: getSessionToken, setToken: setSessionToken, removeToken: removeSessionToken } = sessionTokenStorage;
+  const { getToken: getRefreshToken, setToken: setRefreshToken, removeToken: removeRefreshToken } = refreshTokenStorage;
+
+  service.interceptors.request.use(
+    async (config) => {
+      if (sessionTokenStorage.engine === 'ls') {
+        const token = getSessionToken();
+        if (token) {
+          config.headers.authorization = `Bearer ${encodeURIComponent(token)}`;
+        }
+      }
+      if (refreshingTokenRequest) {
+        await refreshingTokenRequest;
+      }
+
+      return config;
+    },
+    (error) => Promise.reject(error)
+  );
+
+  service.interceptors.response.use(
+    (response) => response,
+    async (error) => {
+      const originalRequest = error.config;
+      if (!originalRequest) {
+        return Promise.reject(error);
+      }
+
+      originalRequest.headers = { ...originalRequest?.headers };
+      // FIXME: @zhanghan 在某次 createTokenFn 的时候，出现了 401 导致 did-connect 页面展示了 `Refresh token not found` 错误
+      if (error?.response?.status === 401 && !originalRequest._retry) {
+        originalRequest._retry = true;
+        if (!refreshingTokenRequest) {
+          refreshingTokenRequest = renewRefreshToken(getRefreshToken(), { serviceHost, authServicePrefix });
+        }
+        try {
+          const tokenData = await refreshingTokenRequest;
+          setSessionToken(tokenData.nextToken);
+          setRefreshToken(tokenData.nextRefreshToken);
+          if (typeof onRefreshTokenSuccess === 'function') {
+            onRefreshTokenSuccess(tokenData);
+          }
+          return service(originalRequest);
+        } catch (error2) {
+          removeSessionToken();
+          removeRefreshToken();
+          if (typeof onRefreshTokenError === 'function') {
+            onRefreshTokenError();
+          }
+          return Promise.reject(error2);
+        } finally {
+          refreshingTokenRequest = null;
+        }
+      }
+      return Promise.reject(error);
+    }
+  );
+
+  return service;
+}