Redirecting inactive users to logout

One important feature to ensure the security and integrity of your application is automatic user logout for inactive users. This functionality can help protect user sessions from being left open indefinitely, which could pose a security risk. In Power Pages (formerly PowerApps Portals), handling session timeout and redirecting inactive users to logout requires a combination of JavaScript for client-side handling and Power Pages settings to manage session duration.

Here’s a step-by-step guide to implement redirecting inactive users to logout in Power Pages:

---

Step 1: Understand the Session Timeout Settings

In Power Pages, session timeout refers to the duration for which a user session remains active before being automatically logged out due to inactivity. You can configure this duration via the Portal Management settings.

To set up session timeout:

1. Go to Portal Management in your Power Pages environment.
2. Under Portal Settings, locate the session timeout options.
3. Set the session timeout based on your requirements (e.g., 15 minutes, 30 minutes, etc.).

However, this timeout is a general setting that applies to all users, and it automatically logs users out after a period of inactivity. If you want to take additional actions, like showing a warning before logout or redirecting users manually, you need to handle that via JavaScript.

---

Step 2: Using JavaScript to Detect User Inactivity

To detect inactivity, you can write custom JavaScript that listens for user interactions such as mouse movement, key presses, or clicks. If no interaction is detected for a predefined period, you can automatically log the user out or redirect them to a logout page.

Example: JavaScript for Inactivity Detection

let inactivityTime = 600000; // 10 minutes in milliseconds
let inactivityTimer;

// Function to reset the inactivity timer on user action
function resetInactivityTimer() {
    clearTimeout(inactivityTimer);
    inactivityTimer = setTimeout(logoutUser, inactivityTime); // Set timeout to log out
}

// Function to log out the user
function logoutUser() {
    window.location.href = '/_services/logout'; // Redirect to the logout URL
}

// Listen for user interactions to reset the timer
window.onload = function() {
    // Detect user activity (mousemove, keydown, click)
    document.onmousemove = resetInactivityTimer;
    document.onkeydown = resetInactivityTimer;
    document.onclick = resetInactivityTimer;

    // Set the initial inactivity timer
    inactivityTimer = setTimeout(logoutUser, inactivityTime);
};

Explanation:

• inactivityTime: Defines the period of inactivity before the user is logged out (in milliseconds). Here, it’s set to 10 minutes (600,000 milliseconds).
• resetInactivityTimer(): Resets the inactivity timer whenever there is user interaction (mouse movement, key press, or click).
• logoutUser(): Redirects the user to a logout URL (/services/logout) or any URL you configure for logging out.
• Event Listeners: The script listens for mousemove, keydown, and click events. Whenever one of these events is triggered, the inactivity timer is reset.

---

Step 3: Handling Redirection and Logout in Power Pages

When a user reaches the inactivity timeout, the logoutUser() function will be triggered, logging the user out by redirecting them to the logout URL. In Power Pages, the default logout URL is usually:

/_account/logout

If you have a custom logout page or URL, you can update the window.location.href in the JavaScript function to match that URL.

Example:

function logoutUser() {
    window.location.href = '/_services/logout'; // Custom logout URL
}

Alternatively, if your portal uses an authentication provider, such as Azure AD or Identity Server, ensure that the user is logged out from both the portal session and the authentication provider.

---

Step 4: Customizing the Logout Experience (Optional)

If you’d like to show a warning before logging out, you can introduce a warning message or modal before the final redirection. This way, users can be informed of their inactivity and given a chance to interact before being logged out.

Example: Show Warning Before Logout

let warningTime = 60000; // 1 minute before logout
let warningTimer;

function resetInactivityTimer() {
    clearTimeout(inactivityTimer);
    clearTimeout(warningTimer);
    warningTimer = setTimeout(showWarning, inactivityTime - warningTime); // Show warning before logout
    inactivityTimer = setTimeout(logoutUser, inactivityTime); // Log out after inactivity
}

function showWarning() {
    alert("You have been inactive for a while. You will be logged out soon.");
}

function logoutUser() {
    alert("You have been logged out due to inactivity.");
    window.location.href = '/_services/logout'; // Redirect to logout
}

Explanation:

• warningTime: This defines the time (1 minute) before logout when a warning will be shown to the user.
• showWarning(): Displays an alert to the user that they will be logged out soon due to inactivity.
• inactivityTimer and warningTimer: warningTimer is set to display the warning before the actual timeout and logout.

---

Step 5: Handling Session Expiry in Power Pages

In addition to using JavaScript to manage inactivity timeouts, you may also want to handle the session expiry at the server level. This can be done using Power Automate or Azure Functions to track user activity and trigger actions based on specific conditions.

1. Azure Active Directory (AAD) Sessions: If your Power Pages are integrated with Azure AD for authentication, you can configure Azure AD session policies to enforce automatic sign-out after a period of inactivity.
2. Power Automate Flows: You can create a flow to monitor user sessions and trigger an action, such as sending a notification or logging out users after a certain period.

---

Step 6: Test and Deploy

Before deploying the inactivity logout feature to your users:

1. Test the functionality: Ensure that the inactivity timeout is working correctly. Check for edge cases, such as users interacting with the page at the last second or browsers that do not support certain events.
2. Cross-browser testing: Ensure that the script works across different browsers (Chrome, Edge, Firefox, etc.).
3. Monitor session timeout settings: Ensure the session timeout set in Portal Management aligns with your JavaScript logic.