Native email auth support (#21)

* Native email auth support

* update sequence.js to snapshot release with native email auth

* hacky solution to only use email auth v2 in dev mode

package.json

@@ -17,7 +17,7 @@
     "@0xsequence/design-system": "1.6.3",
     "@0xsequence/indexer": "1.9.26",
     "@0xsequence/network": "1.9.26",
-    "@0xsequence/waas": "1.9.26",
+    "@0xsequence/waas": "0.0.0-20240613131211",
     "@react-oauth/google": "^0.11.1",
     "@vanilla-extract/css": "^1.12.0",
     "axios": "^1.6.0",

src/Login.tsx

@@ -10,6 +10,10 @@ import AppleSignin from 'react-apple-signin-auth'
 import { randomName } from './utils/indexer'
 import { useEmailAuth } from "./utils/useEmailAuth.ts";
 import {useSessionHash} from "./utils/useSessionHash.ts";
+import {useEmailAuthV2} from "./utils/useEmailAuthV2.ts";
+
+const urlParams = new URLSearchParams(window.location.search)
+const targetEnv = urlParams.get('env') ?? 'prod'
 
 function Login() {
   const { sessionHash } = useSessionHash()
@@ -18,20 +22,24 @@ function Login() {
   const isEmailValid = inputRef.current?.validity.valid
   const [showEmailWarning, setEmailWarning] = useState(false)
   const [code, setCode] = useState<string[]>([])
-  const [signingIn, setSigningIn] = useState(false)
   const { theme, setTheme } = useTheme()
 
   const {
       inProgress: emailAuthInProgress,
       loading: emailAuthLoading,
       initiateAuth: initiateEmailAuth,
       sendChallengeAnswer,
-  } = useEmailAuth({
+  } = targetEnv === 'dev' ? useEmailAuthV2({
+      sessionName: randomName(),
+      onSuccess: async ({ wallet }) => {
+        console.log(`Wallet address: ${wallet}`)
+        router.navigate('/')
+      },
+  }) : useEmailAuth({
       onSuccess: async (idToken) => {
-          setSigningIn(true)
-          const walletAddress = await sequence.signIn({ idToken }, randomName())
-          console.log(`Wallet address: ${walletAddress}`)
-          router.navigate('/')
+        const walletAddress = await sequence.signIn({ idToken }, randomName())
+        console.log(`Wallet address: ${walletAddress}`)
+        router.navigate('/')
       },
   })
 
@@ -90,7 +98,7 @@ function Login() {
           </Box>
 
           <Box gap="2" marginY="4">
-            {emailAuthLoading || signingIn ? (
+            {emailAuthLoading ? (
               <Spinner />
             ) : (
               <Button

src/utils/useEmailAuthV2.ts

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { sequence } from '../main'
+
+
+export function useEmailAuthV2({ onSuccess, sessionName }: { onSuccess: (res: { wallet: string, sessionId: string }) => void, sessionName: string }) {
+  const [email, setEmail]  = useState("")
+  const [error, setError] = useState<unknown>()
+  const [loading, setLoading] = useState(false)
+  const [instance, setInstance] = useState('')
+
+  const initiateAuth = async (email: string) => {
+    setLoading(true)
+
+    try {
+      const instance = await sequence.initiateEmailAuth(email)
+      setInstance(instance!)
+      setEmail(email)
+    } catch (e: any) {
+      console.error(e)
+      setError(e.message || "Unknown error")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const sendChallengeAnswer = async (answer: string) => {
+    setLoading(true)
+
+    try {
+      const res = await sequence.completeEmailAuth({ challenge: instance, answer, email, sessionName })
+      onSuccess(res)
+    } catch (e: any) {
+      setError(e.message || "Unknown error")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return {
+    inProgress: loading || !!instance,
+    loading,
+    error,
+    initiateAuth,
+    sendChallengeAnswer: instance ? sendChallengeAnswer : undefined,
+  }
+}