feat(ux): ✨ allow user to deactivate passkey for login
This commit is contained in:
parent
6f5d2c1535
commit
9ce155570d
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
@ -28,7 +28,7 @@
|
|||
],
|
||||
"cssvar.enable": true,
|
||||
"cssvar.files": ["./_fresh/*"],
|
||||
"conventionalCommits.scopes": ["css", "config", "ui", "pwa", "api"],
|
||||
"conventionalCommits.scopes": ["css", "config", "ui", "pwa", "api", "ux"],
|
||||
"[ignore]": {
|
||||
"editor.defaultFormatter": "foxundermoon.shell-format"
|
||||
}
|
||||
|
|
|
@ -9,7 +9,12 @@ import { requestApi } from '../src/utils.ts'
|
|||
|
||||
export default function LoginForm() {
|
||||
return (
|
||||
<form onSubmit={connect} method='POST' action=''>
|
||||
<form
|
||||
onSubmit={connect}
|
||||
method='POST'
|
||||
action=''
|
||||
className='island__login_form__form'
|
||||
>
|
||||
<Input
|
||||
label='Email'
|
||||
name='email'
|
||||
|
@ -17,13 +22,20 @@ export default function LoginForm() {
|
|||
type='email'
|
||||
required
|
||||
/>
|
||||
<Button label='Connection' variant='primary'>Connection</Button>
|
||||
<Input
|
||||
label='Utiliser une Passkey'
|
||||
name='passkey'
|
||||
type='checkbox'
|
||||
checked
|
||||
/>
|
||||
<Button label='Me connecter' variant='primary'>Me connecter</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
type LoginFormFields = {
|
||||
email: string
|
||||
passkey: boolean
|
||||
}
|
||||
|
||||
async function connect(event: Event) {
|
||||
|
@ -33,6 +45,11 @@ async function connect(event: Event) {
|
|||
const fields = formJSON<LoginFormFields>(form)
|
||||
|
||||
try {
|
||||
// User disable passkey
|
||||
if (!fields.passkey) {
|
||||
throw new Error('User refused passkey')
|
||||
}
|
||||
|
||||
// Try PassKey connection
|
||||
if (!isWebAuthnSupported()) {
|
||||
throw new Error('WebAuthn is not supported by your browser')
|
||||
|
@ -77,7 +94,7 @@ async function webAuthnLogin(fields: LoginFormFields) {
|
|||
const verification = await requestApi<
|
||||
WebAuthnLoginFinishPayload,
|
||||
{ verified: boolean }
|
||||
>('webauthn/login/finish', 'POST', { ...fields, authentication })
|
||||
>('webauthn/login/finish', 'POST', authentication)
|
||||
|
||||
// Show UI appropriate for the `verified` status
|
||||
if (verification.verified) {
|
||||
|
|
Loading…
Reference in a new issue