search

MasterKale / SimpleWebAuthn

WebAuthn, Simplified. A collection of TypeScript-first libraries for simpler WebAuthn integration. Supports modern browsers, Node, Deno, and more.
https://simplewebauthn.dev
MIT License
1.62k stars 137 forks source link

Browser - StartRegistration - "Use Phone or tablet" QR code does not compete when phone/tablet is used to create passkey #392

Closed Simonl9l closed 1 year ago

Simonl9l commented 1 year ago

Describe the issue

I'm migrating to this package from hand cranked code on the browser side (based on this).

Before if I select (from my desktop/laptop) when I get the browser "Create a passkey" prompt and I select the Other Device -> Use Phone or Tablet, and use say my phone to scan the QR code, and complete the credential creation, the hand cranked navigator.credentials.create returns.

However the same process with the package after calling the startRegistration, whilst the "Create a passkey" prompt appears and I select the Other Device -> Use Phone or Tablet, etc. the call never return and times out.

Reproduction Steps

as above

Expected behavior

The startRegistration call should return with the newly created credential via phone/tablet.

Code Samples + WebAuthn Options and Responses

Options:

attestation: direct extensions: exts: true uvm: true

Dependencies

SimpleWebAuthn Libraries

npm list --depth=0 | grep @simplewebauthn ├── @simplewebauthn/browser@7.2.0 ├── @simplewebauthn/typescript-types@7.0.0

Additional context

I kinda new to all this and its is somewhat of a brain explosion, and trying to implement password-less auth.

WorldThirteen commented 1 year ago

@Simonl9l, do you also include the excludeAuthenticators option with already registered authenticators?

I've experienced the same behavior, even on setting up a passkey for my Personal Google account when I have already registered an iCloud-backed passkey and performed QR code flow using iPhone.

My guess is this might be a platform implementation issue, either iOS or browser. When cross-device authenticator registration via QR code happens, but excludeAuthenticators already contains the authenticator you trying to register, nothing happens instead of the expected InvalidStateError.

Simonl9l commented 1 year ago

@WorldThirteen if still getting to mental grips with all this! and your another docs help...

my understanding is that I'm not actually specifying platform or cross-platform leaving it up to what ever the browser supports per the Authenticator Attachment; but am asking for a Resident Key with User Verification Required!

I've also not found yet where the passkey credentials are stored as I don't seem to be able to find them in my key chain on MacOS.

what is you recommendation. I figured it was related to this library as calling navigator.credentials.create directly I don't get this issue...so I'm not suspecting its a "platform implementation issue, either iOS or browser", but more how I might be using it...

Any and all help appreciated!

Additionally when debugging my window switch to my back end debugger then this then seem to fail the with a ERROR_PASSTHROUGH_SEE_CAUSE_PROPERTY "The operation is not allowed at this time because the page does not have focus."

How do I avoid this?

MasterKale commented 1 year ago

My guess is this might be a platform implementation issue, either iOS or browser. When cross-device authenticator registration via QR code happens, but excludeAuthenticators already contains the authenticator you trying to register, nothing happens instead of the expected InvalidStateError.

I'm inclined to agree with @WorldThirteen here, if you're getting to the QR code to scan with your phone, but then nothing happens after scanning the QR code, that's definitely an issue between browser and mobile device. SimpleWebAuthn can't help at all with that...

Also yikes, the hybrid registration flow just stalls out if there's an excludeCredentials collision? Time to file a browser bug report if true...

I've also not found yet where the passkey credentials are stored as I don't seem to be able to find them in my key chain on MacOS.

@Simonl9l you can find passkeys in Safari! Go to Safari > Settings > Passwords, enter your system password, then start searching for the site you created a passkey for. When you select a passkey you should see something like this:

Screenshot 2023-06-09 at 3 57 28 PM

It's similar on iOS, but you go into the OS' settings > Passwords instead.

Additionally when debugging my window switch to my back end debugger then this then seem to fail the with a ERROR_PASSTHROUGH_SEE_CAUSE_PROPERTY "The operation is not allowed at this time because the page does not have focus."

If you're in Safari I've come to understand that it doesn't like doing anything WebAuthn if you leave the window at all, or try to manually invoke WebAuthn from the console. Without seeing more code, like a basic reproduction I can pull down and run myself, it's hard to say for certain what else might be going wrong.

Simonl9l commented 1 year ago

@MasterKale & @WorldThirteen thanks both for help!

Not sure what I was doing wrong before, as this now seems to behave correctly.

Also thanks for the pointers. Seems I have many "localhost" passkeys....

the ERROR_PASSTHROUGH_SEE_CAUSE_PROPERTY is also via Edge on MacOS. Would be be correct to assume that because I'm requesting User Presence Verification, might be triggering this behavior. I can work around this. It might be something to document more clearly along with the other errors that might need more explanation.

I not sure I have the where withal to reproduce as a minimal repo. So can close this issue at this time!

As an aside since it come up a lot in google searches, if might be valuable to add a response in to this blog post here - although 2 years stale at this point!