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

NameDescription
LabelMenu label. Mandatory field.
Menu ID

Item link slug. Optional field.

Value defined here must be unique to the rest of the UI Menus as the first matching name will be called upon.

Show in popup dialog?If checked, user will be presented in a popup dialog.
Message after savedMessage to show to the user after submission.
URL to redirect after savedURL to redirect after saved.

Performance & Offline 


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

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


Read more at Performance Improvement with UI Caching.

PWA Offline Settings

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

NameDescription
Enable cache for offline supportCheck this to enable caching for offline support, usually set for use on mobile browsers.


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

Related Documentation