PIN/Biometric Login Screens

[smaroudasunicorn]

• User shall be able to enable PIN/Biometric Login when creating/restoring a wallet.
• User shall be to enable/disable PIN/Biometric Login from Settings Page.
• A lock screen shall be prompted to the user according to X time of app inactivity.
• User shall be set the time that is required for locking application during inactivity app.

[onvisions]

Acceptance criteria:

1. Following the design provided implement the initial secure login screen (2 states depending on whether user has device authentication enabled or not).

2. Implement Secure login tab on the Superhero wallet settings page. Tab has 2 states (on/off) depending on whether secure login is enabled or not. The tab opens the Secure login settings page if the user has secure authentication enabled on the device. If not the tab opens Secure login screen (see the design for case B below).

3. Implement Secure login page in the Superhero wallet settings. The use should be able to enable/disable the feature. The user should be able to set lock time after which the wallet is locked. If the secure login feature is disabled the Lock time block is also disabled. See design for reference.

4. Lock screen.

5. Authentication failed screen.

Design:

1. Initial Secure login screen.

Case A: Device doesn't have security authentication enabled. The user is asked whether they would like to enable it for the mobile device first. Button leads to device settings.

Case B: Device has security authentication enabled. The user is asked whether to enable it for the wallet.

2. Superhero wallet settings:

3. Lock screen, Authentication failed screen.

User flow recording:

https://github.com/superhero-com/superhero-wallet/assets/12225410/44887e3c-3f26-4a84-985f-04526923f134

Prototype: https://www.figma.com/proto/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?type=design&node-id=31015-181433&t=dpJAqwViNjfbNmxI-1&scaling=min-zoom&page-id=10439%3A144915&starting-point-node-id=31015%3A181433&mode=design

Figma reference: https://www.figma.com/file/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?type=design&node-id=31015-181690&mode=design&t=hclQ54UFVNC1obte-0

[smaroudasunicorn]

I am ok with the proposal. A minor comment is that I propose to add a description in settings page for Auto lock.

"The wallet is locked for further actions after configured time interval. User has to unlock the screen in order to proceed to further actions."

[onvisions]

Ok. We can add the description but I suggest:

"Superhero wallet will be locked after the preset time interval of inactivity. You will be asked to authenticate in order to unlock the screen and continue using the wallet."

We should not use "the user" directly in the UI wording. We have always addressed the user personally (like "you", "your wallet" etc.)

Design:

[smaroudasunicorn]

I am ok. thanks

[Liubov-crypto]

@onvisions I have a question: is this screen should look like this? I saw it a little different on the record. Or it depends on the device?

[martinkaintas]

@onvisions I have a question: is this screen should look like this? I saw it a little different on the record. Or it depends on the device?

The bottom part depends on the device

[onvisions]

@Liubov-crypto The feature relies on the native authentication method available on the device. And uses device OS UI for the authentication part.

On the screenshot provided we don't provide the layout nor the styling or even the icon but as far as I got we can modify the text strings like "Authenticate to access your wallet".

[Liubov-crypto]

I found an issue: if I'm enable secure login immediately after login or new wallet creation and then try to enter my pin code it will not work. I will be not able to enter my wallet. The same behaviour if I'm set security login in Settings with option - immediately. If I will choose other options it will work.

https://github.com/superhero-com/superhero-wallet/assets/69896204/b17a44ff-563e-4b32-a52c-00cf7c3d1cc6

@martinkaintas please check it.

[Liubov-crypto]

Finally it's working for me with immediately option :) LGTM