toggleView on otp enrollment code page

Get Help
,
1

I am trying to use the function toggleView to change from the mfa otp enrollment code page back to the mfa otp QR code page. This function works when going from QR to code but not back. The AI assistant said ‘the docs confirm toggleView is valid in v1.5.0’ so I upgraded react and still had the issue. It also said my ‘runtime error means toggleView is returning undefined from the hook — this happens when the screen context doesn’t support toggleView at runtime (i.e., the Auth0 backend isn’t providing it for your current flow state).’ I tried to log the methods available from ‘@auth0/auth0-acul-react/mfa-otp-enrollment-code’ in the console and toggleView wasn’t listed. It was however listed on @auth0/auth0-acul-react/mfa-otp-enrollment-qr. Below is an example of the code:

// ``https://auth0.com/docs/libraries/acul/react-sdk/API-Reference/Screens/mfa-otp-enrollment-code/index
const handleSwitchToQrEnrollment = async () => {
executeSafely(Perform switch to QR Enroll, () => toggleView());
};

In my console, I keep getting this error: Uncaught TypeError: toggleView is not a function at onClick.

3

Hi @kaeb.sidney

Welcome to the Auth0 Community!

I understand that you are having issues using the toggleView function to change from the MFA OTP Enrollment screen to the MFA OTP QR code screen.

Please allow us some time to research on this matter and we will update you with more information in a timely manner.

Thank you,
Gerald

4

Good Morning, just wanted to see if there was any update on this?

5

@gerald.czifra just checking in on this again to see if there was any update for us.

6

Hi @kaeb.sidney and @Clover.Earl

I am sorry for the delayed response to the issue at hand.

I understand that you are having issues in using the `toggleView` function on the `mfa-otp-enrollment-code` screen. The `toggleView` function is asymmetrically available in the ACUL React SDK: it is only exposed on the `mfa-otp-enrollment-qr` screen context, not on the `mfa-otp-enrollment-code` screen context. This is a limitation of the screen's context API, not a bug in your code.

Root Cause: Each ACUL screen context exposes a specific set of methods based on the screen's role in the authentication flow. The mfa-otp-enrollment-qr screen is designed as the primary entry point for OTP enrollment and includes the toggleView method to allow users to switch to the code-based enrollment path. The mfa-otp-enrollment-code screen, by contrast, is designed as an alternative path and does not expose toggleView in its context API. This asymmetry means you cannot toggle back from code to QR using the built-in method.

Official Workaround: Instead of using toggleView to return from the code screen to the QR screen, use one of the following approaches:

Approach 1: Navigate back using the browser history (Simplest)

const handleBackToQr = () => {
  window.history.back();
};

return (
  <button onClick={handleBackToQr}>Back to QR Code</button>
);

This approach relies on the browser's navigation history and will return the user to the previous screen (the QR code screen) without requiring the toggleView method.

Approach 2: Use a custom state variable to track enrollment method (Recommended)

  1. Store the enrollment method in a state variable at the parent level (outside the individual screen components) so you can control which screen is displayed: 
    const [enrollmentMethod, setEnrollmentMethod] = useState('qr'); // 'qr' or 'code'

return (
  <>
    {enrollmentMethod === 'qr' ? (
      <MfaOtpEnrollmentQrScreen 
        onSwitchToCode={() => setEnrollmentMethod('code')} 
      />
    ) : (
      <MfaOtpEnrollmentCodeScreen 
        onSwitchToQr={() => setEnrollmentMethod('qr')} 
      />
    )}
  </>
);

    This approach gives you full control over the enrollment flow and allows bidirectional switching without relying on screen-specific methods.

    Approach 3: Use a custom redirect (If you need to preserve Auth0 session state)

    const handleSwitchToQrEnrollment = () => {
  const params = new URLSearchParams(window.location.search);
  window.location.href = `/authorize?${params.toString()}`;
};

return (
  <button onClick={handleSwitchToQrEnrollment}>Switch to QR Code</button>
);

    The ACUL React SDK exposes screen-specific methods based on the screen's design role. The QR screen is the primary enrollment entry point and includes navigation methods like toggleView. The code screen is an alternative path and does not include these navigation methods. This is by design, not a bug.

    Recommendation: Use Approach 2 (custom state variable) for the best user experience, as it allows seamless bidirectional switching without relying on browser history or re-authorization.

    Kind Regards,
    Nik