fix: mfa enrollment qr integrate with continue method (#62)

Author: grandmaester

react/src/__mocks__/@auth0/auth0-acul-react/mfa-push-enrollment-qr.ts

@@ -11,6 +11,7 @@ import type {
  * This provides a single, type-safe object to control in our tests.
  */
 export interface MockMfaPushEnrollmentQRInstance {
+  continue: jest.Mock;
   pickAuthenticator: jest.Mock;
   screen: ScreenMembersOnMfaPushEnrollmentQr;
   transaction: TransactionMembers;
@@ -24,6 +25,7 @@ export interface MockMfaPushEnrollmentQRInstance {
  */
 export const createMockMfaPushEnrollmentQRInstance =
   (): MockMfaPushEnrollmentQRInstance => ({
+    continue: jest.fn(),
     pickAuthenticator: jest.fn(),
     screen: {
       name: "mfa-push-enrollment-qr",
@@ -98,6 +100,7 @@ export const pickAuthenticator =
 
 export const useMfaPushEnrollmentQr = jest.fn(() => ({
   screen: mockMfaPushEnrollmentQRInstance.screen,
+  continue: mockMfaPushEnrollmentQRInstance.continue,
   pickAuthenticator: mockMfaPushEnrollmentQRInstance.pickAuthenticator,
 }));
 

react/src/screens/mfa-push-enrollment-qr/components/MfaPushEnrollmentQRForm.tsx

@@ -14,8 +14,14 @@ import { ULThemeAlert, ULThemeAlertTitle } from "@/components/ULThemeError";
 import { useMfaPushEnrollmentQRManager } from "../hooks/useMfaPushEnrollmentQRManager";
 
 function MfaPushEnrollmentQRForm() {
-  const { data, texts, locales, enrolledFactors, handlePickAuthenticator } =
-    useMfaPushEnrollmentQRManager();
+  const {
+    data,
+    texts,
+    locales,
+    enrolledFactors,
+    handlePickAuthenticator,
+    handleContinueMfaPushEnrollmentQR,
+  } = useMfaPushEnrollmentQRManager();
 
   // Initialize the form using react-hook-form
   const form = useForm<CustomOptions>({});
@@ -40,6 +46,9 @@ function MfaPushEnrollmentQRForm() {
   // Automatically start polling when the page loads
   const { startPolling, stopPolling } = useMfaPolling({
     intervalMs: 3000,
+    onCompleted: () => {
+      handleContinueMfaPushEnrollmentQR();
+    },
     onError: (error: unknown) =>
       console.error("Push Enrollment Polling error:", error),
   });

react/src/screens/mfa-push-enrollment-qr/hooks/useMfaPushEnrollmentQRManager.ts

@@ -6,6 +6,7 @@ import {
 import {
   CustomOptions,
   MfaPushEnrollmentQrMembers,
+  MfaPushEnrollmentQrWithRememberOptions,
   ScreenMembersOnMfaPushEnrollmentQr,
   UserMembers,
 } from "@auth0/auth0-acul-react/types";
@@ -22,6 +23,15 @@ export const useMfaPushEnrollmentQRManager = () => {
   const { texts, data } = screen;
   const { enrolledFactors } = userInfo || {};
 
+  const handleContinueMfaPushEnrollmentQR = async (
+    payload?: MfaPushEnrollmentQrWithRememberOptions
+  ): Promise<void> => {
+    await executeSafely(
+      `Continue MFA Push Enrollment QR with options: ${JSON.stringify(payload)}`,
+      () => mfaPushEnrollmentQR.continue(payload)
+    );
+  };
+
   const handlePickAuthenticator = async (
     payload?: CustomOptions
   ): Promise<void> => {
@@ -37,6 +47,7 @@ export const useMfaPushEnrollmentQRManager = () => {
     enrolledFactors,
     mfaPushEnrollmentQR,
     handlePickAuthenticator,
+    handleContinueMfaPushEnrollmentQR,
     texts: (texts || {}) as ScreenMembersOnMfaPushEnrollmentQr["texts"],
   };
 };