Email OTP and the Case of the Missing Logo
I was implementing authentication for a service I was building.
I've been logging in to a few online services using Passkeys, though I don't remember opting in.
Logging in with a fingerprint on my Mac is a quality-of-life improvement. Upon reading how passkeys work, however, I didn't quite understand why it was necessary. There are complaints on the internet.
So for my service, I implemented email OTP instead. If it's about liberating the user from remembering another password, I believe the six-digit login code is much easier for developers and sufficiently familiar to users, at least for a non-critical and non-sensitive service.
I also updated the login-code email template, although I had a hard time including the logo. It turned out email services would strip out inline SVG markup and base64 data URLs from the embedded HTML. (It was very entertaining to watch AI painstakingly try and fail to reproduce the logo with an elaborate table.)
The correct approach is to set the image source in the email's HTML to a cid: URL, attach the base64-encoded PNG to the message, and assign the attachment a matching Content-ID. With those IDs linked up, the image renders correctly and the email is ready to send.
