fix: login error handling

safe-global · Nov 1, 2023 · 1408521 · 1408521
1 parent f262276
commit 1408521
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 26 deletions.
diff --git a/src/components/common/SocialSigner/index.tsx b/src/components/common/SocialSigner/index.tsx
@@ -18,6 +18,8 @@ import { TxModalContext } from '@/components/tx-flow'
 import { COREKIT_STATUS } from '@web3auth/mpc-core-kit'
 import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
 import madProps from '@/utils/mad-props'
+import { asError } from '@/services/exceptions/utils'
+import ErrorMessage from '@/components/tx/ErrorMessage'
 
 export const _getSupportedChains = (chains: ChainInfo[]) => {
   return chains
@@ -54,6 +56,7 @@ export const SocialSigner = ({
   onLogin,
 }: SocialSignerLoginProps) => {
   const [loginPending, setLoginPending] = useState<boolean>(false)
+  const [loginError, setLoginError] = useState<string | undefined>(undefined)
   const { setTxFlow } = useContext(TxModalContext)
   const userInfo = socialWalletService?.getUserInfo()
   const isDisabled = loginPending || !isMPCLoginEnabled
@@ -76,39 +79,44 @@ export const SocialSigner = ({
     if (!socialWalletService) return
 
     setLoginPending(true)
+    setLoginError(undefined)
+    try {
+      const status = await socialWalletService.loginAndCreate()
 
-    const status = await socialWalletService.loginAndCreate()
+      if (status === COREKIT_STATUS.LOGGED_IN) {
+        onLogin?.()
+        setLoginPending(false)
+        return
+      }
 
-    if (status === COREKIT_STATUS.LOGGED_IN) {
-      onLogin?.()
+      if (status === COREKIT_STATUS.REQUIRED_SHARE) {
+        setTxFlow(
+          <PasswordRecovery
+            recoverFactorWithPassword={recoverPassword}
+            onSuccess={() => {
+              onLogin?.()
+              setLoginPending(false)
+            }}
+          />,
+          () => {},
+          false,
+        )
+        return
+      }
+    } catch (err) {
+      const error = asError(err)
+      setLoginError(error.message)
+    } finally {
       setLoginPending(false)
-      return
     }
-
-    if (status === COREKIT_STATUS.REQUIRED_SHARE) {
-      setTxFlow(
-        <PasswordRecovery
-          recoverFactorWithPassword={recoverPassword}
-          onSuccess={() => {
-            onLogin?.()
-            setLoginPending(false)
-          }}
-        />,
-        () => {},
-        false,
-      )
-      return
-    }
-
-    // TODO: Show error if login fails
-    setLoginPending(false)
   }
 
   const isSocialLogin = isSocialLoginWallet(wallet?.label)
 
   return (
     <>
-      <Box sx={{ width: '100%' }}>
+      <Box display="flex" flexDirection="column" gap={2} sx={{ width: '100%' }}>
+        {loginError && <ErrorMessage className={css.loginError}>{loginError}</ErrorMessage>}
         {isSocialLogin && userInfo ? (
           <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION}>
             <Button

diff --git a/src/services/exceptions/ErrorCodes.ts b/src/services/exceptions/ErrorCodes.ts
@@ -18,6 +18,7 @@ enum ErrorCodes {
   _303 = '303: Error creating pairing session',
   _304 = '304: Error enabling MFA',
   _305 = '305: Error exporting account key',
+  _306 = '306: Error logging in',
 
   _400 = '400: Error requesting browser notification permissions',
   _401 = '401: Error tracking push notifications',

diff --git a/src/services/mpc/SocialWalletService.ts b/src/services/mpc/SocialWalletService.ts
@@ -95,9 +95,10 @@ class SocialWalletService implements ISocialWalletService {
 
       await this.finalizeLogin()
       return this.mpcCoreKit.status
-    } catch (error) {
-      console.error(error)
-      return this.mpcCoreKit.status
+    } catch (err) {
+      const error = asError(err)
+      logError(ErrorCodes._306, error)
+      throw new Error('Error while logging in to your account or creating your Social signer wallet')
     }
   }