search

magiclabs / magic-js

Magic browser/React Native JavaScript SDK is your entry-point to integrating passwordless authentication inside your application.
https://magic.link/docs/api-reference/client-side-sdks/web
Apache License 2.0
455 stars 85 forks source link

Device Registration 'Approve' Button does not work on And #738

Open brien-crean opened 4 months ago

brien-crean commented 4 months ago

✅ Prerequisites

🐛 Description

This issue relates to new device registration: https://magic.link/docs/authentication/security/device-registration

When a user attempts to approve a login from a new device they receive an email from https://auth.magic.link/v1/new-device-verification asking for approval. However the 'Approve' button does nothing when clicked on a mobile device. It does not matter if they open the link in Chrome for mobile or in an email clients built in browser. The result is the same. As a consequence user's must approve the new device login on a Computer.

🧩 Steps to Reproduce

  1. Login with loginWithEmailOTP({ email: options.email }) with email as the only option
  2. Wait for an email with subject Approve <App Name> login?, open the link either in Chrome for Android or Gmail for Android.
  3. Click the Approve button

🤔 Expected behavior

Once the Approve button is clicked the device should be approved and web client redirected to a page to advise the User to check their email for a login code.

😮 Actual behavior

Nothing happens, the user is stuck on the approve/reject link they opened from the email

💻 Code Sample

n/a

Screen recording

https://github.com/magiclabs/magic-js/assets/11700939/d1602bfb-946c-4d8a-9b58-73298fbf9f40

🌎 Environment

Software Version(s)
@magic-sdk/react-native-bare 29.0.2
Browser Chrome for Android and Gmail inbuilt Web browser
yarn >=1.22.0
Operating System Android / React Native app
am-hernandez commented 4 months ago

Hi @brien-crean ,

Thank you for posting this issue. I am attempting to reproduce this issue but I am not able to do so with my Android phone. When I receive the Device Registration email I can click on the Approve button and it works successfully. I then complete the login flow. I also use the Gmail mobile application to view the email and click the link.

Would you tell us more about your device OS and version? Would you also share the publishable API key for the app? This will help locate relevant logs for your application.

Thank you!

brien-crean commented 4 months ago

Thank you for your quick reply @am-hernandez! I just tested this a bit more with a couple of devices and it does seem like it is device / platform software specific.

Samsung Galaxy A52 running Android 13 - The approve button works as expected.

Pixel 7a running Android 14 - Approve button does not work. However...

am-hernandez commented 4 months ago

@brien-crean I use a Pixel 7 Pro on Android 14 and I am not seeing this issue. I don't make any changes to Chrome, just clicking the Approve button works as expected. It seems this issue is local to your particular device.

rowbot-weisguy commented 4 months ago

Hey @am-hernandez, cross-client email delivery is notoriously tricky.

Have you guys tried using a service like https://www.litmus.com/ or equivalent to do a spread across many devices & email clients? It might be worth it because we're not willing to chance it with our userbase.

am-hernandez commented 4 months ago

Hi @rowbot-weisguy , would you please share the device(s) and OS version on which you are experiencing this issue?