Starts in:
0 DAY
10 HRS
51 MIN
24 SEC
Starts in:
0 D
10 H
51 M
24 S
Open Closed

Best practice for offline authentication with angular service worker #1434


User avatar
0
zetic_alexandre created

ABP Framework version: v4.3.2 UI type: Angular DB provider: EF Core Multitenancy: yes Tiered (MVC) or Identity Server Separated (Angular): no

Hi,

I am using the Angular application model to build an app with offline capabilities. The app itself doesn't have a lot of features but is the main concern of our client, and offline mode is crucial for the current and upcoming features.

I followed https://docs.abp.io/en/abp/latest/UI/Angular/PWA-Configuration to turn the template into a pwa ready application. It works fine. It's downloadable, the service worker works properly and load time is significantly faster. The issue comes when simulating offline mode in the browser. The app doesn't load (infinite loading screen) anymore because calls to the back end (api endpoints and IdentityServer endpoints) can't be made.

I read some articles / documentation / topics ..., but couldn't find a clear way to handle offline authentication (I saw documentation about dataGroups tho). So I tried a few things to cache those api calls and ended up with the following

in generated ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js",
          "/common-es2015.*.js",
          "/main-es2015.*.js",
          "/polyfills-es2015.*.js",
          "/runtime-es2015.*.js",
          "/vendor-es2015.*.js"
        ]
      }
    },
    {
      "name": "modules",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/*-es2015.*.js"
          //------------- had to remove the exclude ones to make it work ---------------
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)",
          "/*.*.woff"
        ]
      }
    }
  ],
  //----------------- HERE IS THE RELEVANT PART -------------------------
  "dataGroups": [
    {
      "name": "api",
      "urls": [
        "https://localhost:44313/.well-known/**",
        "https://localhost:44313/api/abp/**",
        "https://localhost:44313/connect/**"
      ],
      "cacheConfig": {
        "maxAge": "7d",
        "maxSize": 3,
        "strategy": "freshness"
      }
    }
  ]
//-----------------------------------------------------
}

Adding this lines with freshness strategy allows the abp to be used (performance strategy made the authentication process not working when back to online). Of course, i can't make any other api calls since i'm offline, but what i can do:

  • Obiously, I can reload the app
  • I can navigate to every pages
  • When back online, I'm authenticated (without needing to log in again) and the app is back to normal behaviour (all api calls work)

While it's working, I'm concerned about security as I came up with this myself and can't use it in production before knowing if this solution or something similar is ok, or if there is a proper way to handle this scenario.

Thank you for your help


4 Answer(s)
  • User Avatar
    0
    alper created
    Support Team Director

    I still couldn't understand what do you mean by offline authentication?

  • User Avatar
    0
    zetic_alexandre created

    Yes, i'm sorry, the title is misleading.

    It is more about keeping information about the current user, so he can use the application with the same behaviour as if he was online (so he's not blocked by required permissions when navigating throught the app). I

    When I reload the app in the browser, it sends requests to the server to fetch openid-configuration and application-configuration, and call the jwks endpoint of the identity server (I didn't change that default behavior).

    With what i added, the application caches these information and run offline as intended (the roles/permissions of the user are correct, i can reload the app without back-end calls and navigation doesn't cause any troubles). When back online, it sends new requests to the server to fetch fresh openid-configuration, etc. So far so good.

    So basically, the app works offline. But my concern is about the way the user info are stored locally. For what I could observe, the configurations from the server and tokens are cached on first call and retrieved from the cache when i'm offline.

    Since the method I use works, my question is: Is it okay to store those information the way I did or does it expose the application to security issues (and if it does, are there any better solutions) ?

    I hope it is clearer

    Thank you

  • User Avatar
    0
    alper created
    Support Team Director

    You can cache tokens since the browser also stores it until the expire date. I'm not sure if that causes a security leak. this is more a security concern which is out of my domain.

  • User Avatar
    0
    ServiceBot created
    Support Team Automatic process manager

    This question has been automatically marked as stale because it has not had recent activity.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 20, 2024, 13:06