Backup: Product management feedback for the current React component

[vincentdelitz]

Mostly functional feedback:

• Sign up screen:
  • [x] please make the cursor of the "Continue with email" button as pointer (this applies for all buttons, so also secondary buttons)
  • [x] Please write "Email address is already in use" instead of "Email Address is already in uses
• Passkeys explainer screen:
  • [x] Please remove one dot at the very end after "[...] screen lock code.."
  • [x] If clicking on maybe later, I'm returned to the sign up screen but the account is already created and I get the "Email Address is already in use" error message
  • Login screen
  • [x] For some reason, when I click into the email input field the passkey modal comes up (even though I've never created a passkey yet):
  • [x] When clicking on "Try again" when I'm prompted to use the passkey, I'm redirect and see this page with "You are not logged in". In case, "Try again" does not work we should stay on the same screen
  • [x] I tried to login various times and only received an OTP email on the sign-up and on my first login attempt but not on any subsequent login attempts, so I could neither login nor create a passkey (I had to manually refresh the site to get new OTP messages).
  • [x] Conditional UI is not or wrongly implemented (I don't get the conditional UI dropdown that I'm used to)
  • [x] Please add a "loading wheel" as long as passkey operations are in place or something is done on the backend side, and the user is waiting (this applies not only to the login button but also to other buttons that have been clicked - please see the current web component implementation for reference)
  • OTP Screen
  • [x] Please center the logo + email provider in the respective box:

• [x] when the last number is entered, the "continue" flow should automatically be executed, so that the user saves on click

UI Feedback:

• [x] Can we make the font in the primary button bold
• [x] After loggin in with OTP and coming to the page "Log in even faster with Passkeys" -> Please make "Passkeys" as a link as well to the explanatory page
• [x] When accessing the site from my mobile (Android 13) the web component gets a black background -> is that on purpose?:
• [x] Please format email address fields as email
• [x] add autofill for name and email fields
• [x] on mobile the input fields to enter the OTP are not formatted as numbers and thus I get the regular keyboard, even though I would have needed the keyboard only with numbers

[incorbador]

@vincentdelitz FYI: During SignUp it's currently not possible to retry the creation of a passkey => this is fixed as we adapt our backend behaviour.

[vincentdelitz]

Feedback loop 2: Functional feedback

• Login page:
  • [ ] When cancelling the passkey login flow in Conditional UI, the email OTP is not started automatically (the regular passkey login flow works with fallback). Instead, the user is returned back to the regular login screen, where they need to re-initiate the login. Please change it, so that in case the user cancels or any kind of error appears, the email OTP fallback directly kicks in.
  • [ ] I cancelled the "passkey append process" on my second device (here: Samsung Galaxy S21) and only got the screenshot below. There's no chance to just send a OTP, clicking on "Try again" also brings no help. Click on "Cancel" directs me back to the "OTP-enter page" but no new OTP is sent out (still the old can be used however -> is this desired? I expected an OTP to be deleted/flagged as used after the usage).

UI feedback

• Sign-up page:
  • [ ] On mobile devices (here: Samsung Galaxy S21), the "Email address" label is to close to the "Name input" field

[corbadoman]

• [ ] Add proper handling of server side deleted passkeys, see https://github.com/corbado/corbado/issues/2700#issuecomment-1827929456 for more details

[corbadoman]

• [x] If I leave the form empty and click on "Mit E-Mail fortfahren" button nothing happens

[corbadoman]

• [ ] No error on empty submit

• [ ] Wrong OTP does not show an error but it redirects directly to the home page (react-example)

[corbadoman]

• [ ] Our language system needs variables? Like "Wir haben Ihr Einmal-Kennwort an {email} gesendet!"

[corbadoman]

• [ ] Add some more spacing between name field an "E-Mail-Adresse" label

[corbadoman]

• [ ] On error the field labels inside the field are not centered anymore

[vincentdelitz]

Functional

• Login with OTP screen:
  • [ ] Fore some reason, the email address is not displayed (I clicked on the passkeys explainer and then on "Maybe later" button if you want to replicate the issue):

• [ ] Received this page after logging out by clicking on the button (happend only once, so I don't know how to replicate it). The following issue existed only one (after page refresh everything worked as expected):

• [ ] Add autocomplete to fullName field during registration:

• [ ] Passkey Append did not appear the first time I was accessing may account from the second device (Background: I had created the account and passkey on Windows and then loggedin on Android via OTP but was redirected directly to logged-in page)
• [x] I noticed that only the last OTP is valid, even though the second last was not used. Is this intended behavior?
• [ ] The ehavior when deleting the passkey in the Passkey-List (server-side) and then using the local private key via Conditional UI is not yet good. Currently, nothing happens but we need to detect that and display a message accordingly, see https://github.com/corbado/corbado/issues/2700#issuecomment-1827929456. Also when deleting a passkey on Windows and having one available on Android there's no chance to make use of it for cross-platform authentication via QR Code & Bluetooth right now.
• [ ] Improve passkey append email (probably creating a separate ticket is better as it's probably a backend issue). Actually, this should have been improved in the past already in some other ticket:
  • [ ] Introduce line breaks after the salutation
  • [ ] Add blank space between "project" and "if"
  • [ ] Please check your account at -> missing link for the application URL (maybe need to take something different here)
  • [ ] Make user agent (here: "Chrome on Android") bold and also project name (here: "My first project") bold

• [ ] When using cross-device authentication via QR Code + Bluetooth, I receive the following page first and have to click on "More options" to make use of my Android platform authenticator instead of a USB Security Key. This is probably due to some other WebAuthn server settings?
• [ ] Fallback email OTP doesn't kick in immediately, when the login fails, e.g. due to errors.invalidPasskey, especially if you cancel passkey login. Let's dicuss to send out email OTP then immediately, otherwise it might be hard on devices to login with OTP if there should be a passkey but passkey login is not possible for whatever reason