Preserve canonical MFA method types

Author: masnwilliams

packages/managed-auth-react/src/lib/types.ts

@@ -87,6 +87,7 @@ export type ManagedAuthChoiceType =
 export interface ManagedAuthChoice {
   id: string;
   type: ManagedAuthChoiceType;
+  mfa_type?: MFAType | null;
   label: string;
   description?: string | null;
   observed_selector?: string | null;

packages/managed-auth-react/src/session/state.test.ts

@@ -107,11 +107,18 @@ describe("normalizeManagedAuthState", () => {
     const state = managedAuthState({
       choices: [
         {
-          id: "sms_code",
+          id: "text-ending-4821",
           type: "mfa_method",
-          label: "Text me a code",
+          mfa_type: "sms",
+          label: "Text ending in 4821",
           description: "Six-digit code",
         },
+        {
+          id: "text-ending-9930",
+          type: "mfa_method",
+          mfa_type: "sms",
+          label: "Text ending in 9930",
+        },
         {
           id: "security_key_vendor",
           type: "mfa_method",
@@ -121,20 +128,32 @@ describe("normalizeManagedAuthState", () => {
       mfa_options: [
         {
           type: "sms",
-          label: "Text me a code",
-          target: "***-***-5678",
+          label: "Text ending in 4821",
+          target: "***-***-4821",
+        },
+        {
+          type: "sms",
+          label: "Text ending in 9930",
+          target: "***-***-9930",
         },
       ],
     });
 
     expect(normalizeManagedAuthState(state).mfa_options).toEqual([
       {
-        id: "sms_code",
+        id: "text-ending-4821",
         type: "sms",
-        label: "Text me a code",
-        target: "***-***-5678",
+        label: "Text ending in 4821",
+        target: "***-***-4821",
         description: "Six-digit code",
       },
+      {
+        id: "text-ending-9930",
+        type: "sms",
+        label: "Text ending in 9930",
+        target: "***-***-9930",
+        description: undefined,
+      },
       {
         id: "security_key_vendor",
         type: "other",

packages/managed-auth-react/src/session/state.ts

@@ -129,7 +129,7 @@ function mfaOptionsFromCanonical(
   const options = choices
     .filter((choice) => choice.type === "mfa_method")
     .map((choice) => {
-      const type = normalizeMFAChoiceId(choice.id);
+      const type = choice.mfa_type ?? normalizeMFAChoiceId(choice.id);
       const target = targets.get(type)?.shift();
       return {
         id: choice.id,