User Profile MFA Menu

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.

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 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.
   

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.
   
2. After launching the app, in the UI, click on the Activate button in the Time-based One-time Password (TOTP) Authenticator.
   
3. A pop-up dialog will appear showing the secret key and a barcode.
   

User Profile MFA Menu Properties

Configure User Profile MFA Menu

Fields to configure:

• Label: Menu label. Mandatory field.
• Menu ID: Item link slug. Optional field.

• Show in popup dialog?: If checked, the user will be presented with a pop-up dialog.
• Message after saved: Message to show to the user after submission.
• URL to redirect after saved: URL to redirect after saved.

Performance & Offline 

Field to configure:

• Scope:
  Caching options are:

  • None: No caching.
  • Application: Cache content by application, where all users will see the same content.
  • User: Cache by username.

• Duration (s):
  Duration in seconds to cache content. Defaults to 20 seconds if applicable.

PWA Offline Settings

Fields to configure:

• Enable cache for offline support: Check this to enable caching for offline support, usually set for use on mobile browsers.  

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:

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.

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

Related Documentation

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