# toggleView on otp enrollment code page

**URL:** <https://community.auth0.com/t/toggleview-on-otp-enrollment-code-page/201424>\
**Category:** Get Help\
**Tags:** one-time-password-otp-factor, mfa\
**Created:** [July 6, 2026, 12:32pm UTC](https://community.auth0.com/t/toggleview-on-otp-enrollment-code-page/201424 "2026-07-06T12:32:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kaeb.sidney](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/kaeb.sidney/32/72659_2.png) [@kaeb.sidney](https://community.auth0.com/u/kaeb.sidney)\
**Post date:** [July 6, 2026, 12:32pm UTC](https://community.auth0.com/t/toggleview-on-otp-enrollment-code-page/201424/1 "2026-07-06T12:32:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gerald.czifra](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/gerald.czifra/32/75301_2.png) [@gerald.czifra](https://community.auth0.com/u/gerald.czifra)\
**Post date:** [July 6, 2026, 11:37pm UTC](https://community.auth0.com/t/toggleview-on-otp-enrollment-code-page/201424/3 "2026-07-06T23:37:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Clover.Earl](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/clover.earl/32/74469_2.png) [@Clover.Earl](https://community.auth0.com/u/Clover.Earl)\
**Post date:** [July 14, 2026, 2:59pm UTC](https://community.auth0.com/t/toggleview-on-otp-enrollment-code-page/201424/4 "2026-07-14T14:59:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Clover.Earl](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/clover.earl/32/74469_2.png) [@Clover.Earl](https://community.auth0.com/u/Clover.Earl)\
**Post date:** [July 23, 2026, 12:24pm UTC](https://community.auth0.com/t/toggleview-on-otp-enrollment-code-page/201424/5 "2026-07-23T12:24:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nik.baleca](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/nik.baleca/32/68749_2.png) [@nik.baleca](https://community.auth0.com/u/nik.baleca)\
**Post date:** [August 3, 2026, 7:28pm UTC](https://community.auth0.com/t/toggleview-on-otp-enrollment-code-page/201424/6 "2026-08-03T19:28:08Z")

</div>

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)**

```auto
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:

```auto
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)**

```auto
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

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [August 5, 2026, 7:28pm UTC](https://community.auth0.com/t/toggleview-on-otp-enrollment-code-page/201424/7 "2026-08-05T19:28:33Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.