Passkeys / WebAuthn

import { startRegistration } from '@simplewebauthn/browser'
 
async function registerPasskey(accessToken) {
  // Step 1: Get registration options from Auris
  const optionsResponse = await fetch('/api/user/2fa/webauthn/challenge', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${accessToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ type: 'registration' }),
  })
  const options = await optionsResponse.json()
 
  // Step 2: Browser prompts user for biometric/security key
  let credential
  try {
    credential = await startRegistration(options)
  } catch (err) {
    if (err.name === 'NotAllowedError') {
      console.error('User cancelled or timed out')
      return
    }
    throw err
  }
 
  // Step 3: Send credential to Auris
  const verifyResponse = await fetch('/api/user/2fa/webauthn', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${accessToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      credential,
      name: 'My MacBook', // User-provided name for the credential
    }),
  })
 
  const result = await verifyResponse.json()
  if (result.verified) {
    console.log('Passkey registered successfully')
  }
}

import { useState } from 'react'
import { startRegistration } from '@simplewebauthn/browser'
import { useAuris } from '@auris/react'
 
function PasskeyManager() {
  const { getAccessToken } = useAuris()
  const [credentials, setCredentials] = useState([])
  const [name, setName] = useState('')
  const [registering, setRegistering] = useState(false)
 
  async function handleRegister() {
    setRegistering(true)
    try {
      const token = await getAccessToken()
 
      const optionsRes = await fetch('/api/user/2fa/webauthn/challenge', {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({ type: 'registration' }),
      })
      const options = await optionsRes.json()
 
      const credential = await startRegistration(options)
 
      const verifyRes = await fetch('/api/user/2fa/webauthn', {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({ credential, name }),
      })
      const result = await verifyRes.json()
 
      if (result.verified) {
        setCredentials((prev) => [...prev, result.credential])
        setName('')
      }
    } finally {
      setRegistering(false)
    }
  }
 
  async function handleDelete(credentialId) {
    const token = await getAccessToken()
    await fetch(`/api/user/2fa/webauthn/${credentialId}`, {
      method: 'DELETE',
      headers: { Authorization: `Bearer ${token}` },
    })
    setCredentials((prev) => prev.filter((c) => c.id !== credentialId))
  }
 
  return (
    <div>
      <h3>Registered passkeys</h3>
      {credentials.map((cred) => (
        <div key={cred.id}>
          <span>{cred.name}</span>
          <span>{cred.createdAt}</span>
          <button onClick={() => handleDelete(cred.id)}>Remove</button>
        </div>
      ))}
 
      <div>
        <input
          placeholder="Device name (e.g. My MacBook)"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button onClick={handleRegister} disabled={registering || !name}>
          {registering ? 'Follow device prompt...' : 'Add passkey'}
        </button>
      </div>
    </div>
  )
}