CP-9607: update android passkey implementation

packages/core-mobile/app/new/features/onboarding/components/FidoNameInput.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import {
+  Text,
+  TextInput,
+  useTheme,
+  View,
+  Icons,
+  Button,
+  TouchableOpacity
+} from '@avalabs/k2-alpine'
+import BlurredBarsContentLayout from 'common/components/BlurredBarsContentLayout'
+import { FIDONameInputProps } from 'new/routes/onboarding/seedless/fidoNameInput'
+
+const FidoNameInput = ({
+  title,
+  description,
+  textInputPlaceholder,
+  name,
+  setName,
+  handleSave
+}: Omit<FIDONameInputProps, 'fidoType'> & {
+  name: string
+  setName: (value: string) => void
+  handleSave: () => void
+}): JSX.Element => {
+  const {
+    theme: { colors }
+  } = useTheme()
+
+  return (
+    <BlurredBarsContentLayout>
+      <View
+        style={{
+          flex: 1,
+          marginHorizontal: 16,
+          marginTop: 25,
+          justifyContent: 'space-between'
+        }}>
+        <View>
+          <Text variant="heading2">{title}</Text>
+          <Text variant="body1" sx={{ marginTop: 14 }}>
+            {description}
+          </Text>
+          <View
+            sx={{
+              marginTop: 27,
+              paddingHorizontal: 13,
+              backgroundColor: colors.$surfaceSecondary,
+              borderRadius: 12,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              height: 44
+            }}>
+            <TextInput
+              sx={{
+                flex: 1,
+                fontFamily: 'Inter-Regular',
+                marginRight: 13,
+                height: 44,
+                fontSize: 16,
+                color: colors.$textPrimary
+              }}
+              value={name}
+              onChangeText={setName}
+              placeholder={textInputPlaceholder}
+            />
+            <TouchableOpacity onPress={() => setName('')}>
+              <Icons.Action.Clear
+                width={16}
+                height={16}
+                color={colors.$textSecondary}
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View sx={{ marginVertical: 36 }}>
+          <Button
+            type="primary"
+            size="large"
+            disabled={name === ''}
+            onPress={handleSave}>
+            Next
+          </Button>
+        </View>
+      </View>
+    </BlurredBarsContentLayout>
+  )
+}
+
+export default FidoNameInput

packages/core-mobile/app/new/features/onboarding/hooks/useRegisterAndAuthenticateFido.ts

@@ -0,0 +1,71 @@
+import { FidoType } from 'services/passkey/types'
+import PasskeyService from 'services/passkey/PasskeyService'
+import AnalyticsService from 'services/analytics/AnalyticsService'
+import SeedlessService from 'seedless/services/SeedlessService'
+import Logger from 'utils/Logger'
+import { showSnackbar } from 'common/utils/toast'
+import { showLogoModal, hideLogoModal } from 'common/components/LogoModal'
+import { useRecoveryMethodContext } from '../contexts/RecoveryMethodProvider'
+import useSeedlessManageMFA from './useSeedlessManageMFA'
+
+export const useRegisterAndAuthenticateFido = (): {
+  registerAndAuthenticateFido: ({
+    name,
+    fidoType,
+    onAccountVerified
+  }: {
+    name?: string
+    fidoType: FidoType
+    onAccountVerified: () => void
+  }) => Promise<void>
+} => {
+  const { oidcAuth } = useRecoveryMethodContext()
+  const { fidoRegisterInit } = useSeedlessManageMFA()
+
+  const registerAndAuthenticateFido = async ({
+    name,
+    fidoType,
+    onAccountVerified
+  }: {
+    name?: string
+    fidoType: FidoType
+    onAccountVerified: () => void
+  }): Promise<void> => {
+    const passkeyName = name && name.length > 0 ? name : fidoType.toString()
+
+    showLogoModal()
+
+    try {
+      const withSecurityKey = fidoType === FidoType.YUBI_KEY
+
+      fidoRegisterInit(passkeyName, async challenge => {
+        const credential = await PasskeyService.create(
+          challenge.options,
+          withSecurityKey
+        )
+
+        await challenge.answer(credential)
+
+        AnalyticsService.capture('SeedlessMfaAdded')
+
+        if (oidcAuth) {
+          await SeedlessService.sessionManager.approveFido(
+            oidcAuth.oidcToken,
+            oidcAuth.mfaId,
+            withSecurityKey
+          )
+
+          AnalyticsService.capture('SeedlessMfaVerified', { type: fidoType })
+        }
+        onAccountVerified()
+      })
+    } catch (e) {
+      console.log('registerAndAuthenticateFido', e)
+      Logger.error(`${fidoType} registration failed`, e)
+      showSnackbar(`Unable to register ${fidoType}`)
+    } finally {
+      hideLogoModal()
+    }
+  }
+  return { registerAndAuthenticateFido }
+}

packages/core-mobile/app/new/features/onboarding/hooks/useSeedlessManageMFA.ts

@@ -1,4 +1,4 @@
-import { TotpChallenge } from '@cubist-labs/cubesigner-sdk'
+import { AddFidoChallenge, TotpChallenge } from '@cubist-labs/cubesigner-sdk'
 import { showSnackbar } from 'common/utils/toast'
 import useVerifyMFA from 'seedless/hooks/useVerifyMFA'
 import SeedlessService from 'seedless/services/SeedlessService'
@@ -8,6 +8,10 @@ function useSeedlessManageMFA(): {
   totpResetInit: (
     onInitialzied: (challenge: TotpChallenge) => void
   ) => Promise<void>
+  fidoRegisterInit: (
+    name: string,
+    onInitialzied: (challenge: AddFidoChallenge) => Promise<void>
+  ) => Promise<void>
 } {
   const { verifyMFA } = useVerifyMFA(SeedlessService.sessionManager)
 
@@ -40,8 +44,39 @@ function useSeedlessManageMFA(): {
     }
   }
 
+  async function fidoRegisterInit(
+    name: string,
+    onInitialzied: (challenge: AddFidoChallenge) => Promise<void>
+  ): Promise<void> {
+    try {
+      const fidoRegisterInitResponse =
+        await SeedlessService.sessionManager.fidoRegisterInit(name)
+
+      if (fidoRegisterInitResponse.requiresMfa()) {
+        const handleVerifySuccess: HandleVerifyMfaSuccess<
+          AddFidoChallenge
+        > = async addFidoChallenge => {
+          onInitialzied(addFidoChallenge)
+        }
+
+        verifyMFA({
+          response: fidoRegisterInitResponse,
+          onVerifySuccess: handleVerifySuccess
+        })
+      } else {
+        const addFidoChallenge = fidoRegisterInitResponse.data()
+
+        onInitialzied(addFidoChallenge)
+      }
+    } catch (e) {
+      Logger.error('fidoRegisterInit error', e)
+      showSnackbar('Unable to reset totp. Please try again.')
+    }
+  }
+
   return {
-    totpResetInit
+    totpResetInit,
+    fidoRegisterInit
   }
 }
 

packages/core-mobile/app/new/routes/onboarding/seedless/addRecoveryMethods.tsx

@@ -5,8 +5,9 @@ import {
   RecoveryMethods,
   useAvailableRecoveryMethods
 } from 'features/onboarding/hooks/useAvailableRecoveryMethods'
-import { useRecoveryMethodContext } from 'features/onboarding/contexts/RecoveryMethodProvider'
 import { AddRecoveryMethods as Component } from 'features/onboarding/components/AddRecoveryMethods'
+import { useRecoveryMethodContext } from 'features/onboarding/contexts/RecoveryMethodProvider'
+import { FidoType } from 'services/passkey/types'
 
 const AddRecoveryMethods = (): JSX.Element => {
   const { navigate } = useRouter()
@@ -21,27 +22,27 @@ const AddRecoveryMethods = (): JSX.Element => {
 
   const handleOnNext = (): void => {
     if (selectedMethod === RecoveryMethods.Passkey) {
-      // navigate({
-      //   pathname: './fidoNameInput',
-      //   params: {
-      //     title: 'How would you like to name your passkey?',
-      //     description: 'Add a Passkey name, so it’s easier to find later',
-      //     textInputPlaceholder: 'Passkey name',
-      //     fidoType: FidoType.PASS_KEY
-      //   }
-      // })
+      navigate({
+        pathname: './fidoNameInput',
+        params: {
+          title: 'How would you like to name your passkey?',
+          description: 'Add a Passkey name, so it’s easier to find later',
+          textInputPlaceholder: 'Passkey name',
+          fidoType: FidoType.PASS_KEY
+        }
+      })
       return
     }
     if (selectedMethod === RecoveryMethods.Yubikey) {
-      // navigate({
-      //   pathname: './fidoNameInput',
-      //   params: {
-      //     title: 'How would you like to name your YubiKey?',
-      //     description: 'Add a YubiKey name, so it’s easier to find later',
-      //     textInputPlaceholder: 'YubiKey name',
-      //     fidoType: FidoType.YUBI_KEY
-      //   }
-      // })
+      navigate({
+        pathname: './fidoNameInput',
+        params: {
+          title: 'How would you like to name your YubiKey?',
+          description: 'Add a YubiKey name, so it’s easier to find later',
+          textInputPlaceholder: 'YubiKey name',
+          fidoType: FidoType.YUBI_KEY
+        }
+      })
       return
     }
     if (selectedMethod === RecoveryMethods.Authenticator) {

packages/core-mobile/app/new/routes/onboarding/seedless/fidoNameInput.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useState } from 'react'
+import { useLocalSearchParams, useRouter } from 'expo-router'
+import { FidoType } from 'services/passkey/types'
+import { useRegisterAndAuthenticateFido } from 'features/onboarding/hooks/useRegisterAndAuthenticateFido'
+import { hideLogoModal, showLogoModal } from 'common/components/LogoModal'
+import SeedlessService from 'seedless/services/SeedlessService'
+import Component from 'features/onboarding/components/FidoNameInput'
+
+export type FIDONameInputProps = {
+  fidoType: FidoType
+  title: string
+  description: string
+  textInputPlaceholder: string
+}
+
+const FidoNameInput = (): JSX.Element => {
+  const router = useRouter()
+  const { registerAndAuthenticateFido } = useRegisterAndAuthenticateFido()
+  const { title, description, textInputPlaceholder, fidoType } =
+    useLocalSearchParams<FIDONameInputProps>()
+
+  const [name, setName] = useState<string>('')
+
+  const onAccountVerified = useCallback(async (): Promise<void> => {
+    showLogoModal()
+    const walletName = await SeedlessService.getAccountName()
+    hideLogoModal()
+
+    if (walletName) {
+      router.navigate('./createPin')
+      return
+    }
+    router.navigate('./nameYourWallet')
+  }, [router])
+
+  const handleSave = (): void => {
+    if (router.canGoBack()) {
+      router.back()
+    }
+    fidoType &&
+      registerAndAuthenticateFido({
+        name,
+        fidoType,
+        onAccountVerified
+      })
+  }
+
+  return (
+    <Component
+      title={title ?? ''}
+      description={description ?? ''}
+      textInputPlaceholder={textInputPlaceholder ?? ''}
+      name={name}
+      setName={setName}
+      handleSave={handleSave}
+    />
+  )
+}
+
+export default FidoNameInput

packages/core-mobile/app/seedless/hooks/useSeedlessRegister.ts

@@ -182,7 +182,7 @@ export const useSeedlessRegister = (): ReturnType => {
         await SeedlessService.sessionManager.approveFido(
           oidcAuth.oidcToken,
           oidcAuth.mfaId,
-          false
+          true
         )
 
         AnalyticsService.capture('SeedlessMfaVerified', { type: 'Fido' })

packages/core-mobile/app/seedless/hooks/useVerifyMFA.ts

@@ -106,10 +106,7 @@ function useVerifyMFA(sessionManager: SeedlessSessionManager): {
     onVerifySuccess: (response: T) => void
   }) => {
     const challenge = await sessionManager.fidoApproveStart(response.mfaId())
-    const credential = await PasskeyService.authenticate(
-      challenge.options,
-      true
-    )
+    const credential = await PasskeyService.get(challenge.options, true)
     const mfaRequestInfo = await challenge.answer(credential)
     if (!mfaRequestInfo.receipt?.confirmation) {
       throw new Error('FIDO authentication failed')

packages/core-mobile/app/seedless/screens/AddRecoveryMethods.tsx

@@ -76,7 +76,7 @@ export const AddRecoveryMethods = (): JSX.Element => {
       const withSecurityKey = fidoType === FidoType.YUBI_KEY
 
       fidoRegisterInit(passkeyName, async challenge => {
-        const credential = await PasskeyService.register(
+        const credential = await PasskeyService.create(
           challenge.options,
           withSecurityKey
         )

packages/core-mobile/app/seedless/services/SeedlessSessionManager.ts

@@ -224,7 +224,7 @@ class SeedlessSessionManager {
     withSecurityKey: boolean
   ): Promise<void> {
     const challenge = await this.fidoApproveStart(mfaId)
-    const credential = await PasskeyService.authenticate(
+    const credential = await PasskeyService.get(
       challenge.options,
       withSecurityKey
     )

packages/core-mobile/app/seedless/utils/startRefreshSeedlessTokenFlow.ts

@@ -145,11 +145,7 @@ async function fidoRefreshFlow(
   sessionManager: SeedlessSessionManager
 ): Promise<Result<void, RefreshSeedlessTokenFlowErrors>> {
   try {
-    await sessionManager.approveFido(
-      oidcToken,
-      mfaId,
-      false //FIXME: this parameter is not needed, should refactor approveFido to remove it,
-    )
+    await sessionManager.approveFido(oidcToken, mfaId, true)
     return {
       success: true,
       value: undefined