DEV Community

Cover image for Adding Passkey Login to My Open Source Project n1netails Using Yubico and WebAuthn
Shahid Foy
Shahid Foy

Posted on • Edited on

Adding Passkey Login to My Open Source Project n1netails Using Yubico and WebAuthn

#passkeys #security #fullstack #opensource

Passwords suck.

They're reused, guessed, phished, and forgotten. So for my open-source alerting platform n1netails, I wanted something better—passkey authentication.

🔐 Why Passkeys?

Passkeys are the modern answer to broken password security. They’re based on WebAuthn, a W3C and FIDO standard that uses public-key cryptography instead of secrets.

Here's what makes passkeys powerful:

  • Phishing-resistant – There's no shared secret to steal, so attackers can't trick users into giving up credentials.
  • Device-native – Built into OS-level authenticators like Face ID, Touch ID, PIN, Windows Hello, etc.
  • User-friendly – One tap or face scan instead of typing a password.
  • Cross-device sync – Platforms like Apple and Google sync passkeys across your devices using end-to-end encryption.
  • No server-side secrets – Even if your database is compromised, passkey-based credentials can’t be reused or reverse-engineered.

🧠 How Passkeys Actually Work (Under the Hood)

Here’s a quick breakdown of the passkey flow from a technical perspective:

🔐 Registration (Creating a Passkey)

  1. The server generates a challenge (random data) and sends it to the browser.
  2. The browser asks the user to verify themselves using a platform authenticator (e.g., biometric or device PIN).
  3. If verified, the authenticator creates a new key pair (public/private keys).
  4. The public key is sent to the server and stored alongside a unique credential ID.
  5. The private key remains securely stored in the device and never leaves it.

🔑 Authentication (Logging In)

  1. The server generates a new challenge and asks the browser to authenticate.
  2. The browser prompts the user to verify with their platform authenticator.
  3. The private key on the device signs the challenge.
  4. The browser sends this signed challenge, along with the credential ID, back to the server.
  5. The server verifies the signature using the stored public key.

If the signature is valid, the user is authenticated.

📱 What This Means for Developers

  • No password hashing or resets
  • No secret storage headaches
  • Improved security and UX out of the box

Passkeys can be used as a primary or secondary authentication factor. In my project, I'm using them as a secondary login option.

🚨 About the Project: n1netails

N1netails is a self-hosted, developer-friendly alerting platform designed to be embedded or run independently—think lightweight, programmable PagerDuty.

I’ve been building this as a way to learn and explore:

  • Clean architecture in Springboot
  • Real-time alerts via APIs
  • Secure self-hosting with modern auth like passkeys

🔧 How I Implemented Passkeys (WebAuthn)

To implement passkeys, I used the Yubico WebAuthn Server library along with Google Jules as my peer programming buddy. Since I don't yet have email validation set up in the project, I decided to only allow registered users to generate passkeys. Here's a simplified breakdown of the approach:

  1. Registration Flow

    • An existing user chooses to register a passkey.
    • The backend generates a WebAuthn challenge using Yubico's server libraries.
    • The client (browser) handles the platform authenticator (Face ID, Touch ID, PIN, Windows Hello, etc.).
    • The resulting credential is verified and stored.

  2. Login Flow

    • The server issues a challenge.
    • The client authenticates using a previously registered passkey.
    • The server validates the signature and logs the user in.

The Yubico library took care of most of the protocol details like challenge generation, signature validation, and credential parsing.

📁 Code and Examples

You can view the source code and passkey implementation here:

👉 GitHub - n1netails passkey implementation

Relevant components include:

🚀 Final Thoughts

Passkeys aren’t the future—they’re now. If you’re building a product where security and usability matter, adding WebAuthn is well worth it. Using Google Jules as my peer programming buddy helped me get started, but it didn’t work completely out of the box. I had to tweak the database schema and refactor parts of the Passkey service and repository layers to get it working properly. If you are using Passkeys with email it is probably a good idea to make sure the user can validate their email before generating a passkey.

n1netails is still in its early stages, but you can:

Top comments (0)