Clear frontend browser cache when a user logs out

[jaeyun0503]

Summary

We need to fix two issues both related to logout process.
1- When a user logs out, they should not be able to access anything from the system anymore, but our current design does not enforce this. We need to implement a security mechanism to make sure that the frontend logout user upon receiving a request with status 401.
2- When the front-end is built, name of Javascript files change, if browser has cached these files, it shows a blank screen since it does not match with the newly compiled Javascript files.

Context

During the DS4ALL camp in Summer 2025, one student experienced a bug where she could still access the data and workflows but couldn't make edits to them. After checking we found that the student was logged out of the system and that caused her unable to edit the workflows. Ideally when she was logged out, she should not be able to access any data from the system. But because of the unexpected behavior, the student got confused and had to ask for help.

We want to add a security mechanism to make sure that when a user is logged out, they should not be able to access any data or workflows from Texera system -- the stored data on the browser should be wiped out right away when a user logs out. This avoids unauthorized access to users' data and also unresolved Javascript files.

Proposed Idea

We want to add a feature to ensure that when a user is logged out, the frontend cache is cleared from the browser. Further discussion is needed to decide how to implement this feature. The first order solution is to implement a push based mechanism that backend can notify front end that user is logged out.

Update Sep 30 2025

We concluded that we can use middleware mechanism (called interceptor in Angular) to always check the status of the receiving request and if it is 401, then interceptor reject and logout the user before the request reach to the other functions.

[Sentiaus]

@jaeyun0503 Would like to take this on, but wanted to know if the issue regarding user token expiring not visibly signing out the user has been addressed.

[jaeyun0503]

@jaeyun0503 Would like to take this on, but wanted to know if the issue regarding user token expiring not visibly signing out the user has been addressed.

Yes. We are now working on handling 401 requests to forcefully refresh browser's cache, which is somehow related to this issue. I am currently working on this and you can take a look at other issues. Thank you for your help!

[jaeyun0503]

@jaeyun0503 Would like to take this on, but wanted to know if the issue regarding user token expiring not visibly signing out the user has been addressed.

@Sentiaus I will raise another issue that is related to this issue, and once I raise the issue we can have some discussions on it regarding the design. We want to implement a new security feature that when frontend talks to backend, use the token expiration date and set a timer to later clear up the cache when the timer expires (push-based). I will ping you once I raise the issue.

[jaeyun0503]

@Sentiaus @chenlica We had an internal discussion today on this issue and we wanted to discuss two things: clearing/reloading cache on logouts and handling 401 requests.

The design that we chose to do is using the Angular Interceptor to solve these issues. For next steps we are going to investigate the behaviors of requests' authorization headers and caches. We want to make sure that the design is clear before the actual development.

Questions to answer:

1. Do all pages have at least one request which requires an Authorization header?
2. Does window.location.reload(true) fully reset cache? If not, how should we do it?

We are investigating on these two questions and once we have answers to these questions, we would be able to move on to the next step.

[chenlica]

Please do the investigation. We can meet when you have a design and update the issue here.

[aicam]

Updates on Oct 14

How to reset cache

Backend can send Clear-Site-Data: "cache", "cookies", which we are going to use when redeploying the server.

Blank page issue

Browser cache some JS files which are now removed because of redeployment. So we need Etag.

Designs

1- Everytime, application is redeployed, backend or frontend should return Clear-Site-Data on 404
2- We use Etag for JS files