Add support for passkeys to Hypha

[frjo]

Fixes #4563

This implementation uses duo-labs/py_webauthn: Pythonic WebAuthn directly implementing its own Django wrapper. This is so passkeys are used as a stand alone login method and not as a 2FA option.

The interesting parts are in passkey_views.py and passkeys.js.

Test Steps

• Test that setting up and logging in with passkeys works on Mac, Windows, iPhone, Android and Linux.
• Using built in OS support, using usb keys etc.
• Test that ENFORCE_TWO_FACTOR are bypassed for passkey users. Passkeys are more secure than 2FA.
• Audit the implementation for any issues.

[wes-otf]

This is exciting! looking forward to reviewing it in the next day or two!

[wes-otf]

pushing this to test now - is it possible to test locally? getting domain errors trying it on my setup

[frjo]

Test build will likely fail due to migration conflict. Fixed it just now in this branch. More migration conflicts will come, the translation PR have a lot migrations e.g.

If we push this to test and then do not merge this in before translate PR we will have to reset the test db a bit.

[frjo]

is it possible to test locally?

Yes, if you set base_url to "localhost". Then it will not require TLS either.

IP 127.0.0.1, hypha.test etc. will not work due to how browsers handle this for security.

This should work:

python manage.py runserver_plus localhost:9001

[wes-otf]

left a super minor comment but otherwise this is totally ready to go!

[frjo]

@wes-otf Good change. Looking at it I came up with some more ways to polish it. The green check is there but when you start typing in the name field the check turns blu with a border so it looks like a button. Clicking it saves and makes it green without a border again.

[frjo]

Added some new stuff:

• The db field is varchar 255 but the length of the name was never checked before saving. Cap it at 128 now.
• When trying to add another key for the same device, catch the error so it looks nicer for the user.
• Make all user facing strings translatable. Keep missing this for new code.
• Get CSRFToken from hxHeaders instead of cookie parsing.
• Use transaction.atomic for passkeys loggin in the small chance someone tries to use the same key from two devices.
• Logging errors so admins can track issues.

[wes-otf]

@frjo I think I accidentally force pushed earlier when I intended to force push to the test branch - sorry about that!

The green check is there but when you start typing in the name field the check turns blu with a border so it looks like a button

it looks like the original issue is still there where you can still make the request (by clicking the button) even if the name hasn't been changed. I think it makes things a little less intuitive and could result in an unnecessary request but probably isn't big in the scheme of things.

Everything else looks good to me! Happy to get this merged whenever you feel it's good.

[frjo]

@wes-otf Easy to restore the branch so no worry. I think I managed to make the green check not behave like a button now. When you change the name the check turns blue and behave like a button.

[wes-otf]

Wondering if we should make this a little more similar to the "Login with password" button in both verbiage and icon.

Like choosing to user either "Sign in" vs "Log in" and the password button uses the heroicon_mini: {% heroicon_mini "key" size=18 class="opacity-80" aria_hidden=true %}

[wes-otf]

What do you think about these points @frjo?

[wes-otf]

button layout is nice!