OIDC and PWA (add to home screen)

Update: Basically the same issue as Standalone PWA breaks login but on iOS.

If you add a web app to the home screen, Chrome on android shares the local storage with the same domain in the browser. You can test this by going to https://wilfrem.github.io/add_to_homescreen_test/ then adding to home screen and see you have the same id when opened from home screen. (I did Nexus 5x)

If you do the same in iOS Safari you get a new id. (i did iPod iOS 12.1.1)

The oidc-client-js library sets a session reference in local storage and then recalls that on the web app s signin callback. So if you try to log in from a web app opened from the home screen on iOS, it opens the OP (oidc provider) in Safari, then redirects back the web app's url, but in Safari not the opened from home screen web app, so because of the different local storage you get:

No matching state found in storage

How are you supposed to use oidc with an iOS opened from home screen web app if the local storage isn't shared across the same domain? Or how do I get iOS to reopen the correct window(the one opened from home screen) when redirecting back to the web app? Or how to I get iOS to never leave the fullscreen app when navigating to the OP (oidc provider) in the first place?

edit:

Here is a narrative to explain the issue.

open my.app.com
add to home screen
open app from home screen
click login button
login button calls UserManager.signinRedirect()
UserManager.signinRedirect() calls OidcClient.createSigninRequest()
OidcClient.createSigninRequest() stores signin state in localstorage and navigates to my.op.com see on android my.op.com opens a Chrome tab and on iOS my.op.com opens Safari
complete signin process on op
op redirects to my.app.com/signin-callback.html here is the problem

On android my.app.com/signin-callback.html opens in the app opened from the home screen, on iOS it stays in Safari. So you get:

No matching state found in storage

I'm not having difficulty with the error, based on what is happening the error is completely expected, I just don't know how to get Safari to behave in a way that will work with the library.

If its relevant this is my manifest.json

{
  "name": "omitted",
  "short_name": "omitted",
  "theme_color": "#omitted",
  "background_color": "#omitted",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "omitted",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "omitted",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

add also removed scope but didn't have any change, in behavior.

update: also tried setting start to full domain, not just relative /, still no change.

Recommended topics

Hot tags