Apr 27, 2023

From Passwords to Passkeys: Revolutionizing User Authentication

Passwords are getting outdated. Passkeys are proving to be a much better alternative. This blog explores the concept of passkey and its application.

Author

Tarun Bhagchand SoniTarun Bhagchand SoniSenior Software Engineer - II
From Passwords to Passkeys: Revolutionizing User Authentication

Password-dependent user authentication is becoming outdated. Passkeys are egging them out. Why is this happening? There is a mountain of reasons. But the major one distills down to the cumbersome nature of handling and managing passwords.

The practice of simple password-based authentication requires users to remember a string of characters to access their accounts. But according to researchers at NordPass, one digital citizen has, on average, 100 different passwords. Hoping a person to remember close to a hundred different passwords is a bit ask.

But memory is not the only problem. Security is a big concern with user authentication that depend on passwords. An information security officer said in a podcast that “if you're using just passwords, you're at the bottom of the pack to compromise your authentication, meaning you have the highest chance of getting your data stolen.”

The 2022 Data breach investigation report(DBIR) mentioned- The human element continues to drive breaches. This year 82% of breaches involved the human element. Whether it is the use of stolen credentials, phishing, misuse, or an error, people play a very large role in incidents and breaches alike.

Causes of Data Breach
Causes of Data Breach

Two-factor Authentication (2FA) — A Better Alternative? Not Quite

According to the US National Institute of Standards and Technology (NIST), two-factor authentication (2FA) is a security process in which a user provides two different authentication factors to verify themselves. The two factors can be something the user knows (like a password or PIN), something the user has (like a smart card or token), or something the user is (like a biometric). The purpose of 2FA is to increase the security of online accounts by requiring a second factor in addition to a password.

Of late, this method has become the go-to security measure. But does 2FA solve all the problems?It does if one considers it from just a security perspective. But it needs to get the popular attention it deserves. Statistics show that 2FA is used by approximately 60% to 70% of corporate accounts and only 40% of private users.

When asked why they are reluctant to use 2FA, 33% said it is cumbersome and provides a poor user experience, while 41% said it needs to be clarified.

In such instances, password managers are ineffective because they are a single point of failure and do not address the issue of phishing and social engineering.

Passkeys — The Best Alternative to Passwords

Passkeys are a simple and interoperable infrastructure for passwordless authentication that is being developed by the World Wide Web Consortium (W3C) and the FIDO Alliance. They allow you to replace your passwords with biometric information, such as fingerprints, facial recognition, or a USB security key. It's a secure and straightforward way to log in or sign up without passwords.

Let's see this in action.

Website Authentication (WebAuthn)

WebAuthn aims to improve the authentication user experience while ensuring high security by eliminating weak or reused passwords. It also gives users more privacy because biometric data and other sensitive information are never sent over the network.

Short for Website Authentication, WebAuthn is a web standard developed by the World Wide Web Consortium (W3C) and the Fast Identity Online (FIDO) Alliance. It provides a password-free, strong authentication mechanism for web applications. It does this by enabling users to authenticate themselves using biometrics such as fingerprints or facial recognition and a physical security key.

The WebAuthn standard is based on the W3C Web Authentication specification and uses two-factor authentication (2FA). When users want to authenticate themselves on a website, they provide a public key to the website, which is then used to generate a challenge. The user then signs the challenge using a private key stored on their device. The signed challenge is sent back to the website for verification.

FIDO

FIDO, or Fast Identity Online Alliance, is a non-profit organization that develops open standards for authentication. The FIDO Alliance is a consortium of companies that includes Apple, Google, Microsoft, and Samsung. The participants work together to develop and promote open standards for authentication.

Demonstration — How to Integrate Passkeys in Your Web App

Now, Let's see one of the ways you can integrate passkeys in your web app.

For the integration of passkeys, we are going to use hanko.io

  • Step 1: Signup for cloud.hanko.io. You can experience how passkeys work while signing up for Hanko.
  • Step 2: Create a new project and set the API URL as localhost:3000. This can change this to our deployed app URL).
  • Step 3: Grab the Hanko API URL
  • Step 4: Initialize a web app using a framework of your choice. You can use VanillaJS. NextJS is chosen here.
npx create-next-app passkeys-auth-test

Install the following packages

  • nookies — For managing cookies
  • @teamhanko/hanko-elements — Provides us with the component and integrates passkeys in our web app.
yarn add @teamhanko/hanko-elements-nookies
  • Step 5: Import the register function from @teamhanko/hanko-elements
import { register } from '@teamhanko/hanko-elements';

Call that function in a useEffect

useEffect(() => {
    register({ shadow: true, injectStyles: true })
}, []);

Create one more useEffect and add the listener

const redirectAfterLogin = useCallback(() => {
    router.replace('/loggedIn');
}, [router]);

useEffect(() => {
    document.addEventListener('hankoAuthSuccess', redirectAfterLogin);
    return () =>         document.removeEventListener('hankoAuthSuccess',redirectAfterLogin);
  }, [redirectAfterLogin]);

Finally, add the <hanko-auth>component, passing api_url as the props.

<hanko-auth
    api={api_url}
    lang="en"
/>

And that's it! 🥳

You'll have a basic implementation of passkeys implemented in your web app using Hanko.

Here are the relevant links:

Adoption of Passkeys To Date

Companies like Apple, Google, Dashlane, 1Password, etc., have already started deploying passkeys. However, there are potential issues with the technology. Reliability is a major concern. Passkeys on camera, biometric sensors, and fingerprint scanners may not be always reliable.

But passkeys are generally a great way to incorporate private key authentication. Users do not have to choose between convenience and security. The users can enjoy the best of both worlds. Passkeys are much more secure than passwords and are much more convenient than 2FA. In the future, they can become the standard mode of user authentication.

To speak to our experts in app security, book a slot with us: CLICK HERE

Subscribe to Our Newsletter

RELATED ARTICLES

More from the engineering frontline.

Dive deep into our research and insights on design, development, and the impact of various trends to businesses.
Why Legacy Systems Block Real-Time AI Decision-Making
Business

Aug 4, 2026

Why Legacy Systems Block Real-Time AI Decision-Making
Learn how legacy systems limit real-time AI decision-making and what businesses can do to build an AI-ready infrastructure.
What Makes an AI Product Enterprise-Ready? A Business Leader’s Perspective
Business

Aug 4, 2026

What Makes an AI Product Enterprise-Ready? A Business Leader’s Perspective
Most AI pilots never make it to production. Here are the five questions business leaders should ask before approving, buying, or scaling an AI product.
Building AI-Powered Banking CRM Platforms Without Replacing Core Banking Systems
Business

Jul 31, 2026

Building AI-Powered Banking CRM Platforms Without Replacing Core Banking Systems
Banks can modernize CRM with AI without replacing their core banking systems. This guide covers the architecture, use cases, governance, and roadmap to do it.
AI in Fintech: Everyone's Talking, Few are Shipping
Business

Jul 30, 2026

AI in Fintech: Everyone's Talking, Few are Shipping
This blog covers the key engineering, governance, and compliance principles required to build production-ready AI systems for financial services.
ERP and MES Integration for U.S. Pharma Manufacturers: A Roadmap to Achieve Zero-Error Production and End-to-End Traceability
Business

Jul 27, 2026

ERP and MES Integration for U.S. Pharma Manufacturers: A Roadmap to Achieve Zero-Error Production and End-to-End Traceability
A strategic roadmap for U.S. pharma leaders integrating ERP and MES to reduce production errors, accelerate batch release, strengthen compliance readiness, and enable end-to-end traceability across manufacturing sites.
How to Build Medical Device Software with AI: Compliance, Architecture, and Development Process
Business

Jul 24, 2026

How to Build Medical Device Software with AI: Compliance, Architecture, and Development Process
A guide for engineering leaders on building compliant, production-ready AI medical device software, from architecture to FDA clearance.

The Right Conversation Can Save You Six Months.

Whether you’re navigating AI adoption, modernizing legacy systems, or scaling a product - we start by listening. No pitch deck. No template. A real conversation.