Managing MFA Enrollment for React and React-Native Apps

Knowledge Articles
, ,
1

Overview

When integrating Multi-Factor Authentication (MFA) enrollment with Auth0, there is an inconsistency between the React web app and React Native app flows. For the web app, the backend handles the redirection and authorization code grant type flow, enabling the backend to update business logic upon successful MFA enrollment. In contrast, the React Native app uses a custom scheme that redirects back to the mobile app, where MFA is assumed to be enabled. This results in a lack of synchronization with the backend, especially for actions like MFA unenrollment, which requires updating the Auth0 user profile.

Applies To

  • Multi-Factor Authentication (MFA)
  • MFA Enrollment
  • Native Apps
  • Non-Native Apps

Solution

To address the inconsistency and ensure both the web and mobile apps update the backend correctly after MFA enrollment, either one of the following approaches are recommended:

Option 1: Redirecting to Backend from Mobile Flow

  • The mobile app initiates MFA enrollment, passing a special parameter to indicate it originated from the mobile app.
  • The backend redirects to Auth0, with the redirect_uri pointing back to the backend.
  • Auth0 redirects back to the backend with the authorization code. The backend exchanges the code for tokens and updates business logic as needed.
  • The backend redirects to a specific deep link URL in the mobile app with the necessary parameters (e.g., success state, tokens).

Option 2: Using Custom Scheme and Informing Backend

  • Using a custom scheme for handling the redirect from Auth0 in the React Native app.
  • The mobile app verifies that MFA is enabled by receiving the idToken.
  • The mobile app calls a specific API endpoint on the backend to update business logic and handle MFA unenrollment when needed.

Optional

Use Auth0 actions to perform some backend logic automatically after MFA enrollment, reducing the need for a separate API call.

Using the custom scheme for handling the redirect from Auth0 in the React Native app(option 2) seems simpler to implement and more efficient due to the following reasons:

  • Direct User Feedback: The mobile app can immediately update the user interface based on the authentication state.
  • Reduced Latency: Fewer redirects result in faster completion of the flow.
  • Flexibility: The mobile app has more control over the flow, making it easier to handle edge cases or errors directly.