How can I sign-in through an email link/magic-url to open a pwa instead of the browser to authenticate a user in an iOS device?

Question

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. :(

Answer 1

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.