Add login info to email conflict warning (#32)

package.json

@@ -15,9 +15,9 @@
   },
   "dependencies": {
     "@0xsequence/design-system": "1.6.3",
-    "@0xsequence/indexer": "1.9.26",
-    "@0xsequence/network": "1.9.26",
-    "@0xsequence/waas": "0.0.0-20240716125045",
+    "@0xsequence/indexer": "0.0.0-20240718140827",
+    "@0xsequence/network": "0.0.0-20240718140827",
+    "@0xsequence/waas": "0.0.0-20240718140827",
     "@react-oauth/google": "^0.11.1",
     "@stytch/react": "^18.1.0",
     "@stytch/vanilla-js": "^4.13.2",

src/Login.tsx

@@ -13,6 +13,7 @@ import { StytchLogin } from './components/StytchLogin.tsx'
 import { randomName } from './utils/indexer'
 import { useEmailAuth } from './utils/useEmailAuth.ts'
 import { useEmailAuthV2 } from './utils/useEmailAuthV2.ts'
+import { EmailConflictInfo } from '@0xsequence/waas'
 
 function Login() {
   const [email, setEmail] = useState('')
@@ -23,11 +24,13 @@ function Login() {
 
   const [isEmailV2Enabled, setIsEmailV2Enabled] = useState(true)
 
+  const [emailConflictInfo, setEmailConflictInfo] = useState<EmailConflictInfo | undefined>()
   const [isEmailConflictModalOpen, setIsEmailConflictModalOpen] = useState(false)
   const forceCreateFuncRef = useRef<(() => Promise<void>) | null>(null)
 
-  sequence.onEmailConflict(async forceCreate => {
+  sequence.onEmailConflict(async (info, forceCreate) => {
     forceCreateFuncRef.current = forceCreate
+    setEmailConflictInfo(info)
     setIsEmailConflictModalOpen(true)
   })
 
@@ -67,7 +70,8 @@ function Login() {
     inProgress: emailV2AuthInProgress,
     loading: emailV2AuthLoading,
     initiateAuth: initiateEmailV2Auth,
-    sendChallengeAnswer: sendChallengeAnswerV2
+    sendChallengeAnswer: sendChallengeAnswerV2,
+    cancel: cancelEmailV2Auth
   } = useEmailAuthV2({
     sessionName: randomName(),
     onSuccess: async ({ wallet }) => {
@@ -312,12 +316,22 @@ function Login() {
         </Box>
       </Box>
 
-      {isEmailConflictModalOpen && (
+      {isEmailConflictModalOpen && emailConflictInfo && (
         <Modal size="small" onClose={() => setIsEmailConflictModalOpen(false)}>
           <EmailConflictWarning
-            onCancel={() => setIsEmailConflictModalOpen(false)}
+            info={emailConflictInfo}
+            onCancel={() => {
+              setIsEmailConflictModalOpen(false)
+              setEmailConflictInfo(undefined)
+              if (emailAuthInProgress) {
+                setCode([])
+                cancelEmailV2Auth()
+                setEmail('')
+              }
+            }}
             onConfirm={async () => {
               setIsEmailConflictModalOpen(false)
+              setEmailConflictInfo(undefined)
               await forceCreateFuncRef.current?.()
             }}
           />

src/components/views/EmailConflictWarningView.tsx

@@ -1,11 +1,37 @@
 import { Box, Button, Text } from '@0xsequence/design-system'
+import { Account, EmailConflictInfo, IdentityType } from '@0xsequence/waas'
+import { accountToName } from './ListAccountsView'
 
-interface PaneProps {
+interface EmailConflictWarningProps {
+  info: EmailConflictInfo
   onCancel: () => void
   onConfirm: () => void
 }
 
-export const EmailConflictWarning = (props: PaneProps) => {
+const accountTypeText = (info: EmailConflictInfo) => {
+  if (info.type === IdentityType.PlayFab) {
+    return 'PlayFab login'
+  }
+
+  if (info.type === IdentityType.Email) {
+    return 'Email login'
+  }
+
+  if (info.type === IdentityType.OIDC) {
+    switch (info.issuer) {
+      case 'https://accounts.google.com':
+        return 'Google login'
+      case 'https://appleid.apple.com':
+        return 'Apple login'
+      default:
+        return 'Unknown account type'
+    }
+  }
+
+  return 'Unknown account type'
+}
+
+export const EmailConflictWarning = (props: EmailConflictWarningProps) => {
   const { onCancel, onConfirm } = props
 
   return (
@@ -17,7 +43,8 @@ export const EmailConflictWarning = (props: PaneProps) => {
       </Box>
       <Box height="full">
         <Text as="div" variant="normal" color="text50" textAlign="center">
-          Another account with this email address already exists. You can cancel this or force create a new account.
+          Another account with this email address <Text color="text80">({props.info.email})</Text> already exists with account
+          type <Text color="text80">({accountTypeText(props.info)})</Text>. You can cancel this or force create a new account.
         </Text>
       </Box>
 

src/utils/useEmailAuthV2.ts

@@ -74,11 +74,19 @@ export function useEmailAuthV2({
     }
   }
 
+  const cancel = () => {
+    setInProgress(false)
+    setLoading(false)
+    setChallenge(undefined)
+    setRespondWithCode(null)
+  }
+
   return {
     inProgress,
     initiateAuth,
     loading,
     error,
-    sendChallengeAnswer: inProgress ? sendChallengeAnswer : undefined
+    sendChallengeAnswer: inProgress ? sendChallengeAnswer : undefined,
+    cancel
   }
 }