demo of webauthn using FastAPI

webauthn_client.js

const log_el = document.getElementById('log')

function log(...messages) {
  console.log(...messages)
  log_el.innerText += '\n' + messages.map(m => JSON.stringify(m, null, 2)).join(' ')
}

function error(message) {
  console.error(message)
  log_el.innerText += '\n' + message
  throw Error('got error:' + message)
}

const asArrayBuffer = v => Uint8Array.from(atob(v.replace(/_/g, '/').replace(/-/g, '+')), c => c.charCodeAt(0))
const asBase64 = ab => btoa(String.fromCharCode(...new Uint8Array(ab)))

async function getPublicKey(path, element) {
  const user_id = document.getElementById(element).value
  const r = await fetch(`/${path}/${user_id}/`)
  if (r.status !== 200) {
    error(`Unexpected response ${r.status}: ${await r.text()}`)
  }
  return await r.json()
}

async function post(path, element, creds) {
  const user_id = document.getElementById(element).value
  const {attestationObject, clientDataJSON, signature, authenticatorData} = creds.response
  const data = {
    id: creds.id,
    rawId: asBase64(creds.rawId),
    response: {
      attestationObject: asBase64(attestationObject),
      clientDataJSON: asBase64(clientDataJSON),
    }
  }
  if (signature) {
    data.response.signature = asBase64(signature)
    data.response.authenticatorData = asBase64(authenticatorData)
  }
  const r2 = await fetch(`/${path}/${user_id}/`, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {'content-type': 'application/json'}
  })
  if (r2.status !== 200) {
    error(`Unexpected response ${r2.status}: ${await r2.text()}`)
  }
}

async function register() {
  const publicKey = await getPublicKey('register', 'user-id-register')
  console.log('register get response:', publicKey)
  publicKey.user.id = asArrayBuffer(publicKey.user.id)
  publicKey.challenge = asArrayBuffer(publicKey.challenge)
  let creds
  try {
      creds = await navigator.credentials.create({publicKey})
  } catch (err) {
    log('refused:', err.toString())
    return
  }
  await post('register', 'user-id-register', creds)
  log('registration successful')
}

async function authenticate() {
  const publicKey = await getPublicKey('auth', 'user-id-auth')
  console.log('auth get response:', publicKey)
  publicKey.challenge = asArrayBuffer(publicKey.challenge)
  publicKey.allowCredentials[0].id = asArrayBuffer(publicKey.allowCredentials[0].id)
  let creds
  try {
      creds = await navigator.credentials.get({publicKey})
  } catch (err) {
    log('refused:', err.toString())
    return
  }
  await post('auth', 'user-id-auth', creds)
  log('authentication successful')
}

webauthn_server.py

import base64
from pathlib import Path

import webauthn
from fastapi import FastAPI, Request, HTTPException
from fastapi.responses import HTMLResponse
from pydantic import validator
from starlette.middleware import Middleware
from starlette.middleware.sessions import SessionMiddleware
from webauthn.helpers.structs import (
    RegistrationCredential,
    PublicKeyCredentialCreationOptions,
    PublicKeyCredentialRequestOptions,
    AuthenticationCredential,
    UserVerificationRequirement,
    AuthenticatorSelectionCriteria,
    AuthenticatorAttachment,
    ResidentKeyRequirement,
    PublicKeyCredentialDescriptor,
    AuthenticatorTransport,
)

# secrets.token_hex()
secret_key = '9c580e0641762c32eab407257d924c25d5c8dd44a67d9efb4403038ae783c37c'

middleware = [
    Middleware(
        SessionMiddleware,
        secret_key=secret_key,
        session_cookie='webauthn-demo',
        same_site='strict',
        https_only=True,
    )
]

app = FastAPI(middleware=middleware)


@app.get('/', response_class=HTMLResponse)
async def index():
    # language=HTML
    return """
<h1>Webauthn demo</h1>
<div style="display: flex; justify-content: space-around">
  <div style="border: 1px solid black; padding: 10px">
    <h2>Register</h2>
    <label for="user-id-register">User ID:</label>
    <input type="number" step="1" id="user-id-register"/>
    <button onclick="register()">Register</button>
  </div>
  <div style="border: 1px solid black; padding: 10px">
    <h2>Authenticate</h2>
    <label for="user-id-auth">User ID:</label>
    <input type="number" step="1" id="user-id-auth"/>
    <button onclick="authenticate()">Authenticate</button>
  </div>
</div>
<pre id="log"></pre>
<script src="/webauthn_client.js"></script>
"""


class JavascriptResponse(HTMLResponse):
    media_type = 'application/javascript'


@app.get('/webauthn_client.js', response_class=JavascriptResponse)
async def client_js():
    return Path('webauthn_client.js').read_bytes()


@app.get('/register/{user_id:int}/', response_model=PublicKeyCredentialCreationOptions)
async def register_get(request: Request, user_id: int):
    public_key = webauthn.generate_registration_options(
        rp_id='localhost',
        rp_name='MyCompanyName',
        user_id=str(user_id),
        user_name=f'{user_id}@example.com',
        user_display_name='Samuel Colvin',
        authenticator_selection=AuthenticatorSelectionCriteria(
            authenticator_attachment=AuthenticatorAttachment.CROSS_PLATFORM,
            resident_key=ResidentKeyRequirement.DISCOURAGED,
            user_verification=UserVerificationRequirement.DISCOURAGED,
        ),
    )
    request.session['webauthn_register_challenge'] = base64.b64encode(public_key.challenge).decode()
    return public_key


def b64decode(s: str) -> bytes:
    return base64.urlsafe_b64decode(s.encode())


class CustomRegistrationCredential(RegistrationCredential):
    @validator('raw_id', pre=True)
    def convert_raw_id(cls, v: str):
        assert isinstance(v, str), 'raw_id is not a string'
        return b64decode(v)

    @validator('response', pre=True)
    def convert_response(cls, data: dict):
        assert isinstance(data, dict), 'response is not a dictionary'
        return {k: b64decode(v) for k, v in data.items()}


auth_database = {}


@app.post('/register/{user_id:int}/')
async def register_post(request: Request, user_id: int, credential: CustomRegistrationCredential):
    expected_challenge = base64.b64decode(request.session['webauthn_register_challenge'].encode())
    registration = webauthn.verify_registration_response(
        credential=credential,
        expected_challenge=expected_challenge,
        expected_rp_id='localhost',
        expected_origin='http://localhost:8000',
    )
    auth_database[user_id] = {
        'public_key': registration.credential_public_key,
        'sign_count': registration.sign_count,
        'credential_id': registration.credential_id,
    }
    debug(registration)


@app.get('/auth/{user_id:int}/', response_model=PublicKeyCredentialRequestOptions)
async def auth_get(request: Request, user_id: int):
    try:
        user_creds = auth_database[user_id]
    except KeyError:
        raise HTTPException(status_code=404, detail='user not found')

    public_key = webauthn.generate_authentication_options(
        rp_id='localhost',
        allow_credentials=[
            PublicKeyCredentialDescriptor(id=user_creds['credential_id'], transports=[AuthenticatorTransport.USB])
        ],
        user_verification=UserVerificationRequirement.DISCOURAGED,
    )
    request.session['webauthn_auth_challenge'] = base64.b64encode(public_key.challenge).decode()
    return public_key


class CustomAuthenticationCredential(AuthenticationCredential):
    @validator('raw_id', pre=True)
    def convert_raw_id(cls, v: str):
        assert isinstance(v, str), 'raw_id is not a string'
        return b64decode(v)

    @validator('response', pre=True)
    def convert_response(cls, data: dict):
        assert isinstance(data, dict), 'response is not a dictionary'
        return {k: b64decode(v) for k, v in data.items()}


@app.post('/auth/{user_id:int}/')
async def auth_post(request: Request, user_id: int, credential: CustomAuthenticationCredential):
    expected_challenge = base64.b64decode(request.session['webauthn_auth_challenge'].encode())
    try:
        user_creds = auth_database[user_id]
    except KeyError:
        raise HTTPException(status_code=404, detail='user not found')

    auth = webauthn.verify_authentication_response(
        credential=credential,
        expected_challenge=expected_challenge,
        expected_rp_id='localhost',
        expected_origin='http://localhost:8000',
        credential_public_key=user_creds['public_key'],
        credential_current_sign_count=user_creds['sign_count'],
    )
    debug(auth)
    user_creds['sign_count'] = auth.new_sign_count