PWA Offline auth

Question

What is the best way to keep a user authenticated in a PWA when an app is revisited when offline.

Example..

1. User visits web app with an internet connection.
2. User Logs in and downloads all the needed data (indexeddb).
3. The user closes the page.
4. User comes back to the page (No internet).
5. User is already logged in..

5 is the part I need advise on, the log needs to be secure so tokens in cookies/localstorage won't be good enough.

Any advice please?

Answer 1

If you want to allow your app to remember a user and automatically you'll need to store the token somewhere. Storing it in localstorage should be fine.

Angular stores external requests if you set up dataGroups in the ng se-configuration. This is cached based on the URI. You have two options that I can see right now:

Option 1: Return the users ID in every API response and if you're using jwt tokens then store the users ID in the token body. When you receive an API request in Angular filter based on that ID. When you have network connectivity this will not do anything since you only have what the user can see anyways. But when you're offline you can't guarantee the cached data is from the current user. If user A logs in and fetches data, the user B logs in but doesn't fetch that data, then the cached response contains data for User A not B and B should not see it. The issue with this option is that User A's responses are still stored in cache so if user B were to look in the service worker cache then they would see it.

Option 2: Manually invalidate the data that service workers store for external api requests on login or logout. This will guarantees you that the data cached belongs to the current user. The pros here over option 1 is that you don't need to store and check the user's ID in the response since you know it has to be the user's. Also you don't have to worry about another user looking at the service worker cache and seeing someone else's responses since those will have been credited when the first user logged out or the second one logged in. The con here is that you manually have to invalidate the service worker cache since Angular doesn't have a mechanism in place to take of this for you.

Option 3: Add user ID to the URI. Since Angular stores the data with the URI as key then if you add the users ID to the URI it will stores that user (and other users) api responses. This might sound ideal but this means that any user can go to the service worker cache and see the api responses cached for every single user that logged in to the app in this Workstation. Also your API request URI should not be taking a user ID as part of it;that should come from a token body or a query. You should avoid this option at all costs!

I would suggest 1 or 2 depending on whether you are willing to try to invalidate a service worker cache.