prevent user select on container-body

[barbalex]

When logging in, focus drops into the container-body, thus the cursor blinks next to the title, watch "Log in":

with_user_select.mp4

I find this distracting. This pull request prevents that by preventing user-selection:

without_user_select.mp4

[incorbador]

Hey @barbalex. Thanks for the PR.
On what environment are you experiencing this issue? (OS, browser, are you using a JavaScript or a CSS Framework)?

[barbalex]

• os: windows 11 up to date
• browser: chrome up to date
• javascript framework (if you want to call it that): react (without meta-framework)
• css-framework: none

[incorbador]

Ok, thanks for the info. I can not reproduce the issue myself on the environment you described (tried a few windows devices where it did not show up).
I would just like to understand how this can happen.
Are you using any extension in your browser that might have something to do with this?

[barbalex]

I tried deactivating all extensions. The behavior remains if I uncomment:

.cb-container-body {
  /* user-select: none; */
}

[incorbador]

Is your application deployed somewhere, so that we can test it as well? Btw. you can just overwrite the class with your custom styling by defining a custom theme as described here: https://docs.corbado.com/frontend-integration/ui-components/customization#2-custom-styling

This might be a good quick fix in the meantime until we soft this out :)

[barbalex]

Is your application deployed somewhere, so that we can test it as well

Unfortunately no, it is being developed

you can just overwrite the class with your custom styling by defining a custom theme as described here

Thanks, that is neat. I was overriding you classes but this is better

[barbalex]

I now tried to test it on firefox (up to date).

The problem here is:

I can continue without passkeys (nice) but then I can't compare with the behaviour on chrome.

[barbalex]

I also tried using edge. That directly uses windows hello and skips the Log in page completely. Nice. But not helpful to compare...

Edge also offers to use a passkey on another device. When clicking that it directly logs in. Some nice black magic going on there...

[barbalex]

Don't hesitate to close the issue if you feel it must be a problem caused by something in my chrome browser. I can't say it that is the case but it seems possible 😢

[barbalex]

I also tried using edge. That directly uses windows hello and skips the Log in page completely

Seems that chrome can do that too. nice.

[barbalex]

By the way: I like the new looks of version 2

[incorbador]

Hey, let me make sure that I get everything. What I understand is this:

• You are experiencing an error when you try to create (not login) a passkey on Firefox (Windows 11) => is passkey creation always failing or is it a sporadic error? I will then try to reproduce that issue
• You are also testing login with passkey on Edge and Chrome => What do you mean exactly by "That directly uses windows hello and skips the Log in page completely"? (another short screen recording might help here)

[barbalex]

You are experiencing an error when you try to create (not login) a passkey on Firefox (Windows 11) => is passkey creation always failing or is it a sporadic error?

It is always failing. Here the screen recording:

firefox.mp4

[barbalex]

I tried to demo logging in on edge. And managed to get the same error as on firefox. But with better error message:

e InvalidStateError The user attempted to register an authenticator that contains one of the credentials already registered with the relying party.

To start from a clean slate (?) I had removed all application state beforehand.

Also: I can click Continue without passkeys and then I am logged in. But from this moment on every login provokes an email being sent with a one-time passcode.

[barbalex]

You are also testing login with passkey on Edge and Chrome => What do you mean exactly by "That directly uses windows hello and skips the Log in page completely"?

This:

edge.mp4