Skip to content

Session Dialog Fix - Implementation#188

Merged
tarekio merged 3 commits intomainfrom
session-polling-simple
Sep 13, 2025
Merged

Session Dialog Fix - Implementation#188
tarekio merged 3 commits intomainfrom
session-polling-simple

Conversation

@level09
Copy link
Collaborator

@level09 level09 commented Sep 12, 2025

Problem

When a user's session expires and they get a "Session Expired" dialog, if they log back in from another tab, the dialog gets stuck and can't be dismissed.

Solution

Check if session is restored when user focuses back on the tab with the stuck dialog.

Backend (Already Done) ✅

New endpoint available:

GET /admin/api/session-check
- 200: Session valid
- 401: Session expired

Frontend Implementation

File to modify: /enferno/static/js/mixins/reauth-mixin.js

Step 1: Add session check method

methods: {
  // ... existing methods
  
  onFocusProbe: async function() {
    // Only check if dialog is visible
    if (!(this.isSignInDialogVisible || this.isReauthDialogVisible)) return;
    
    try {
      await axios.get('/admin/api/session-check', { suppressGlobalErrorHandler: true });
      this.resetState(); // Session restored - close dialog
    } catch (error) {
      // Still expired - keep dialog open
    }
  }
}

Step 2: Start listening when dialog shows

showLoginDialog(event) {
  if (this.isReauthRequired(event?.detail)) {
    this.isReauthDialogVisible = true;
  } else {
    this.isSignInDialogVisible = true;
  }
  
  // Start listening for tab focus
  window.addEventListener('focus', this.onFocusProbe);
}

Step 3: Stop listening when dialog closes

resetState() {
  // Stop listening when dialog closes
  window.removeEventListener('focus', this.onFocusProbe);
  
  // ... existing reset logic
  this.signInForm = {
    username: window.__username__ || null,
    password: null,
    csrf_token: null
  };
  this.isSignInDialogLoading = false;
  this.isSignInDialogVisible = false;
  this.isReauthDialogVisible = false;
  this.signInErrorMessage = null;
  this.twoFaSelectForm = null;
  this.verificationCode = null;
  this.signInStep = 'sign-in';
}

How It Works

  1. Dialog appears when session expires
  2. User logs in from another tab
  3. User switches back to original tab (triggers focus event)
  4. Code checks /admin/api/session-check
  5. If session valid → dialog closes automatically
  6. User continues their work

Testing

  1. Single tab: Session expires → log in same tab → works as normal
  2. Multi-tab: Tab A expires → Tab B log in → Switch to Tab A → dialog closes
  3. Edge case: Close dialog manually → stops listening correctly

That's it! Simple focus-based solution that preserves user work and requires minimal code changes.

Introduces a lightweight API endpoint to verify if the current session is still valid. This endpoint is utilized by the frontend to detect session restoration after expiration, returning a 200 status for valid sessions and a 401 status for expired sessions.
@coderabbitai
Copy link

coderabbitai bot commented Sep 12, 2025

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch session-polling-simple

Comment @coderabbitai help to get the list of available commands and usage tips.

Can’t close/remove Session Expired window when logging in from another
window
The user need to log off from another window to be able to log in and
bypass this window.
@tarekio tarekio merged commit 2631e89 into main Sep 13, 2025
8 checks passed
@tarekio tarekio deleted the session-polling-simple branch September 13, 2025 15:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants