(improvement) 2FA auth flow

src/components/Auth/LoginOtp/LoginOtp.js

@@ -1,10 +1,12 @@
 import React, { memo, useEffect } from 'react'
+import { useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { Button, Intent } from '@blueprintjs/core'
 import { isEmpty } from '@bitfinex/lib-js-util-base'
 
 import useKeyDown from 'hooks/useKeyDown'
+import { getIsAuthBtnDisabled } from 'state/auth/selectors'
 
 import InputKey from '../InputKey'
 
@@ -15,9 +17,12 @@ export const LoginOtp = ({
   handleOneTimePassword,
 }) => {
   const { t } = useTranslation()
+  const isAuthBtnDisabled = useSelector(getIsAuthBtnDisabled)
 
   useKeyDown(() => {
-    handleOneTimePassword()
+    if (!isAuthBtnDisabled) {
+      handleOneTimePassword()
+    }
   }, ['Enter'])
 
   useEffect(() => {
@@ -48,9 +53,9 @@ export const LoginOtp = ({
         <Button
           name='auth'
           intent={Intent.SUCCESS}
-          disabled={isEmpty(otp)}
           className='bitfinex-auth-check'
           onClick={handleOneTimePassword}
+          disabled={isEmpty(otp || isAuthBtnDisabled)}
         >
           {t('auth.2FA.auth')}
         </Button>

src/state/auth/actions.js

@@ -217,6 +217,13 @@ export function syncAfterUpdate(payload) {
   }
 }
 
+export function disableAuthBtn(payload) {
+  return {
+    type: types.DISABLE_AUTH_BUTTON,
+    payload,
+  }
+}
+
 export default {
   checkAuth,
   addUser,
@@ -243,4 +250,5 @@ export default {
   signInOtp,
   deleteAccount,
   syncAfterUpdate,
+  disableAuthBtn,
 }

src/state/auth/constants.js

@@ -24,6 +24,7 @@ export default {
   LOGOUT: 'BITFINEX/AUTH/LOGOUT',
   DELETE_ACCOUNT: 'BITFINEX/AUTH/ACCOUNT/DELETE',
   SET_SYNC_AFTER_UPDATE: 'BITFINEX/SYNC/SYNC_AFTER_UPDATE/SET',
+  DISABLE_AUTH_BUTTON: 'BITFINEX/AUTH/BUTTON/DISABLE',
 
   WS_SIGN_IN: 'ws_signIn',
   LOGIN_2FA_OTP: 'otp',

src/state/auth/reducer.js

@@ -56,6 +56,7 @@ const initialState = {
   loginToken: '',
   userShouldReLogin: '',
   shouldNotSyncOnStartupAfterUpdate: false,
+  isAuthBtnDisabled: false,
 }
 
 export function authReducer(state = initialState, action) {
@@ -148,6 +149,11 @@ export function authReducer(state = initialState, action) {
         ...state,
         shouldNotSyncOnStartupAfterUpdate: payload,
       }
+    case types.DISABLE_AUTH_BUTTON:
+      return {
+        ...state,
+        isAuthBtnDisabled: payload,
+      }
     case types.HIDE_AUTH:
       return {
         ...state,

src/state/auth/saga.js

@@ -177,6 +177,7 @@ function* signUpEmail({ payload }) {
 
 function* signUpOtp({ payload }) {
   try {
+    yield put(actions.disableAuthBtn(true))
     const { otp, password, isNotProtected } = payload
     const loginToken = yield select(getLoginToken)
     const params = {
@@ -193,16 +194,19 @@ function* signUpOtp({ payload }) {
         password,
         isNotProtected,
       }
+      yield put(actions.disableAuthBtn(false))
       yield put(actions.signUp(authParams))
     }
 
     if (error) {
+      yield put(actions.disableAuthBtn(false))
       yield put(updateErrorStatus({
         id: 'auth.2FA.invalidToken',
       }))
     }
   } catch (fail) {
     yield put(updateAuthErrorStatus(fail))
+    yield put(actions.disableAuthBtn(false))
   }
 }
 

src/state/auth/selectors.js

@@ -22,6 +22,7 @@ export const getIsSubAccsAvailable = state => _first(
   _filter(getUsers(state), user => isEqual(user?.email, getEmail(state))),
 )?.isApiKeysAuth ?? true
 export const getLocalUsername = state => getAuth(state)?.localUsername ?? null
+export const getIsAuthBtnDisabled = state => getAuth(state)?.isAuthBtnDisabled ?? false
 
 export const getAuthData = state => {
   const {
@@ -108,4 +109,5 @@ export default {
   getIsSubAccsAvailable,
   getLocalUsername,
   getShouldNotSyncOnStartupAfterUpdate,
+  getIsAuthBtnDisabled,
 }