Integrating passkeys into the login flow for passwordless authentication

One day, an IT guy buys a coffee maker and thinks: “Please, let the coffee maker use passkeys.”

Every day, the news brings with it some reference to password breaches, new database leaks, and multiple security breaches. The situation only seems to be escalating in frequency and complexity.

That’s why the integration of access keys (passkeys) into the login flow represents a true evolution in web authentication. Passkeys eliminate the need for traditional passwords and offer a more secure and convenient alternative for users.

A unique access key

Essentially, registering a passkey involves associating a unique access key with a user’s account on a website or web application, and then securely storing that passkey’s public key on the service provider’s server.

For the user, everything seems instantaneous: touch a button, use your face or fingerprint, and voila! you’re in. Behind that simplicity, there’s much more to it.

The four pillars of password registration

To achieve user fluidity, there is a solid and well-defined process that involves key generation and verification, cryptographic validation, and good coordination between the browser, backend, and password provider.

The process of creating a passkey requires a coordinated interaction between four main components:

1. Backend (Server): before creating a passkey, the backend must verify that the user’s account has been created. It does this through an existing authentication method or challenge (for example, a code sent by SMS or email). The backend generates the passkey and is responsible for securely storing the associated public key.
   
2. Frontend (User interface): communicates with the browser to start the passkey creation process and receive the necessary data from the backend.
   
3. Web browser: acts as an intermediary between the frontend and the access key provider using the WebAuthn API (Web Authentication API). This API is the underlying standard that allows web applications to integrate strong cryptographic authentication, such as that used by passkeys, facilitating secure communication.
   
4. Access key provider: generates the key pair (public and private) and is responsible for storing the private key securely on the user’s device. This can be an operating system (such as iOS, Android, Windows), a dedicated password manager, or even a hardware security device.

The key steps in the registration process

• User verification: before allowing a passkey to be created, the backend must ensure that the user has been authenticated through traditional means (such as login + 2FA). This prevents someone from registering a passkey for an account they don’t own.
  
• Secure communication: the backend generates a cryptographically secure, temporary challenge, which will be signed by the user’s device. It also builds a JSON structure that includes information about the user, the service (relying party), and the allowed algorithms.
  
• Compatibility: the user’s browser must support the WebAuthn API and the specific functionality for creating access keys.
  
• Request to the supplier: The frontend, after obtaining the required credential data from the backend, calls the navigator.credentials.create() function. This opens a system dialog (Face ID, fingerprint, PIN, etc.), and if all goes well, the passkey provider generates the key pair. The private key remains on the device, and the public key (along with other data) is returned to the browser, which in turn sends it to the backend for storage.

Integrating passkeys is a step forward in access security: it eliminates passwords, improves the user experience, and strengthens resistance to common attacks like phishing.

The result is simplicity, less friction, greater security, and an experience that finally feels like something of our century.

The tech guy sighs “I no longer have to remember my coffee subscription password, the grinder password, the server app password, and the Wi-Fi password. My brain is already full of passwords for routers that no one ever resets! Besides, if the coffee maker doesn’t have an interface, what’s the point of being an IT tech?”

Antonio Bacete is a Frontend Solutions Architect at Transparent Edge.

If Manchego cheese were code, it would have Antonio Bacete’s face on the label. A tireless developer, Antonio is in charge of frontend architecture and development at Transparent Edge, where he patiently molds and integrates every feature we dream up for our dashboard.