How to maintain login status in a PWA initially loaded via Safari 14/iOS 14?

Question

Our requirement is to have our users login to an app via a URL and, having added the app to their homescreen as a PWA, maintain that logged-in status, so that a second l

Answer 1

Generating Webapp manifest and changing start_url has it's own consequences.

For example Sometimes the data we want to pass is not available right away and also if data is passed in url we should make sure that passed login data are invalidated after first Webapp opening because otherwise sharing bookmark would also share login credentials of the user. By doing so you lose the power of start_url which means if users add your website when it's in subdirectory1 it would always open in subdirectory1 after that.

What's the alternative ?

Since ios 14, safari shares cacheStorage with Webapps. so the developer can save credentials as cache in the cacheStorage and access them inside the Webapp.

Code compatibility

About ios14 availability we should consider that before ios 14 more than 90% of users had updated to ios 13 and the fact that ios 14 is supported by all devices that support ios 13, we can assume that ios 14 usage would soon reach 90%+ and the other ~5% can alway login again inside Webapp. it has already reached 28% in 12 days based on statcounter

Code example

Here is the code i use in my Webapp and it works successfully with ios add to home screen.

    ///change example.com with your own domain or relative path.
    function createCookie(name, value, days) {
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
        var expires = "; expires=" + date.toGMTString();
      } else var expires = "";
      document.cookie =
        name + "=" + value + expires + "; path=/; domain=.example.com";
    }
    
    function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == " ") c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      return undefined;
    }
    
    
    async function setAuthFromCookie() {
      caches.open("auth").then(function (cache) {
        console.log("Set Cookie");
        return cache.add(["https://example.com/cacheAuth.php"]);
      });
    }
    async function setAuthToCookie() {
      var uid = readCookie("uid");
      var authKey = readCookie("authKey");
      caches.open("auth").then((cache) => {
        cache
          .match("https://example.com/cacheAuth.php", {
            ignoreSearch: true,
          })
          .then((response) => response.json())
          .then((body) => {
            if (body.uid && uid == "undefined") {
              /// and if cookie is empty
              console.log(body.authKey);
              createCookie("authKey", body.authKey, 3000);
            }
          })
          .catch((err) => {
            console.log("Not cached yet");
          });
      });
    }

    setTimeout(() => {
      setAuthFromCookie();
      //this is for setting cookie from server
    }, 1000);

    setAuthToCookie();

Answer 2

It can be done. Here's how we've succeeded in doing it:

1. When the user initially logs in to the app in the browser, we generate a UID on the server.
2. We pair this UID with the username in a server file (access.data).
3. We generate the web app manifest dynamically. In it we set the start_url to the index page and append a query string incorporating the UID e.g. "start_url": "/<appname>/index.html?accessID=<UID>".
4. We create a cookie to verify that the app has been accessed e.g. access=granted.
5. When the user accesses the app as an iOS PWA, the app looks for this cookie and doesn't find it (cunning ;) - we use one of the iOS deficiencies (not sharing cookies between Safari and the PWA) to defeat that same deficiency).
6. The absence of the access cookie tells the app to extract the UID from the query string.
7. It sends the UID back to the server, which looks for a match in access.data.
8. If the server finds a match, it tells the app that the PWA user is already logged in and there's no need to again display the login screen. Mission accomplished!

Note: Android/Chrome simply ignores the accessID in the query string - I was wrong in my question to imply that Android/Chrome requires an unmodified start_url.