Remove deprecated email auth version usage (#47)

Author: tolgahan-arikan

src/Login.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, TextInput, Button, Spinner, Checkbox, Divider, Modal, Switch } from '@0xsequence/design-system'
+import { Box, Text, TextInput, Button, Spinner, Divider, Modal, Switch } from '@0xsequence/design-system'
 import { SetStateAction, useEffect, useRef, useState } from 'react'
 import { CredentialResponse, GoogleLogin, useGoogleLogin } from '@react-oauth/google'
 import AppleSignin from 'react-apple-signin-auth'
@@ -11,7 +11,6 @@ import { EmailConflictWarning } from './components/views/EmailConflictWarningVie
 
 import { randomName } from './utils/indexer'
 import { useEmailAuth } from './utils/useEmailAuth.ts'
-import { useEmailAuthV2 } from './utils/useEmailAuthV2.ts'
 import { StytchLogin } from './components/StytchLogin.tsx'
 import { StytchLegacyLogin } from './components/StytchLegacyLogin.tsx'
 import { EmailConflictInfo } from '@0xsequence/waas'
@@ -23,8 +22,6 @@ function Login() {
   const [showEmailWarning, setEmailWarning] = useState(false)
   const [code, setCode] = useState<string[]>([])
 
-  const [isEmailV2Enabled, setIsEmailV2Enabled] = useState(true)
-
   const [emailConflictInfo, setEmailConflictInfo] = useState<EmailConflictInfo | undefined>()
   const [isEmailConflictModalOpen, setIsEmailConflictModalOpen] = useState(false)
   const forceCreateFuncRef = useRef<(() => Promise<void>) | null>(null)
@@ -68,37 +65,19 @@ function Login() {
   })
 
   const {
-    inProgress: emailV2AuthInProgress,
-    loading: emailV2AuthLoading,
-    initiateAuth: initiateEmailV2Auth,
-    sendChallengeAnswer: sendChallengeAnswerV2,
-    cancel: cancelEmailV2Auth
-  } = useEmailAuthV2({
+    inProgress: emailAuthInProgress,
+    loading: emailAuthLoading,
+    initiateAuth: initiateEmailAuth,
+    sendChallengeAnswer,
+    cancel: cancelEmailAuth
+  } = useEmailAuth({
     sessionName: randomName(),
     onSuccess: async ({ wallet }) => {
       console.log(`Wallet address: ${wallet}`)
       router.navigate('/')
     }
   })
 
-  const {
-    inProgress: emailV1AuthInProgress,
-    loading: emailV1AuthLoading,
-    initiateAuth: initiateEmailV1Auth,
-    sendChallengeAnswer: sendChallengeAnswerV1
-  } = useEmailAuth({
-    onSuccess: async idToken => {
-      const walletAddress = await sequence.signIn({ idToken }, randomName())
-      console.log(`Wallet address: ${walletAddress}`)
-      router.navigate('/')
-    }
-  })
-
-  const emailAuthInProgress = isEmailV2Enabled ? emailV2AuthInProgress : emailV1AuthInProgress
-  const emailAuthLoading = isEmailV2Enabled ? emailV2AuthLoading : emailV1AuthLoading
-  const initiateEmailAuth = isEmailV2Enabled ? initiateEmailV2Auth : initiateEmailV1Auth
-  const sendChallengeAnswer = isEmailV2Enabled ? sendChallengeAnswerV2 : sendChallengeAnswerV1
-
   useEffect(() => {
     ;(async () => {
       if (await sequence.isSignedIn()) {
@@ -168,8 +147,14 @@ function Login() {
           </Box>
         </Box>
 
+        <Box marginTop="6" marginBottom="4">
+          <Text variant="large" color="text100" fontWeight="bold">
+            Guest Login
+          </Text>
+        </Box>
+
         <Box gap="4">
-          <Button label="Guest login" onClick={handleGuestLogin} />
+          <Button label="Login as guest" onClick={handleGuestLogin} />
         </Box>
 
         <Divider background="buttonGlass" />
@@ -178,16 +163,6 @@ function Login() {
           <Text variant="large" color="text100" fontWeight="bold">
             Email Login
           </Text>
-
-          <Box marginTop="4">
-            <Checkbox
-              label="Use v2 email login"
-              checked={isEmailV2Enabled}
-              onCheckedChange={() => {
-                setIsEmailV2Enabled(!isEmailV2Enabled)
-              }}
-            />
-          </Box>
         </Box>
 
         {sendChallengeAnswer ? (
@@ -328,7 +303,7 @@ function Login() {
               setEmailConflictInfo(undefined)
               if (emailAuthInProgress) {
                 setCode([])
-                cancelEmailV2Auth()
+                cancelEmailAuth()
                 setEmail('')
               }
             }}

src/components/views/ListAccountsView.tsx

@@ -1,12 +1,12 @@
-import { Box, Button, Checkbox, Divider, PINCodeInput, Spinner, Text, TextInput, useToast } from '@0xsequence/design-system'
+import { Box, Button, Divider, PINCodeInput, Spinner, Text, TextInput, useToast } from '@0xsequence/design-system'
 import { SetStateAction, useEffect, useRef, useState } from 'react'
 import { Account, IdentityType } from '@0xsequence/waas'
 import { CredentialResponse, GoogleLogin, useGoogleLogin } from '@react-oauth/google'
 import AppleSignin from 'react-apple-signin-auth'
 
 import { sequence } from '../../main'
 
-import { useEmailAuthV2 } from '../../utils/useEmailAuthV2'
+import { useEmailAuth } from '../../utils/useEmailAuth'
 import { randomName } from '../../utils/indexer'
 import { isAccountAlreadyLinkedError } from '../../utils/error'
 
@@ -98,14 +98,12 @@ export function ListAccountsView() {
   const [showEmailWarning, setEmailWarning] = useState(false)
   const [code, setCode] = useState<string[]>([])
 
-  const [v2EmailLoginEnabled, setV2EmailLoginEnabled] = useState(true)
-
   const {
     inProgress: emailAuthInProgress,
     loading: emailAuthLoading,
     initiateAuth: initiateEmailAuth,
     sendChallengeAnswer
-  } = useEmailAuthV2({
+  } = useEmailAuth({
     sessionName: randomName(),
     onSuccess: async ({ wallet }) => {
       console.log(`Wallet address: ${wallet}`)
@@ -291,15 +289,6 @@ export function ListAccountsView() {
           <Text variant="normal" color="text100" fontWeight="bold">
             Email
           </Text>
-
-          <Box marginTop="4">
-            <Checkbox
-              label="Use v2 email login"
-              disabled
-              checked={v2EmailLoginEnabled}
-              onChange={() => setV2EmailLoginEnabled(!v2EmailLoginEnabled)}
-            />
-          </Box>
         </Box>
 
         {sendChallengeAnswer ? (

src/utils/useEmailAuth.ts

@@ -1,49 +1,92 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { sequence } from '../main'
+import { Challenge } from '@0xsequence/waas'
+import { isAccountAlreadyLinkedError } from './error'
+import { useToast } from '@0xsequence/design-system'
+
+export function useEmailAuth({
+  onSuccess,
+  sessionName,
+  linkAccount = false
+}: {
+  onSuccess: (res: { wallet: string; sessionId: string }) => void
+  sessionName: string
+  linkAccount?: boolean
+}) {
+  const toast = useToast()
 
-export function useEmailAuth({ onSuccess }: { onSuccess: (idToken: string) => void }) {
-  const [email, setEmail] = useState('')
   const [error, setError] = useState<unknown>()
   const [loading, setLoading] = useState(false)
-  const [instance, setInstance] = useState('')
+  const [inProgress, setInProgress] = useState(false)
+  const [respondWithCode, setRespondWithCode] = useState<((code: string) => Promise<void>) | null>()
+
+  const [challenge, setChallenge] = useState<Challenge | undefined>()
+
+  useEffect(() => {
+    return sequence.onEmailAuthCodeRequired(async respondWithCode => {
+      setLoading(false)
+      setRespondWithCode(() => respondWithCode)
+    })
+  }, [sequence, setLoading, setRespondWithCode])
 
   const initiateAuth = async (email: string) => {
     setLoading(true)
-
+    setInProgress(true)
     try {
-      const { instance } = await sequence.email.initiateAuth({ email })
-      setInstance(instance)
-      setEmail(email)
+      if (linkAccount) {
+        const challenge = await sequence.initAuth({ email })
+        setChallenge(challenge)
+        setLoading(false)
+      } else {
+        const res = await sequence.signIn({ email }, sessionName)
+        onSuccess(res)
+      }
     } catch (e: any) {
-      console.error(e)
       setError(e.message || 'Unknown error')
     } finally {
-      setLoading(false)
+      if (!linkAccount) {
+        setLoading(false)
+        setInProgress(false)
+      }
     }
   }
 
   const sendChallengeAnswer = async (answer: string) => {
-    setLoading(true)
-
-    try {
-      const sessionHash = await sequence.getSessionHash()
-      const identity = await sequence.email.finalizeAuth({ instance, answer, email, sessionHash })
-      if (!('idToken' in identity)) {
-        throw new Error('invalid identity returned by finalizeAuth')
+    if (linkAccount && challenge) {
+      //completeAuth(challenge.withAnswer(answer), { sessionName })
+      try {
+        await sequence.linkAccount(challenge.withAnswer(answer))
+      } catch (e) {
+        if (isAccountAlreadyLinkedError(e)) {
+          toast({
+            title: 'Account already linked',
+            description: 'This account is already linked to another wallet',
+            variant: 'error'
+          })
+        }
       }
-      onSuccess(identity.idToken)
-    } catch (e: any) {
-      setError(e.message || 'Unknown error')
-    } finally {
       setLoading(false)
+      setInProgress(false)
+      return
+    }
+    if (respondWithCode) {
+      await respondWithCode(answer)
     }
   }
 
+  const cancel = () => {
+    setInProgress(false)
+    setLoading(false)
+    setChallenge(undefined)
+    setRespondWithCode(null)
+  }
+
   return {
-    inProgress: loading || !!instance,
+    inProgress,
+    initiateAuth,
     loading,
     error,
-    initiateAuth,
-    sendChallengeAnswer: instance ? sendChallengeAnswer : undefined
+    sendChallengeAnswer: inProgress ? sendChallengeAnswer : undefined,
+    cancel
   }
 }