Introduction

Say goodbye to forgotten passwords, endless reset emails, and risky sticky notes on monitors! 🤦‍♂️ Today, we’re diving into the world of passkeys—a passwordless, user-friendly, and highly secure way to log in, making stolen credentials a thing of the past. 💫

With Hanko's flexible configurations, setting up passkeys is easier than ever. Let's explore how passkeys work, dive into Conditional UI, and see how to let users securely delete their passwords. Plus, we’ll look at how passkeys can either replace or enhance traditional multi-factor authentication (MFA).

1. Why Passkeys? The Good, the Bad, and the Secure 🔑

Advantages of Passkeys:

1. 🚫 No More Passwords: Say goodbye to “Password123!” Passkeys let users authenticate securely without a password.
2. 🛡️ High-Level Security: Passkeys are phishing-resistant since there’s no password to steal. They’re device-based, stored locally and securely.
3. 🏎️ Smooth User Experience: One-tap access offers a frictionless experience.

How to Implement Passkey Authentication with Hanko

Here’s a simple flow using Hanko’s SDK to implement passkey login:

   import { generatePasskey, verifyPasskey } from 'hanko-sdk';

   // Step 1: Generate a passkey during user registration
   async function registerUser(username) {
      const passkey = await generatePasskey(username);
      return passkey; // Send this to the client for storage
   }

   // Step 2: Authenticate using the passkey
   async function loginWithPasskey(username, passkey) {
      const result = await verifyPasskey(username, passkey);
      if (result) {
         console.log("Authentication successful! 🎉");
      } else {
         console.log("Authentication failed! 🚫");
      }
   }

Disadvantages (Because Nothing’s Perfect 🤷‍♂️):

1. 📲 Device Dependency: Passkeys are tied to devices, so if a device is unavailable, the user may be unable to log in. Hanko recommends offering backup options.
2. 🌐 Cross-Platform Compatibility: Although evolving, passkey support is still expanding.

2. Passkey Autofill: Conditional UI to the Rescue 🦸‍♂️

What’s Conditional UI?

Conditional UI is a UX design pattern that presents different login options depending on device compatibility. If the user’s device supports passkeys, they’ll be presented with this option automatically, creating a seamless experience.

How to Implement Passkey Autofill (Conditional UI)

Here’s an example of a conditional UI setup for passkeys:

   async function showLoginOptions(user) {
      if (window.PublicKeyCredential) { // Passkey-supported device
         displayOption('passkey');
      } else {
         displayOption('password');
      }
   }

   function displayOption(option) {
      if (option === 'passkey') {
         console.log("Displaying passkey login 🔑");
         // Display passkey-based login UI
      } else {
         console.log("Displaying password login 🔒");
         // Display traditional password-based login UI
      }
   }

   // Call the function when the login screen loads
   showLoginOptions();

Why Developers and Users Love It

Users get a fast, secure login flow tailored to their device, and developers don’t have to maintain multiple login flows manually.

3. Making Passwords Optional: Handle with Care 🧤

Why Allow Users to Delete Passwords?

Letting users delete their passwords adds convenience and security. Passkeys offer secure, one-tap access, but there are some key considerations before ditching passwords.

Best Practices for Deleted Passwords:

1. Confirm Passkey Setup 🧐: Verify a passkey is set up before allowing password deletion.
2. Recovery Options 🆘: Provide backup options for account recovery.

Example Workflow for Password Deletion

   async function deletePassword(userId) {
      const hasPasskey = await checkPasskey(userId);
      if (!hasPasskey) {
         throw new Error("Cannot delete password without a passkey. Please set up a passkey first.");
      }

      // Proceed to delete the password if a passkey is set up
      const result = await removePassword(userId);
      if (result.success) {
         console.log("Password deleted successfully! 👋");
      } else {
         console.log("Failed to delete password. 😕");
      }
   }

   // Helper functions
   async function checkPasskey(userId) {
      // Check if a passkey exists for the user
      return await hankoClient.checkPasskey(userId);
   }

   async function removePassword(userId) {
      // Remove password from user's account
      return await hankoClient.deletePassword(userId);
   }

Designing a User-Friendly Deletion Flow

Use a clear interface to explain the implications of deleting passwords and encourage users to set up a passkey first.

4. Passkeys as Password Replacements vs. MFA: Who Wins? ⚔️

Passkeys as MFA? Absolutely!

Passkeys can enhance MFA, offering an easy, secure way to verify identity beyond just a password. Here’s how Hanko supports this setup:

Setting Up Passkeys as MFA with Hanko

   async function setupMFA(userId) {
      const mfaOption = await hankoClient.createMFA(userId, {
         type: 'passkey',
      });

      if (mfaOption.success) {
         console.log("MFA with passkey set up! 🛡️");
      } else {
         console.log("Failed to set up MFA. 🤔");
      }
   }

   async function authenticateWithMFA(userId, passkey) {
      const isAuthenticated = await hankoClient.verifyMFA(userId, passkey);
      if (isAuthenticated) {
         console.log("MFA login successful! 🎉");
      } else {
         console.log("MFA login failed! 🚫");
      }
   }

With Hanko, you can configure passkeys as an additional layer of security or a primary replacement. The versatility of passkeys makes them a strong contender for both roles.

Conclusion

Passkeys represent a shift to a more secure, frictionless login experience. With Hanko’s tools, implementing passkeys is straightforward, making password-free logins accessible to users and developers alike. Ready to get started? Hanko is here to help you leave forgotten passwords in the past! 👋💫

🚀 Want to know more? Feel free to check out hanko docs