react context webauthn

passwordcredential.ts

interface PasswordCredential {
  type: 'password'
  id: Readonly<string>
  iconURL: Readonly<string>
  name: Readonly<string>
  password: Readonly<string>
}

step1.tsx

import React, { createContext, useState } from 'react'

const AuthContext = createContext<PasswordCredential | undefined>(undefined)

export const AuthProvider: React.FC = ({ children }) => {
  const [credential, setCredential] = useState<PasswordCredential>()

  return (
    <AuthContext.Provider value={credential}>{children}</AuthContext.Provider>
  )
}

step2.ts

useEffect(() => {
  const fetchCredential = async () => {
    const storedCredential = await navigator.credentials.get({
      password: true,
      mediation: 'silent',
    } as any)

    if (storedCredential == null) {
      return
    }

    // valid credentials found
  }
  fetchCredential()
}, [])

step3.ts

const passwordCredential = storedCredential as PasswordCredential
const { name, password } = passwordCredential

const body = new FormData()
body.append('name', name)
body.append('password', password)

const res = await fetch('/auth/login', { body, method: 'POST' })
if (res.ok) {
  setCredential(passwordCredential)
}
// silently fail on login error (maybe credentials are incorrect)