Brave-ios: UI for WebAuthn

Created on 7 Aug 2019  路  8Comments  路  Source: brave/brave-ios

Touch Key - This dialog will be displayed when the user should interact with the key.

On Brave Desktop the dialog looks like:

Screen Shot 2019-08-06 at 2 57 29 PM

Allow site to read key data - This dialog will be displayed when the site is requesting access to the security key data.

On Brave Desktop it looks like:

Screen Shot 2019-08-06 at 2 58 28 PM

PIN Required - This dialog will be displayed when the YubiKey is protected by a PIN

On Brave Desktop it looks like:

Screen Shot 2019-08-06 at 3 00 33 PM

QA Pass - iPad QA Pass - iPhone X QYes enhancement release-noteexclude

Most helpful comment

iOS Designs

User flow:
user flow - log in with yubikey ios

Designs:
1 insert key
2 pin required
3 verifying key
4 touch key

Assets

Insert key:
(animation preview) https://lottiefiles.com/share/zL8bnh
https://assets1.lottiefiles.com/packages/lf20_zL8bnh.json
insertkey.json.zip

Enter PIN:
enter pin.zip

Verifying key:
(animation preview) https://lottiefiles.com/share/PsnbwB
https://assets5.lottiefiles.com/packages/lf20_PsnbwB.json
authenticating.json.zip

Touch the key:
(animation preview) https://lottiefiles.com/share/c2gtfd
https://assets5.lottiefiles.com/packages/lf20_c2gtfd.json
touchthekey.json.zip

Lottie player:
lottie player.zip

All 8 comments

iOS Designs

User flow:
user flow - log in with yubikey ios

Designs:
1 insert key
2 pin required
3 verifying key
4 touch key

Assets

Insert key:
(animation preview) https://lottiefiles.com/share/zL8bnh
https://assets1.lottiefiles.com/packages/lf20_zL8bnh.json
insertkey.json.zip

Enter PIN:
enter pin.zip

Verifying key:
(animation preview) https://lottiefiles.com/share/PsnbwB
https://assets5.lottiefiles.com/packages/lf20_PsnbwB.json
authenticating.json.zip

Touch the key:
(animation preview) https://lottiefiles.com/share/c2gtfd
https://assets5.lottiefiles.com/packages/lf20_c2gtfd.json
touchthekey.json.zip

Lottie player:
lottie player.zip

@EyanGoldman @anthonypkeane because this includes a lot of new UI/UX components, can someone run through the above and make sure it's working on iPhone X? Hopefully someone has a Yubico key that they can use in the office.

Passed on iPhone X

The new UIs are missing the site URLs. Will create a PR to add the URLs back.

I removed them because there were not present here :D

@jumde please also replace with Enter your security key PIN with Enter your security PIN

We can add it to the first screen:
1 insert key

Also the second screen with updated string:
2 pin required

Verified passed with iPad 5th Gen using 1.11.1 (19.08.13.17)

Verification PASSED on iPhone 6s+ iOS 12.4 using 1.11.1 (19.08.13.17).

IMG_9901
IMG_9899
IMG_9898

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kjozwiak picture kjozwiak  路  6Comments

oloverm picture oloverm  路  6Comments

srirambv picture srirambv  路  9Comments

kylehickinson picture kylehickinson  路  6Comments

VimS picture VimS  路  6Comments