Different UI for MFA

[benny]

Hi, we want to activate MFA.
We want to works this way:

1. If user signed up with social login (Gmail) - don’t activate MFA.
2. Otherwise (username + password), on the first login (not on signup) if MFA is not enabled, enroll the user with MFA.
3. From the 2nd login, show MFA.

We build an onExecutePostLogin action.
The problem:
api.authentication.enrollWithAny and api.multifactor.enable('any', { allowRememberBrowser: true }) show different UIs:

enrollWithAny:

api.multifactor.enable:

We probably doing something in a wrong way.
This is our code:
exports.onExecutePostLogin = async (event, api) => {
    const isSocialLogin = event.connection.name !== 'Username-Password-Authentication';
    if (isSocialLogin) return;

    const authenticationMethods = event.authentication?.methods || [];
    const sessionAuthenticatedWithMFA = authenticationMethods.some((method) => method.name === 'mfa');
    if (sessionAuthenticatedWithMFA) return;

    const CHALLENGE_TYPES = [
      { type: 'phone' },
      { type: 'otp' },
      { type: 'push-notification' },
      { type: 'push' }
    ];

    const enrolledFactors = event.user.enrolledFactors?.filter((f) => f.type !== 'email')?.map((f) => ({ type: f.type })) || [];
    
    if (enrolledFactors.length === 0) {
        api.authentication.enrollWithAny(CHALLENGE_TYPES);
        return;
    }
    
    api.multifactor.enable('any', { allowRememberBrowser: true })
};

Questions:

1. Is there a better way to achieve it other than the code above? (we check manually different stuff that looks redundant).
2. Why the UIs are different?
3. How to know that the action run in signup context so we can continue without MFA?