ルルの記録アプリを作った

犬をお迎えしてから基本的に毎朝体重を測ってるが、専用のアプリが欲しくなったので作成した。
ネイティブである必要が今のところなかったのでwebアプリ。
クラウドの利用料は無料枠に収めている。

なにができるのか

最初の画面は体重の記録画面になってる。
目盛りは 0.05 kgずつで毎朝計測する。
基本的に自分か奥さんが使うのでどちらかが記録する想定。

計測の画面↓

記録の一覧と折れ線↓

プロフィールタブには名前、誕生日、生まれてからの日数が出る。

プロフィール↓

構成

画面はReactとViteで作ったSPAで、APIはHonoを使ってる。
どちらも一つの Cloudflare Worker から配信している。
体重などの記録先は D1。
同じ規則はQuintで仕様にして、仕様の項目とテストを一対一に対応させている。

独自ドメインは買っていない。（cloudflareから払い出されるランダムな文字列）
iPhoneとAndroidのホーム画面に追加して使う想定。

認証の話

画面とAPIの手前に Cloudflare Access を置いた。
許可した二つのメールだけに、ワンタイムPINが都度払い出される。アプリ自身はパスワードを持たない。

Worker は Access が付ける JWT を検証して、その中のメールだけを本人にする。
署名方式は RS256 で、発行者とオーディエンスが設定と一致しないものは拒否する。
本番では、メールアドレスを名乗るヘッダーは見ない。
トークンが無い、期限切れ、署名が不正、設定が空、許可するメールが二つ揃っていない、二つのアドレスが同じ、のいずれでもアクセスできない設計に。