{ "componentChunkName": "component---src-pages-blog-markdown-remark-fields-slug-js", "path": "/blog/passkeys-vs-passwords", "result": {"data":{"markdownRemark":{"html":"

Passwords have been obsolete for some time now. They are insecure, susceptible to a number of attack vectors and are honestly a pain to remember. The more astute amongst you have already moved to more secure methods like using a password manager or passwordless authentication using multiple factors but, they can be more cumbersome and require additional steps. Waiting for OTPs can take time and the delivery service can be prone to failure, setting up and managing an authenticator app is cumbersome and dealing with multiple factors is always tedious. Passkeys is a modern alternative that aim to solve a number of the issues associated with traditional and more advanced authentication methods. Let’s break it down.

\n

What Are Passkeys?

\n

Passkeys are cryptographic credentials built on FIDO2/WebAuthn standards. Unlike passwords, they do not depend on a user’s memory. Instead, they use a device-bound private-public key pair for authentication. Users typically unlock their credentials using biometrics (like a fingerprint or facial recognition) or a device PIN.

\n

Key Technical Difference

\n

Passwords are knowledge-based—users must know something (their password) to log in. Passkeys eliminate this knowledge factor. Instead, they are possession-based, stored securely on the user’s device and validated using a cryptographic challenge-response model.

\n

Security Comparison – Passkeys vs Passwords

\n

Password Vulnerabilities

\n\n

Passkey Strengths

\n\n

Data Breach Resilience

\n

If a database storing passkey public keys is breached, attackers gain nothing usable. In contrast, even hashed password leaks can eventually be exploited.

\n

Usability and User Experience

\n

Passwords UX

\n\n

Passkeys UX

\n\n

Cross-Device Sync

\n

Thanks to ecosystems like:

\n\n

Passkeys can sync across user devices securely, making cross-platform login seamless.

\n

Implementation Complexity

\n

Password Setup

\n\n

Passkey Setup

\n\n

Developer Considerations

\n\n

Implementing Passkeys in your application (With SuperTokens!)

\n

Setup SuperTokens in your application

\n

You will first need to set up SuperTokens in your web application.

\n
    \n
  1. Create a SuperTokens Account\n\n\n \n \n \n \n
    2. \n
  2. Integrate SuperTokens into your Frontend and Backend stack using the SuperTokens SDKs. Alternatively, if you are starting from scratch you can use SuperTokens CLI tool to test it out! This is what we will be doing
    3. \n
\n

npx create-supertokens-app@latest

\n

Initialize the WebAuthn recipes

\n

Once you setup SuperTokens in your application you will need to initialize the WebAuthn recipes in both the frontend and backend SuperTokens configurations.

\n
\n

Note: The following example configs were created by the SuperTokens CLI wizard with NextJs as the stack.

\n
\n

Backend configuration

\n {\n return {\n supertokens: { \n // this is the location of the SuperTokens core, try.supertokens.com is a demo core\n connectionURI: "http://try.supertokens.com",\n },\n appInfo,\n // recipeList contains all the modules that you want to\n // use from SuperTokens. See the full list here: https://supertokens.com/docs/guides\n recipeList: [EmailPasswordNode.init(), SessionNode.init(), Dashboard.init(), UserRoles.init(), WebAuthN.init()],\n isInServerlessEnv: true,\n framework: "custom",\n };\n};`, `40122514874561266000`)\"\n >\n \n \n \n \n
export let backendConfig = (): TypeInput => {\n    return {\n        supertokens: { \n            // this is the location of the SuperTokens core, try.supertokens.com is a demo core\n            connectionURI: \"http://try.supertokens.com\",\n        },\n        appInfo,\n        // recipeList contains all the modules that you want to\n        // use from SuperTokens. See the full list here: https://supertokens.com/docs/guides\n        recipeList: [EmailPasswordNode.init(), SessionNode.init(), Dashboard.init(), UserRoles.init(), WebAuthN.init()],\n        isInServerlessEnv: true,\n        framework: \"custom\",\n    };\n};
\n

Frontend configuration

\n {\n return {\n appInfo,\n recipeList: [EmailPasswordReact.init(), WebAuthn.init(), Session.init()],\n windowHandler: (orig) => {\n return {\n ...orig,\n location: {\n ...orig.location,\n getPathName: () => routerInfo.pathName!,\n assign: (url) => routerInfo.router!.push(url.toString()),\n setHref: (url) => routerInfo.router!.push(url.toString()),\n },\n };\n },\n };\n};\n`, `97492860113416540000`)\"\n >\n \n \n \n \n
export const frontendConfig = (): SuperTokensConfig => {\n    return {\n        appInfo,\n        recipeList: [EmailPasswordReact.init(), WebAuthn.init(), Session.init()],\n        windowHandler: (orig) => {\n            return {\n                ...orig,\n                location: {\n                    ...orig.location,\n                    getPathName: () => routerInfo.pathName!,\n                    assign: (url) => routerInfo.router!.push(url.toString()),\n                    setHref: (url) => routerInfo.router!.push(url.toString()),\n                },\n            };\n        },\n    };\n};\n
\n

Test the setup

\n
    \n
  • You can now run your the application and you should now have passwordless setup in your login experience! It’s as easy as that!
    • \n
\n

\n \n