[BUG] - Does not work on Safari MacOS and iOS

[kevmodrome]

Description

Running into issues where I can't use this on Safari. Both iOS and MacOS versions fail with different error messages.

On iOS I get a flash message when I go to the sign-in route that says "Passkeys not supported on this browser."

On MacOS I get errors in the console:

[debug] HANDLE EVENT "register" in MyPkAppWeb.AuthenticationLive
  Component: WebauthnComponents.RegistrationComponent
  Parameters: %{"value" => ""}
[debug] Replied in 542µs
[debug] HANDLE EVENT "error" in MyPkAppWeb.AuthenticationLive
  Component: WebauthnComponents.RegistrationComponent
  Parameters: %{"message" => "This request has been cancelled by the user.", "name" => "NotAllowedError", "stack" => ""}
[debug] Replied in 107µs
[warning] [unhandled_message: {MyPkAppWeb.AuthenticationLive, {:error, %{"message" => "This request has been cancelled by the user.", "name" => "NotAllowedError", "stack" => ""}}}]

To end on a positive note - both Firefox and Chrome on MacOS works as expected and across browsers! UX is 👌

Steps To Reproduce

Steps to reproduce the behavior:

1. Instantiate a new Phoenix project
2. Add deps
3. Install deps and run ecto.create
4. Run wac.install
5. Start server
6. Go to /sign-in
7. Enter an email
8. Click Sign Up button.

Expected behavior

I should be able to sign up and login like on Chrome and Firefox.

Desktop (please complete the following information)

• OS: iOS, MacOS
• Browser: Safari
• Version: 17.3.1

Smartphone (please complete the following information)

• Device: iPhone 15 Pro Max
• OS: iOS
• Browser: Safari
• Version: 17

AdditionalCcontext

Add any other context about the problem here.

Notify

• @type1fool
• @kevmodrome

[type1fool]

Thank you, @kevmodrome. I can confirm there's some issue with Safari on iOS, and I suspect it's the autofill feature that was recently added.

I will look into this and follow up when I have a moment.

[eadz]

That is what I see on MacOS / Safari.

it seems that webauthn can only be triggered by a "user action", so potentially the call to trigger the webauthn has to come from a click directly?

Note, I see the errors in the post above( not allowed error) in my JS console, directly after the above screenshot.

See this post, and the attached bug. https://forums.developer.apple.com/forums/thread/747036

[type1fool]

Interesting. It seems that Passkey autofill isn't currently supported in iOS, but that is likely to change. I'm investigating how to detect whether a user gesture is required.

[type1fool]

When I test this on MacOS Safari, I do get a Passkey prompt and I'm able to sign in without any errors. This is true in private mode, too.

In iOS, though, the autofill triggers an error. This web.dev article show an example of detecting conditional UI, which may resolve this error:

/ Availability of `window.PublicKeyCredential` means WebAuthn is usable.  
if (window.PublicKeyCredential &&  
    PublicKeyCredential.​​isConditionalMediationAvailable) {  
  // Check if conditional mediation is available.  
  const isCMA = await PublicKeyCredential.​​isConditionalMediationAvailable();  
  if (isCMA) {  
    // Call WebAuthn authentication  
  }  
} 

I have limited bandwidth to push a fix until this weekend. If a PR hasn't been opened already, I will plan on tackling this within the next week.

[kevmodrome]

This seems to work on Safari MacOS now.

[type1fool]

This seems to work on Safari MacOS now.

I have successfully authenticated on an iPhone using a Passkey in a test app.

@eadz Are you still seeing errors?

[kevmodrome]

I'm still seeing issues on iOS. Is there a new version I can try out on my end?

(Pretty unfamiliar with the whole Elixir ecosystem so unsure how I would clone this and just copy it into my project)

[type1fool]

I'm still seeing issues on iOS. Is there a new version I can try out on my end?

@kevmodrome The latest version is 0.7.0 from December 2023.

Could you use Safari Devtools to view errors in the console?

Update: I re-read the original post and removed some of my questions that were already answered above.

[kevmodrome]

Well, I can't even get to the sign in page since I'm getting kicked out of the page on iOS 😬

[type1fool]

Well, I can't even get to the sign in page since I'm getting kicked out of the page on iOS 😬

Are you still seeing this in the IEx shell when that happens?

[debug] HANDLE EVENT "error" in MyPkAppWeb.AuthenticationLive
  Component: WebauthnComponents.RegistrationComponent
  Parameters: %{"message" => "This request has been cancelled by the user.", "name" => "NotAllowedError", "stack" => ""}
[debug] Replied in 107µs
[warning] [unhandled_message: {MyPkAppWeb.AuthenticationLive, {:error, %{"message" => "This request has been cancelled by the user.", "name" => "NotAllowedError", "stack" => ""}}}]