Skip to content

Commit

Permalink
Remove deprecated email auth version usage (#47)
Browse files Browse the repository at this point in the history
  • Loading branch information
tolgahan-arikan authored Sep 10, 2024
1 parent 6b51f5d commit 0cd2206
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 170 deletions.
55 changes: 15 additions & 40 deletions src/Login.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -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)
Expand Down Expand Up @@ -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()) {
Expand Down Expand Up @@ -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" />
Expand All @@ -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 ? (
Expand Down Expand Up @@ -328,7 +303,7 @@ function Login() {
setEmailConflictInfo(undefined)
if (emailAuthInProgress) {
setCode([])
cancelEmailV2Auth()
cancelEmailAuth()
setEmail('')
}
}}
Expand Down
17 changes: 3 additions & 14 deletions src/components/views/ListAccountsView.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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}`)
Expand Down Expand Up @@ -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 ? (
Expand Down
91 changes: 67 additions & 24 deletions src/utils/useEmailAuth.ts
Original file line number Diff line number Diff line change
@@ -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
}
}
92 changes: 0 additions & 92 deletions src/utils/useEmailAuthV2.ts

This file was deleted.

0 comments on commit 0cd2206

Please sign in to comment.