15

I have a pwa app that is implementing one auth method only via sign-in with email link. (I'm using firebase's Passwordless authentication with email link strategy)

I can open the email with the link, however the link to authenticate the user will open the default browser (e.g. Safari) instead of the PWA that is installed in the home screen. Does anyone have any idea how to get around this? The user can't use the installed PWA if they can never be authenticated in it. :(

Jonathan002
  • 9,639
  • 8
  • 37
  • 58
  • Unfortunately, I'm pretty sure that it's not possible to do this on iOS with an installed PWA today. – PeteLe Feb 01 '21 at 18:13

2 Answers2

5

As noted by PeteLe, this is not currently possible out of the box. The user's email app opens URLs in the device's default browser and even if you modify the email template there's currently no way to target PWAs with custom handlers across iOS and Android, although there are proposals to make that possible. (There are Android Intent filters but they don't have consistent behavior and only work on Android.)

However anything's possible with enough duct tape, so here's one possible solution:

  1. Create a login page in your PWA with an email field and a submit button.

  2. When the user enters their email, a one-time password field appears with instructions to check their email.

  3. An asynchronous request to your backend API generates and stores a one-time password and then sends it to the user by email.

  4. The user switches to their email app, copies the password and then pastes it into the one-time password field.

  5. Pass the email and one-time password to your backend API to mint a custom token with Firebase admin that the user can authenticate with on the client side.

What's advantageous about this solution is it requires that the user return to the PWA to complete the authentication while maintaining the authentication-by-email flow.

I had a similar need to open a PWA programmatically and after weeks trying there's just no consistent way to open a PWA across all devices.

Brian Burton
  • 3,648
  • 16
  • 29
  • 1
    This is a neat idea. One way to potentially improve it would be to send an SMS one-time-code, Safari will auto-fill those from the SMS, though I haven't tried it in an installed PWA, worth trying though. See https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element for more details. – PeteLe Feb 23 '21 at 14:32
  • Another option is to instruct the user to complete the sign in operation normally by clicking the link in the email and then closing the browser window. Refresh (F5 in desktop or `window.location.reload()`) will update the authentication status in the PWA app too. Not pretty but works. I prefer this method rather than asking the user to copy a link ("password") from the email. – kine Aug 21 '22 at 14:47
  • @kine Sadly, I'm not seeing the Safari-PWA auth state sharing working as you describe, and https://stackoverflow.com/questions/62669966/how-to-maintain-login-status-in-a-pwa-initially-loaded-via-safari-14-ios-14 suggests that it's not possible. I'm logged in on the website but not the PWA. Tried killing the PWA a few times and reloading the webpage. This is why I'm looking for deep linking in the first place, but that's also impossible. – sudo Mar 20 '23 at 23:41
1

You may be able to register a protocol handler along with your PWA installation and it will handle a specific custom protocol (like: web+myapp://). So when the user clicks the link it's supposed to be open by your PWA.

As of November/22, it has full support on Chrome Android, according to developer.mozilla.org but not for Firefox neither Safari yet.

Ref.: https://developer.mozilla.org/en-US/docs/Web/Manifest/protocol_handlers#browser_compatibility

rodvlopes
  • 895
  • 1
  • 8
  • 18