Alternative sign-in flow for the PWA app on iOS

[jonkri]

Is your feature request related to a problem? Please describe.

FixMyStreet uses email links to automatically sign in users when creating an account, when resetting passwords and when logging in without a password.

The problem with email links on iOS is that they are opening a browser tab and not the PWABuilder app. Also, logging in via Safari didn't cause the PWABuilder app to be logged in for me. As far as I can tell, the only way for a user to sign in to the PWABuilder app on iOS is using the user name and password. This is a problem with regular PWA apps (that is non-PWABuilder apps) on iOS as well, since “Add to Home Screen” PWA apps doesn't seem to share cookies with the regular Safari either.

Things seem to be OK on the Android side though. Logging in via Chrome seems to cause the PWABuilder to be logged in. Android also seems to open links in the PWABuilder app.

Describe the solution you'd like

One-time codes sent via email could be a simple way for us to get started. A more sophisticated solution that will work for some but not all users could perhaps be passkeys.

Here's a quote from the Apple Developer WWDC23: What’s new in web apps YouTube video:

Some websites use email links to automatically sign in users by opening the link. Since links from email will open in the default browser, this will not automatically sign in users in to the web app that they already have. You may want to provide an alternative one-time code in the email that your user can easily enter into the sign-in flow on your site. For a more convenient and more secure authentication experience, consider adopting passkeys for authentication on your site.

Describe alternatives you've considered

Not applicable.

Additional context

Not applicable.

[davea]

(Just to answer the bit about opening links in the PWABuilder app):

Have you configured the ios_site_association cobrand feature and app entitlements? There is a bit of setup required to inform iOS about which installed apps can open which website links.

Add something like this to general.yml:

COBRAND_FEATURES:
  ios_site_association:
    fixamingata:
      appID: XYZXYZ.se.fixamingata # (or whatever your application identifier is)

then https://fixamingata.se/.well-known/apple-app-site-association will hopefully return a blob of JSON (this is what it looks like on fixmystreet.com) via this code.

You'll also need to add some configuration to your app's Entitlements.plist - this is what it looks like for FMS:

Sadly that does mean another app store submission if it's not already present.

[jonkri]

Hi, @davea!

Thanks for that! 😊

I've made some progress but I'm not entirely there yet.

First of all, I configured ios_site_association:

https://fixamingata.se/.well-known/apple-app-site-association

I also confirmed that Entitlesments.plist contained applinks:fixamingata.se and webcredentials:fixamingata.se:

After having made the ios_site_association change, I noticed that the non-PWABuilder “Add to Home Screen” app now can access the Safari credentials. So if I'm logged in to fixamingata.se in Safari and then add the app to the home screen, then the home screen app is also logged in. Great!

Unfortunately however, https://fixamingata.se links are not opened in the PWABuilder app.

I restarted the emulator via Device > Erase All Content and Settings and installed the app in the emulator using Run in Xcode.

When clicking on https://fixamingata.se (arbitrarily using the Reminder app) it opened the link in Safari. I would have expected the app to open.