fix: handle email already registered (#1910)

jaredvu · web-flow · commit 384d1d99a69f · 2025-09-29T10:25:29.000-07:00
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-client-js": "3.0.3",
-    "@dydxprotocol/v4-localization": "1.1.327",
+    "@dydxprotocol/v4-localization": "1.1.328",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@hugocxl/react-to-image": "^0.0.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/turnkey/turnkeyUtils.ts b/src/lib/turnkey/turnkeyUtils.ts
@@ -1,5 +1,6 @@
 import type { TurnkeyIframeClient, TurnkeyIndexedDbClient } from '@turnkey/sdk-browser';
 
+import { STRING_KEYS, StringGetterFunction } from '@/constants/localization';
 import type { TurnkeyWallet } from '@/types/turnkey';
 
 /**
@@ -31,3 +32,23 @@ export async function getWalletsWithAccountsFromClient(
 
   return walletWithAccounts;
 }
+
+export const parseTurnkeyError = (message: string, stringGetter: StringGetterFunction): string => {
+  if (message.includes('User has already registered using this email')) {
+    return stringGetter({ key: STRING_KEYS.USER_ALREADY_HAS_TURNKEY });
+  }
+
+  if (
+    message.includes('unable to decrypt bundle using embedded key') ||
+    message.includes('Organization ID is not available') ||
+    message.includes('Unauthenticated desc') ||
+    message.includes('Organization ID was not found')
+  ) {
+    return stringGetter({ key: STRING_KEYS.INVALID_TURNKEY_EMAIL_LINK });
+  }
+
+  return stringGetter({
+    key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
+    params: { ERROR_MESSAGE: message },
+  });
+};
diff --git a/src/providers/TurnkeyAuthProvider.tsx b/src/providers/TurnkeyAuthProvider.tsx
@@ -10,6 +10,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import { AnalyticsEvents } from '@/constants/analytics';
 import { DialogTypes } from '@/constants/dialogs';
+import { STRING_KEYS } from '@/constants/localization';
 import { ConnectorType, WalletType } from '@/constants/wallets';
 import {
   GoogleIdTokenPayload,
@@ -20,7 +21,9 @@ import {
 } from '@/types/turnkey';
 
 import { useAccounts } from '@/hooks/useAccounts';
+import { useStringGetter } from '@/hooks/useStringGetter';
 
+import { appQueryClient } from '@/state/appQueryClient';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { forceOpenDialog, openDialog } from '@/state/dialogs';
 import {
@@ -32,6 +35,7 @@ import {
 import { getSourceAccount, getTurnkeyEmailOnboardingData } from '@/state/walletSelectors';
 
 import { track } from '@/lib/analytics/analytics';
+import { parseTurnkeyError } from '@/lib/turnkey/turnkeyUtils';
 
 import { useTurnkeyWallet } from './TurnkeyWalletProvider';
 
@@ -67,6 +71,7 @@ export const useTurnkeyAuth = () => useContext(TurnkeyAuthContext)!;
 
 const useTurnkeyAuthContext = () => {
   const dispatch = useAppDispatch();
+  const stringGetter = useStringGetter();
   const indexerUrl = useAppSelector(selectIndexerUrl);
   const sourceAccount = useAppSelector(getSourceAccount);
   const { indexedDbClient, authIframeClient } = useTurnkey();
@@ -125,14 +130,18 @@ const useTurnkeyAuthContext = () => {
       if (response.errors && Array.isArray(response.errors)) {
         // Handle API-reported errors
         const errorMsg = response.errors.map((e: { msg: string }) => e.msg).join(', ');
-        throw new Error(`useTurnkeyAuth: Backend Error: ${errorMsg}`);
+        throw new Error(`Backend Error: ${errorMsg}`);
       }
 
       if (response.dydxAddress === '') {
         setIsNewTurnkeyUser(true);
         dispatch(setRequiresAddressUpload(true));
       }
 
+      if (loginMethod === LoginMethod.OAuth && response.alreadyExists) {
+        throw new Error('User has already registered using this email');
+      }
+
       switch (loginMethod) {
         case LoginMethod.OAuth:
           handleOauthResponse({ response });
@@ -154,7 +163,7 @@ const useTurnkeyAuthContext = () => {
       selectWallet(undefined);
       logBonsaiError('TurnkeyOnboarding', 'Error during sign-in', { error });
       setEmailSignInStatus('error');
-      setEmailSignInError(error.message);
+      setEmailSignInError(parseTurnkeyError(error.message, stringGetter));
 
       if (variables.loginMethod === LoginMethod.OAuth) {
         const providerName = variables.providerName;
@@ -181,12 +190,6 @@ const useTurnkeyAuthContext = () => {
             signinMethod: providerName,
           })
         );
-      } else if (variables.loginMethod === LoginMethod.Email) {
-        track(
-          AnalyticsEvents.TurnkeyLoginCompleted({
-            signinMethod: 'email',
-          })
-        );
       }
     },
   });
@@ -330,25 +333,21 @@ const useTurnkeyAuthContext = () => {
         let errorMessage: string | undefined;
 
         if (error instanceof Error) {
-          if (
-            error.message.includes('unable to decrypt bundle using embedded key') ||
-            error.message.includes('Organization ID is not available') ||
-            error.message.includes('Unauthenticated desc') ||
-            error.message.includes('Organization ID was not found')
-          ) {
-            errorMessage =
-              'Your email link has expired or you are using a different device/browser than the one used to sign in. Please try again.';
-          } else {
-            logBonsaiError('TurnkeyOnboarding', 'error handling email magic link', { error });
-            errorMessage = error.message;
-          }
+          errorMessage = parseTurnkeyError(error.message, stringGetter);
+          logBonsaiError('TurnkeyOnboarding', 'error handling email magic link', { error });
         } else {
           logBonsaiError('TurnkeyOnboarding', 'error handling email magic link - unknown', {
             error,
           });
         }
 
-        setEmailSignInError(errorMessage ?? 'An unknown error occurred');
+        setEmailSignInError(
+          errorMessage ??
+            stringGetter({
+              key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
+              params: { ERROR_MESSAGE: stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }) },
+            })
+        );
         setEmailSignInStatus('error');
       } finally {
         // Clear token from state after it has been consumed
@@ -370,6 +369,7 @@ const useTurnkeyAuthContext = () => {
       searchParams,
       setSearchParams,
       dispatch,
+      stringGetter,
     ]
   );
 
@@ -414,7 +414,7 @@ const useTurnkeyAuthContext = () => {
   }, [searchParams, setSearchParams]);
 
   /* ----------------------------- Upload Address ----------------------------- */
-  const { mutateAsync: sendUploadAddressRequest } = useMutation({
+  const { mutateAsync: sendUploadAddressRequest, isPending: isUploadingAddress } = useMutation({
     mutationFn: async ({
       payload,
     }: {
@@ -449,6 +449,9 @@ const useTurnkeyAuthContext = () => {
       );
       logBonsaiError('TurnkeyOnboarding', 'Error posting to upload address', { error });
     },
+    onSuccess: () => {
+      appQueryClient.invalidateQueries({ queryKey: ['turnkeyWallets'] });
+    },
   });
 
   const uploadAddress = useCallback(
@@ -548,6 +551,7 @@ const useTurnkeyAuthContext = () => {
     isLoading: status === 'pending' || emailSignInStatus === 'loading',
     isError: status === 'error' || emailSignInStatus === 'error',
     needsAddressUpload,
+    isUploadingAddress,
     signInWithOauth,
     signInWithOtp,
     resetEmailSignInStatus,
diff --git a/src/views/dialogs/TransferDialogs/DepositAddressDialog.tsx b/src/views/dialogs/TransferDialogs/DepositAddressDialog.tsx
@@ -18,6 +18,7 @@ import { useCopyValue } from '@/hooks/useCopyValue';
 import { useLocaleSeparators } from '@/hooks/useLocaleSeparators';
 import { useSimpleUiEnabled } from '@/hooks/useSimpleUiEnabled';
 import { useStringGetter } from '@/hooks/useStringGetter';
+import { useTurnkeyAuth } from '@/providers/TurnkeyAuthProvider';
 
 import breakpoints from '@/styles/breakpoints';
 import { formMixins } from '@/styles/formMixins';
@@ -58,6 +59,7 @@ export const DepositAddressDialog = ({ setIsOpen }: DialogProps<DepositDialog2Pr
   const indexerReady = useAppSelector(selectIndexerReady);
 
   const canQueryForDepositAddresses = dydxAddress != null && indexerReady;
+  const { isUploadingAddress } = useTurnkeyAuth();
 
   const {
     data: depositAddresses,
@@ -205,50 +207,51 @@ export const DepositAddressDialog = ({ setIsOpen }: DialogProps<DepositDialog2Pr
 
   const { copied, copy } = useCopyValue({ value: depositAddress });
 
-  const addressCard = isLoadingDepositAddresses ? (
-    <$AddressCard>
-      <div tw="mx-auto flex size-[155px] items-center justify-center">
-        <LoadingSpace />
-      </div>
-    </$AddressCard>
-  ) : failedToFetchDepositAddresses ? (
-    <$AddressCard>
-      <div tw="mx-auto flex h-[155px] flex-col items-center justify-center gap-1">
-        <Icon iconName={IconName.Warning} tw="size-2 text-color-error" />
-        <span tw="text-color-text-0">
-          {stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG })}
-        </span>
-      </div>
-    </$AddressCard>
-  ) : (
-    <$AddressCard onClick={copy} tabIndex={0} role="button">
-      <div tw="flexColumn min-w-0 justify-between">
-        <img
-          tw="size-2.25 rounded-[50%]"
-          src={CHAIN_INFO[selectedChain]?.icon}
-          alt={CHAIN_INFO[selectedChain]?.name}
-        />
-        {addressRepresentation && depositAddress ? (
-          <div tw="row ml-[-0.5rem] cursor-pointer items-end gap-0.125 rounded-[6px] p-0.5 hover:bg-color-layer-1">
-            <div tw="min-w-0 whitespace-normal break-words text-justify">
-              <span tw="text-color-text-2">{addressRepresentation.firstPart}</span>
-              <span tw="text-color-text-0">{addressRepresentation.middlePart}</span>
-              <span tw="text-color-text-2">{addressRepresentation.lastPart}</span>
+  const addressCard =
+    isUploadingAddress || isLoadingDepositAddresses ? (
+      <$AddressCard>
+        <div tw="mx-auto flex size-[155px] items-center justify-center">
+          <LoadingSpace />
+        </div>
+      </$AddressCard>
+    ) : failedToFetchDepositAddresses ? (
+      <$AddressCard>
+        <div tw="mx-auto flex h-[155px] flex-col items-center justify-center gap-1">
+          <Icon iconName={IconName.Warning} tw="size-2 text-color-error" />
+          <span tw="text-color-text-0">
+            {stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG })}
+          </span>
+        </div>
+      </$AddressCard>
+    ) : (
+      <$AddressCard onClick={copy} tabIndex={0} role="button">
+        <div tw="flexColumn min-w-0 justify-between">
+          <img
+            tw="size-2.25 rounded-[50%]"
+            src={CHAIN_INFO[selectedChain]?.icon}
+            alt={CHAIN_INFO[selectedChain]?.name}
+          />
+          {addressRepresentation && depositAddress ? (
+            <div tw="row ml-[-0.5rem] cursor-pointer items-end gap-0.125 rounded-[6px] p-0.5 hover:bg-color-layer-1">
+              <div tw="min-w-0 whitespace-normal break-words text-justify">
+                <span tw="text-color-text-2">{addressRepresentation.firstPart}</span>
+                <span tw="text-color-text-0">{addressRepresentation.middlePart}</span>
+                <span tw="text-color-text-2">{addressRepresentation.lastPart}</span>
+              </div>
+              {copied ? (
+                <Icon iconName={IconName.CheckCircle} tw="text-color-success" />
+              ) : (
+                <Icon iconName={IconName.Copy} tw="text-color-accent" />
+              )}
             </div>
-            {copied ? (
-              <Icon iconName={IconName.CheckCircle} tw="text-color-success" />
-            ) : (
-              <Icon iconName={IconName.Copy} tw="text-color-accent" />
-            )}
-          </div>
-        ) : null}
-      </div>
+          ) : null}
+        </div>
 
-      <div tw="flex size-[155px] min-w-[155px]">
-        {depositAddress && <QrCode hasLogo tw="size-full" value={depositAddress} />}
-      </div>
-    </$AddressCard>
-  );
+        <div tw="flex size-[155px] min-w-[155px]">
+          {depositAddress && <QrCode hasLogo tw="size-full" value={depositAddress} />}
+        </div>
+      </$AddressCard>
+    );
 
   const getAcceptedAssets = (id: string | number) => {
     if (id === SOLANA_MAINNET_ID || id === avalanche.id) {
