로그인·가입 폼과 인증 입력

<!-- 로그인 -->
<form id="sign-in" method="post" action="/sign-in">
  <label for="email">이메일</label>
  <input id="email" name="email" type="email" autocomplete="username" required>
 
  <label for="current-password">비밀번호</label>
  <input id="current-password" name="current-password" type="password"
         autocomplete="current-password" required>
 
  <button>로그인</button>
</form>
 
<!-- 가입: name·id를 로그인 폼과 다르게 -->
<form id="sign-up" method="post" action="/sign-up">
  <label for="new-email">이메일</label>
  <input id="new-email" name="new-email" type="email" autocomplete="email" required>
 
  <label for="new-password">비밀번호</label>
  <input id="new-password" name="new-password" type="password"
         autocomplete="new-password" required minlength="15"
         aria-describedby="password-rule">
  <p id="password-rule">15자 이상. 문장처럼 길게 써도 된다.</p>
 
  <button>계정 만들기</button>
</form>

<label for="password">비밀번호</label>
<button type="button" id="toggle-password"
        aria-controls="password"
        aria-label="비밀번호를 글자로 보이기. 화면에 비밀번호가 표시된다.">보이기</button>
<input id="password" name="password" type="password" autocomplete="current-password" required>
<span class="visually-hidden" aria-live="polite" id="password-status"></span>

const input = document.querySelector('#password');
const toggle = document.querySelector('#toggle-password');
const status = document.querySelector('#password-status');
 
toggle.addEventListener('click', () => {
  const show = input.type === 'password';
  input.type = show ? 'text' : 'password';
  toggle.textContent = show ? '숨기기' : '보이기';
  toggle.setAttribute('aria-label', show
    ? '비밀번호 숨기기'
    : '비밀번호를 글자로 보이기. 화면에 비밀번호가 표시된다.');
  status.textContent = show ? '비밀번호가 보인다.' : '비밀번호가 가려졌다.';
});

<input id="email" name="email" type="email" autocomplete="username webauthn">

if (await PublicKeyCredential.isConditionalMediationAvailable?.()) {
  const credential = await navigator.credentials.get({
    mediation: 'conditional',
    publicKey: {
      challenge: challengeFromServer,   // 서버가 만든 무작위 값
      rpId: 'example.com',
      // allowCredentials를 비워 두면 이 사이트의 패스키를 모두 제안한다
    },
  });
  // credential을 서버로 보내 서명을 검증한다
}

<label for="otp">인증 코드</label>
<input id="otp" name="otp" inputmode="numeric" autocomplete="one-time-code" required>

인증 코드는 123456이다.
 
@www.example.com #123456

const input = document.querySelector('#otp');
 
if ('OTPCredential' in window) {
  const ac = new AbortController();
  input.form?.addEventListener('submit', () => ac.abort()); // 직접 입력해 제출하면 중단
  navigator.credentials
    .get({ otp: { transport: ['sms'] }, signal: ac.signal })
    .then((otp) => { input.value = otp.code; })
    .catch(() => {});
}