Remove screen to select authentication method: passkey or pin (#2687)

lmuntaner · web-flow · commit a559ccf345c1 · 2024-11-07T12:42:43.000Z
* Remove screen to choose passkey or pin

* Fix e2e test

* Fix lint

* Disable VC with pin

* Fix dev-build test
diff --git a/demos/using-dev-build/specs/auth.e2e.ts b/demos/using-dev-build/specs/auth.e2e.ts
@@ -10,11 +10,12 @@ describe("authentication", () => {
     await browser.$("#registerButton").click();
 
     // Construct Identity (no-op)
-    const constructIdentity = await browser.$(
-      '[data-action="construct-identity"]'
-    );
-    await constructIdentity.waitForExist();
-    await constructIdentity.click();
+    // TODO: GIX-3138 Clean up after release
+    // const constructIdentity = await browser.$(
+    //   '[data-action="construct-identity"]'
+    // );
+    // await constructIdentity.waitForExist();
+    // await constructIdentity.click();
 
     await browser.$("h1").waitForExist();
     const title = await browser.$("h1");
diff --git a/src/frontend/src/flows/register/index.ts b/src/frontend/src/flows/register/index.ts
@@ -1,19 +1,10 @@
 import { AuthnMethodData } from "$generated/internet_identity_types";
 import { withLoader } from "$src/components/loader";
-import {
-  PinIdentityMaterial,
-  constructPinIdentity,
-} from "$src/crypto/pinIdentity";
-import { tempKeyWarningBox } from "$src/flows/manage/tempKeys";
+import { PinIdentityMaterial } from "$src/crypto/pinIdentity";
 import { idbStorePinIdentityMaterial } from "$src/flows/pin/idb";
-import { setPinFlow } from "$src/flows/pin/setPin";
 import { registerDisabled } from "$src/flows/registerDisabled";
-import { I18n } from "$src/i18n";
 import { setAnchorUsed } from "$src/storage";
-import {
-  passkeyAuthnMethodData,
-  pinAuthnMethodData,
-} from "$src/utils/authnMethodData";
+import { passkeyAuthnMethodData } from "$src/utils/authnMethodData";
 import {
   AlreadyInProgress,
   ApiError,
@@ -32,7 +23,6 @@ import {
 import { SignIdentity } from "@dfinity/agent";
 import { ECDSAKeyIdentity } from "@dfinity/identity";
 import { nonNullish } from "@dfinity/utils";
-import { TemplateResult } from "lit-html";
 import type { UAParser } from "ua-parser-js";
 import { precomputeFirst, promptCaptcha } from "./captcha";
 import { displayUserNumberWarmup } from "./finish";
@@ -43,9 +33,9 @@ export const registerFlow = async ({
   identityRegistrationStart,
   checkCaptcha,
   identityRegistrationFinish,
-  storePinIdentity,
+  storePinIdentity: _storePinIdentity,
   registrationAllowed,
-  pinAllowed,
+  pinAllowed: _pinAllowed,
   uaParser,
 }: {
   identityRegistrationStart: () => Promise<
@@ -108,78 +98,24 @@ export const registerFlow = async ({
   const flowStart = precomputeFirst(() => identityRegistrationStart());
 
   const displayUserNumber = displayUserNumberWarmup();
-  const savePasskeyResult = await savePasskeyOrPin({
-    pinAllowed: await pinAllowed(),
-  });
-  if (savePasskeyResult === "canceled") {
-    return "canceled";
-  }
-  const result_ = await (async () => {
-    if (savePasskeyResult === "pin") {
-      const pinResult = await setPinFlow();
-      if (pinResult.tag === "canceled") {
-        return "canceled";
-      }
-
-      pinResult.tag satisfies "ok";
-
-      // XXX: this withLoader could be replaced with one that indicates what's happening (like the
-      // "Hang tight, ..." spinner)
-      const { identity, pinIdentityMaterial } = await withLoader(() =>
-        constructPinIdentity(pinResult)
-      );
-      const alias = await inferPinAlias({
-        userAgent: navigator.userAgent,
-        uaParser,
-      });
-      return {
-        identity,
-        authnMethodData: pinAuthnMethodData({
-          alias,
-          pubKey: identity.getPublicKey().toDer(),
-        }),
-        finalizeIdentity: (userNumber: bigint) =>
-          storePinIdentity({ userNumber, pinIdentityMaterial }),
-        finishSlot: tempKeyWarningBox({ i18n: new I18n() }),
-        authnMethod: "pin" as const,
-      };
-    } else {
-      const identity = savePasskeyResult;
-      const alias = await inferPasskeyAlias({
-        authenticatorType: identity.getAuthenticatorAttachment(),
-        userAgent: navigator.userAgent,
-        uaParser,
-      });
-      return {
-        identity,
-        authnMethodData: passkeyAuthnMethodData({
-          alias,
-          pubKey: identity.getPublicKey().toDer(),
-          credentialId: identity.rawId,
-          authenticatorAttachment: identity.getAuthenticatorAttachment(),
-        }),
-        authnMethod: "passkey" as const,
-      };
-    }
-  })();
-
-  if (result_ === "canceled") {
+  const identity = await savePasskeyOrPin();
+  if (identity === undefined) {
+    // TODO: Return something meaningful if getting the identity fails
     return "canceled";
   }
+  const alias = await inferPasskeyAlias({
+    authenticatorType: identity.getAuthenticatorAttachment(),
+    userAgent: navigator.userAgent,
+    uaParser,
+  });
 
-  const {
-    identity,
-    authnMethodData,
-    finalizeIdentity,
-    finishSlot,
-    authnMethod,
-  }: {
-    identity: SignIdentity;
-    authnMethodData: AuthnMethodData;
-    finalizeIdentity?: (userNumber: bigint) => Promise<void>;
-    finishSlot?: TemplateResult;
-    authnMethod: "pin" | "passkey";
-  } = result_;
+  const authnMethodData = passkeyAuthnMethodData({
+    alias,
+    pubKey: identity.getPublicKey().toDer(),
+    credentialId: identity.rawId,
+    authenticatorAttachment: identity.getAuthenticatorAttachment(),
+  });
+  const authnMethod = "passkey" as const;
 
   const startResult = await flowStart();
   if (startResult.kind !== "registrationFlowStepSuccess") {
@@ -214,7 +150,6 @@ export const registerFlow = async ({
   result.kind satisfies "loginSuccess";
 
   const userNumber = result.userNumber;
-  await finalizeIdentity?.(userNumber);
   // We don't want to nudge the user with the recovery phrase warning page
   // right after they've created their anchor.
   result.connection.updateIdentityMetadata({
@@ -227,7 +162,6 @@ export const registerFlow = async ({
   );
   await displayUserNumber({
     userNumber,
-    marketingIntroSlot: finishSlot,
   });
   return { ...result, authnMethod };
 };
diff --git a/src/frontend/src/flows/register/passkey.ts b/src/frontend/src/flows/register/passkey.ts
@@ -97,27 +97,15 @@ const savePasskeyTemplate = ({
 export const savePasskeyPage = renderPage(savePasskeyTemplate);
 
 // Prompt the user to create a WebAuthn identity or a PIN identity (if allowed)
-export const savePasskeyOrPin = ({
-  pinAllowed,
-}: {
-  pinAllowed: boolean;
-}): Promise<IIWebAuthnIdentity | "pin" | "canceled"> => {
-  return new Promise((resolve) =>
-    savePasskeyPage({
-      i18n: new I18n(),
-      cancel: () => resolve("canceled"),
-      scrollToTop: true,
-      constructPasskey: async () => {
-        try {
-          const identity = await withLoader(() => constructIdentity({}));
-          resolve(identity);
-        } catch (e) {
-          toast.error(errorMessage(e));
-        }
-      },
-      constructPin: pinAllowed ? () => resolve("pin") : undefined,
-    })
-  );
+export const savePasskeyOrPin = async (): Promise<
+  IIWebAuthnIdentity | undefined
+> => {
+  try {
+    return await withLoader(() => constructIdentity({}));
+  } catch (e) {
+    toast.error(errorMessage(e));
+    return undefined;
+  }
 };
 
 // Return an appropriate error message depending on the (inferred) type of WebAuthn error
diff --git a/src/frontend/src/test-e2e/flows.ts b/src/frontend/src/test-e2e/flows.ts
@@ -15,8 +15,9 @@ import {
 export const FLOWS = {
   register: async function (browser: WebdriverIO.Browser): Promise<string> {
     const registerView = new RegisterView(browser);
-    await registerView.waitForDisplay();
-    await registerView.create();
+    // TODO: GIX-3138 Clean up after release
+    // await registerView.waitForDisplay();
+    // await registerView.create();
     if (CAPTCHA_ENABLED) {
       await registerView.waitForRegisterConfirm();
       await registerView.confirmRegisterConfirm();
diff --git a/src/frontend/src/test-e2e/pinAuth.test.ts b/src/frontend/src/test-e2e/pinAuth.test.ts
@@ -23,7 +23,9 @@ import {
 
 const DEFAULT_PIN_DEVICE_NAME = "Chrome on Mac OS";
 
-test("PIN registration not enabled on non-Apple device", async () => {
+// TODO: GIX-3138 Clean up after release
+// TODO: Test login with PIN only GIX-3139
+test.skip("PIN registration not enabled on non-Apple device", async () => {
   await runInBrowser(async (browser: WebdriverIO.Browser) => {
     await browser.url(II_URL);
     const welcomeView = new WelcomeView(browser);
@@ -38,7 +40,7 @@ test("PIN registration not enabled on non-Apple device", async () => {
 // The PIN auth feature is only enabled for Apple specific user agents, so tests set the user
 // agent to chrome on macOS
 
-test("Register and Log in with PIN identity", async () => {
+test.skip("Register and Log in with PIN identity", async () => {
   await runInBrowser(async (browser: WebdriverIO.Browser) => {
     const pin = "123456";
 
@@ -53,7 +55,7 @@ test("Register and Log in with PIN identity", async () => {
   }, APPLE_USER_AGENT);
 }, 300_000);
 
-test("Register with PIN and login without prefilled identity number", async () => {
+test.skip("Register with PIN and login without prefilled identity number", async () => {
   await runInBrowser(async (browser: WebdriverIO.Browser) => {
     const pin = "123456";
     await browser.url(II_URL);
@@ -72,7 +74,7 @@ test("Register with PIN and login without prefilled identity number", async () =
   }, APPLE_USER_AGENT);
 }, 300_000);
 
-test("Register and log in with PIN identity, retry on wrong PIN", async () => {
+test.skip("Register and log in with PIN identity, retry on wrong PIN", async () => {
   await runInBrowser(async (browser: WebdriverIO.Browser) => {
     const pin = "123456";
     const wrongPin = "456321";
@@ -98,7 +100,7 @@ test("Register and log in with PIN identity, retry on wrong PIN", async () => {
   }, APPLE_USER_AGENT);
 }, 300_000);
 
-test("Should not prompt for PIN after deleting temp key", async () => {
+test.skip("Should not prompt for PIN after deleting temp key", async () => {
   await runInBrowser(async (browser: WebdriverIO.Browser) => {
     const pin = "123456";
     await addVirtualAuthenticator(browser);
@@ -121,7 +123,7 @@ test("Should not prompt for PIN after deleting temp key", async () => {
   }, APPLE_USER_AGENT);
 }, 300_000);
 
-test("Log into client application using PIN registration flow", async () => {
+test.skip("Log into client application using PIN registration flow", async () => {
   await runInBrowser(async (browser: WebdriverIO.Browser) => {
     const pin = "123456";
 
@@ -142,7 +144,7 @@ test("Log into client application using PIN registration flow", async () => {
   }, APPLE_USER_AGENT);
 }, 300_000);
 
-test("Register with PIN then log into client application", async () => {
+test.skip("Register with PIN then log into client application", async () => {
   await runInBrowser(async (browser: WebdriverIO.Browser) => {
     const pin = "123456";
 
diff --git a/src/frontend/src/test-e2e/pinAuthDisabled.test.ts b/src/frontend/src/test-e2e/pinAuthDisabled.test.ts
@@ -3,7 +3,8 @@ import { FLOWS } from "./flows";
 import { runInBrowser, switchToPopup } from "./util";
 import { AuthenticateView, DemoAppView, RegisterView } from "./views";
 
-test("Cannot register with PIN if dapp disallows PIN", async () => {
+// TODO: GIX-3138 Clean up after release
+test.skip("Cannot register with PIN if dapp disallows PIN", async () => {
   await runInBrowser(async (browser: WebdriverIO.Browser) => {
     const demoAppView = new DemoAppView(browser);
     await demoAppView.open(TEST_APP_NICE_URL, II_URL);
@@ -21,7 +22,7 @@ test("Cannot register with PIN if dapp disallows PIN", async () => {
   }, APPLE_USER_AGENT);
 }, 300_000);
 
-test("Cannot auth with PIN if dapp disallows PIN", async () => {
+test.skip("Cannot auth with PIN if dapp disallows PIN", async () => {
   await runInBrowser(async (browser: WebdriverIO.Browser) => {
     const pin = "123456";
 
diff --git a/src/frontend/src/test-e2e/verifiableCredentials/index.test.ts b/src/frontend/src/test-e2e/verifiableCredentials/index.test.ts
@@ -62,11 +62,12 @@ const testConfigs: Array<{
     issuer: ISSUER_APP_URL_LEGACY,
     authType: "webauthn",
   },
-  {
-    relyingParty: TEST_APP_CANONICAL_URL,
-    issuer: ISSUER_APP_URL,
-    authType: "pin",
-  },
+  // TODO: Renable with PIN GIX-3139
+  // {
+  //   relyingParty: TEST_APP_CANONICAL_URL,
+  //   issuer: ISSUER_APP_URL,
+  //   authType: "pin",
+  // },
 ];
 
 testConfigs.forEach(({ relyingParty, issuer, authType }) => {
diff --git a/src/frontend/src/test-e2e/views.ts b/src/frontend/src/test-e2e/views.ts
@@ -57,6 +57,9 @@ export class RenameView extends View {
 }
 
 export class RegisterView extends View {
+  // View: Passkey or PIN registration
+  // TODO: GIX-3138 Clean up after release
+  // At the moment it's used only in skipped tests.
   async waitForDisplay(): Promise<void> {
     await this.browser
       .$('[data-action="construct-identity"]')

Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,9 @@ export class RenameView extends View {`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`export class RegisterView extends View {`
	`60`	`+ // View: Passkey or PIN registration`
	`61`	`+ // TODO: GIX-3138 Clean up after release`
	`62`	`+ // At the moment it's used only in skipped tests.`
`60`	`63`	`async waitForDisplay(): Promise<void> {`
`61`	`64`	`await this.browser`
`62`	`65`	`.$('[data-action="construct-identity"]')`