WebAuthn

In my initial days. As a bachelor-level computer science student, I used to build small projects using React, Next.js, and Spring Boot.

Every project starts the same way: login and registration using passwords. At first, it feels normal.

But later found a real usecase problem:

1. Users usually forget their passwords
2. Weak passwords get hacked
3. Password reset logic becomes messy
4. Phishing attacks steal credentials.

The following days, while logging into my Google account, I noticed something different

” Use your fingerprint to sign in.”

No Password, no OTP, just fingerprint. That’s when I discovered WebAuthn and Passkeys.

Let’s understand: WebAuthn first.

WebAuthn (Web Authentication API) is a modern web standard that allows users to log in without passwords. Instead of typing a password, it is a browser API that lets users authenticate using cryptographic keys instead of passwords. Users can log in using:

1. Fingerprint
2. Face recognition
3. Device PIN
4. Security Key (USB)

This user-friendly name for this technology is Passkey.

Why Passwords Are a Problem

Before understanding WebAuthn, we must understand why passwords fail.

Problems with passwords:

1. Users reuse passwords
2. Passwords can be guessed or brute-forced
3. Passwords can be stolen using phishing
4. Even hashed passwords can be leaked

Passwords are a shared secret:

1. User knows it
2. Server stores it (hashed)

This shared secret is the weakness.

---

The Core Idea Behind Passkeys (Very Important)

The server never knows your secret.

This is the biggest difference.

With WebAuthn:

1. The private key stays on the user’s device
2. The public key is stored on the server

The private key is never sent over the internet.

---

A Real-Life Analogy (Easy to Understand)

Imagine this situation:

1. Your phone = a smart key
2. Your website server = your house

Registration (Creating a Passkey)

1. You create a unique key for your house
2. You keep the real key with you (private key)
3. You give the lock design to the house (public key)

Login (Using the Passkey)

1. The house asks: “Prove you have the key”
2. You unlock it using your fingerprint
3. The house checks and opens

You never give the real key to anyone.

---

How WebAuthn Works (High-Level Flow)

WebAuthn has two main steps:

1. Registration
2. Authentication

---

Step 1: Passkey Registration (Sign Up)

What happens behind the scenes?

1. User clicks “Create Passkey.”
2. The server generates a random challenge.
3. Browser calls navigator.credentials.create()
4. Authenticatory (phone/laptop) creates a key pair
5. The public key is sent to the server
6. The server stores the public key

Simple Diagram

Step 2: Passkey Authentication (Login)

Login flow:

1. User clicks “Login with Passkey”.
2. The server sends a challenge.
3. Browser calls navigator.credentials.get()
4. Authenticator signs the challenge
5. Server verifies the signature
6. User is logged in

No password involved.

What Is an Authenticator?

An authenticator is a device that stores your passkey. E.g., your phone, laptop, and a USB security key. It sores the private key and performs biometric verification to sign challenges securely.

What Does the Browser Do?

The browser acts as a middleman. It talks to the authenticator. Handle cryptography and ensure the request comes from the correct domain.(Note: Developers don’t write crypto code manually. )

What Does the Backend Do? (Spring Boot Example)

The backend is responsible for:

During registration:

1. Creating a challenge
2. Storing:
3. Public key
4. Credential ID
5. User handle

During login:

1. Creating a challenge
2. Verifying:
3. Signature
4. Challenge (one-time random value)
5. Public key match

The backend never stores passwords.

Final Thoughts

At first, WebAuthn sounds complicated. But at its core, it’s simple: Instead of sharing a secret, users prove they own a key.

For students/learners building modern web apps, learning WebAuthn is a powerful skill that sets you apart.

Let me know your opinion about Webauthn API in the comment section.