Introduction

The User Profile MFA Menu in Joget provides an interface that allows authenticated users to manage their Multi-Factor Authentication (MFA) settings directly from the Userview. This menu is typically added as a UI menu after installing the User Profile MFA plugin.

Plugin Information

Plugins Available in the Bundle:

1. User Profile MFA Menu

This plugin bundle is compatible with Joget DX 7 and DX 8.

Expected Outcome

The user can see whether MFA is currently enabled or disabled for their account. If MFA is not yet configured, the menu provides a way for users to initiate setup. For example, using a QR code for an authenticator app like Google Authenticator or Microsoft Authenticator. If MFA is already enabled, the user may be allowed to disable it, depending on the admin policy.

Figure 1: Expected Outcome of the User Profile MFA Menu

Get started

Steps

1. You can obtain the jar file from the latest release at https://github.com/jogetoss/user-profile-mfa-menu/releases/tag/v7.0.0
2. Upload the plugin jar file in Joget by going to Settings > Manage Plugins.
3. You can choose to import the demo app or create the app from scratch.

Steps for importing the demo app

1. Download the demo app from (.jwa file).
2. Go to Joget Home or All Apps and click on Import App to import the downloaded demo app.

Steps for creating an app from scratch

1. As an administrator in Joget Settings > Directory Manager, choose the Directory Manager (e.g. SEDM) and select Time-based One-time Password (TOTP) Authenticator for the Multi Factor Authenticator property.
   
   Figure 2: Configuring Time-based One-Time Password (TOTP) Multi-Factor Authentication in Directory Manager Settings

2. Once the TOTP Authenticator has been enabled, users will be able to enable MFA individually in their custom user profile.

Activating Multi-Factor Authentication via Custom UI Menu

1. After installing the User Profile MFA Menu plugin (JAR), the menu becomes available in the UI Builder palette and can be dragged into the Userview for configuration.
   
   Figure 3: Configuring Custom User Profile MFA Menu in the UI menu
2. After launching the app, in the UI, click on the Activate button in the Time-based One-time Password (TOTP) Authenticator.
   
   Figure 4: Activating the MFA (TOTP)
3. A pop-up dialog will appear showing the secret key and a barcode.
   
   Figure 5: Enabling TOTP Authentication

User Profile MFA Menu Properties

Configure User Profile MFA Menu

Figure 6: User Profile MFA Properties

Performance & Offline 

Figure 7: User Profile MFA Properties - Performance & Offline Settings

PWA Offline Settings

Note: PWA Offline support is dependent on the theme used.

Read Progressive Web Application (PWA) for more information.

Enforce MFA for all users

You will need to customize this plugin to better suit your preferences.

If you want to enforce Multi-Factor Authentication (MFA) for all users, please use the following script.

Navigate to UI > Settings > Theme > Advanced > Custom JavaScript, add the following script to the UI settings as shown in the code block and screenshot below:

var currentUserUsername = "#currentUser.username#";

    $(document).ready(function () {
        if (
            currentUserUsername && 
            !currentUserTotpSecret && 
            !sessionStorage.getItem('mfaDialogShown')
           ) {
            var appId = 'customProfileMfa';  // you will need to change this
            var uiId = 'v';   // you will need to change this
            var menuId = 'user_profile_mfa'; // you will need to change this
            var dialog = new PopupDialog(`#request.baseURL#/web/userview/${appId}/${uiId}/_/${menuId}?embed=true`);
            dialog.show();

           
            sessionStorage.setItem('mfaDialogShown', 'true');

            
            setTimeout(function() {
                $("div.ui-widget-overlay.ui-front").attr("id", "specialTosOverlay");
                $("div#specialTosOverlay").off("click");
                $("button.ui-dialog-titlebar-close").attr("id", "specialTosClose");
                $("button#specialTosClose").remove();
            }, 500); 
        }
    });

Sample App

APP_kb_dx8_customProfileMfa.jwa

Related Documentation

• Multi-Factor Authentication using TOTP
• Security Enhanced Directory Manager