feat(dev): add u2f ui for managing devices and signing in (#2182)

* feat: add u2f ui for managing devices and signing in

* refactor: change unnecessary useState to derived constant

* fix: modal refactor

* fix(web): hide u2f under feature trunk

* fix(web): jest setup

---------

Co-authored-by: Aman Harwara <amanharwara@protonmail.com>

packages/snjs/lib/Domain/UseCase/GetAuthenticatorAuthenticationResponse/GetAuthenticatorAuthenticationResponse.spec.ts

@@ -1,27 +1,37 @@
 import { AuthenticatorClientInterface } from '@standardnotes/services'
 
-import { VerifyAuthenticator } from './VerifyAuthenticator'
+import { GetAuthenticatorAuthenticationResponse } from './GetAuthenticatorAuthenticationResponse'
 
-describe('VerifyAuthenticator', () => {
+describe('GetAuthenticatorAuthenticationResponse', () => {
   let authenticatorClient: AuthenticatorClientInterface
   let authenticatorVerificationPromptFunction: (
     authenticationOptions: Record<string, unknown>,
   ) => Promise<Record<string, unknown>>
 
-  const createUseCase = () => new VerifyAuthenticator(authenticatorClient, authenticatorVerificationPromptFunction)
+  const createUseCase = () => new GetAuthenticatorAuthenticationResponse(authenticatorClient, authenticatorVerificationPromptFunction)
 
   beforeEach(() => {
     authenticatorClient = {} as jest.Mocked<AuthenticatorClientInterface>
     authenticatorClient.generateAuthenticationOptions = jest.fn().mockResolvedValue({ foo: 'bar' })
-    authenticatorClient.verifyAuthenticationResponse = jest.fn().mockResolvedValue(true)
 
     authenticatorVerificationPromptFunction = jest.fn()
   })
 
+  it('should return an error if username is not provided', async () => {
+    const result = await createUseCase().execute({
+      username: '',
+    })
+
+    expect(result.isFailed()).toBe(true)
+    expect(result.getError()).toBe('Could not generate authenticator authentication options: Username cannot be empty')
+  })
+
   it('should return an error if authenticator client fails to generate authentication options', async () => {
     authenticatorClient.generateAuthenticationOptions = jest.fn().mockResolvedValue(null)
 
-    const result = await createUseCase().execute({ userUuid: '00000000-0000-0000-0000-000000000000' })
+    const result = await createUseCase().execute({
+      username: 'test@test.te',
+    })
 
     expect(result.isFailed()).toBe(true)
     expect(result.getError()).toBe('Could not generate authenticator authentication options')
@@ -30,36 +40,25 @@ describe('VerifyAuthenticator', () => {
   it('should return an error if authenticator verification prompt function fails', async () => {
     authenticatorVerificationPromptFunction = jest.fn().mockRejectedValue(new Error('error'))
 
-    const result = await createUseCase().execute({ userUuid: '00000000-0000-0000-0000-000000000000' })
+    const result = await createUseCase().execute({
+      username: 'test@test.te',
+    })
 
     expect(result.isFailed()).toBe(true)
     expect(result.getError()).toBe('Could not generate authenticator authentication options: error')
   })
 
-  it('should return an error if authenticator client fails to verify authentication response', async () => {
-    authenticatorClient.verifyAuthenticationResponse = jest.fn().mockResolvedValue(false)
-
-    const result = await createUseCase().execute({ userUuid: '00000000-0000-0000-0000-000000000000' })
-
-    expect(result.isFailed()).toBe(true)
-    expect(result.getError()).toBe('Could not generate authenticator authentication options')
-  })
-
-  it('should return ok if authenticator client succeeds to verify authentication response', async () => {
-    const result = await createUseCase().execute({ userUuid: '00000000-0000-0000-0000-000000000000' })
+  it('should return ok if authenticator client succeeds to generate authenticator response', async () => {
+    const result = await createUseCase().execute({
+      username: 'test@test.te',
+    })
 
     expect(result.isFailed()).toBe(false)
   })
 
-  it('should return an error if user uuid is invalid', async () => {
-    const result = await createUseCase().execute({ userUuid: 'invalid' })
-
-    expect(result.isFailed()).toBe(true)
-  })
-
   it('should return error if authenticatorVerificationPromptFunction is not provided', async () => {
-    const result = await new VerifyAuthenticator(authenticatorClient).execute({
-      userUuid: '00000000-0000-0000-0000-000000000000',
+    const result = await new GetAuthenticatorAuthenticationResponse(authenticatorClient).execute({
+      username: 'test@test.te',
     })
 
     expect(result.isFailed()).toBe(true)

packages/snjs/lib/Domain/UseCase/GetAuthenticatorAuthenticationResponse/GetAuthenticatorAuthenticationResponse.ts

@@ -1,9 +1,8 @@
 import { AuthenticatorClientInterface } from '@standardnotes/services'
-import { Result, UseCaseInterface, Uuid } from '@standardnotes/domain-core'
+import { Result, UseCaseInterface, Username } from '@standardnotes/domain-core'
+import { GetAuthenticatorAuthenticationResponseDTO } from './GetAuthenticatorAuthenticationResponseDTO'
 
-import { VerifyAuthenticatorDTO } from './VerifyAuthenticatorDTO'
-
-export class VerifyAuthenticator implements UseCaseInterface<void> {
+export class GetAuthenticatorAuthenticationResponse implements UseCaseInterface<Record<string, unknown>> {
   constructor(
     private authenticatorClient: AuthenticatorClientInterface,
     private authenticatorVerificationPromptFunction?: (
@@ -11,20 +10,20 @@ export class VerifyAuthenticator implements UseCaseInterface<void> {
     ) => Promise<Record<string, unknown>>,
   ) {}
 
-  async execute(dto: VerifyAuthenticatorDTO): Promise<Result<void>> {
+  async execute(dto: GetAuthenticatorAuthenticationResponseDTO): Promise<Result<Record<string, unknown>>> {
     if (!this.authenticatorVerificationPromptFunction) {
       return Result.fail(
         'Could not generate authenticator authentication options: No authenticator verification prompt function provided',
       )
     }
 
-    const userUuidOrError = Uuid.create(dto.userUuid)
-    if (userUuidOrError.isFailed()) {
-      return Result.fail(`Could not generate authenticator authentication options: ${userUuidOrError.getError()}`)
+    const usernameOrError = Username.create(dto.username)
+    if (usernameOrError.isFailed()) {
+      return Result.fail(`Could not generate authenticator authentication options: ${usernameOrError.getError()}`)
     }
-    const userUuid = userUuidOrError.getValue()
+    const username = usernameOrError.getValue()
 
-    const authenticationOptions = await this.authenticatorClient.generateAuthenticationOptions()
+    const authenticationOptions = await this.authenticatorClient.generateAuthenticationOptions(username)
     if (authenticationOptions === null) {
       return Result.fail('Could not generate authenticator authentication options')
     }
@@ -36,14 +35,6 @@ export class VerifyAuthenticator implements UseCaseInterface<void> {
       return Result.fail(`Could not generate authenticator authentication options: ${(error as Error).message}`)
     }
 
-    const verificationResponse = await this.authenticatorClient.verifyAuthenticationResponse(
-      userUuid,
-      authenticatorResponse,
-    )
-    if (!verificationResponse) {
-      return Result.fail('Could not generate authenticator authentication options')
-    }
-
-    return Result.ok()
+    return Result.ok(authenticatorResponse)
   }
 }

packages/snjs/lib/Domain/UseCase/GetAuthenticatorAuthenticationResponse/GetAuthenticatorAuthenticationResponseDTO.ts

@@ -0,0 +1,3 @@
+export interface GetAuthenticatorAuthenticationResponseDTO {
+  username: string
+}

packages/snjs/lib/Domain/UseCase/UseCaseContainerInterface.ts

@@ -9,7 +9,7 @@ export interface UseCaseContainerInterface {
   get addAuthenticator(): UseCaseInterface<void>
   get listAuthenticators(): UseCaseInterface<Array<{ id: string; name: string }>>
   get deleteAuthenticator(): UseCaseInterface<void>
-  get verifyAuthenticator(): UseCaseInterface<void>
+  get getAuthenticatorAuthenticationResponse(): UseCaseInterface<Record<string, unknown>>
   get listRevisions(): UseCaseInterface<Array<RevisionMetadata>>
   get getRevision(): UseCaseInterface<HistoryEntry>
   get deleteRevision(): UseCaseInterface<void>

packages/snjs/lib/Domain/UseCase/VerifyAuthenticator/VerifyAuthenticatorDTO.ts

@@ -1,3 +0,0 @@
-export interface VerifyAuthenticatorDTO {
-  userUuid: string
-}