Vercel Passkeys: Role Model for Frontend Developers

Looking for a dev-focused passkey reference? Download our Passkeys Cheat Sheet. Trusted by dev teams at Ally, Stanford CS & more.

Get Cheat Sheet

In modern web development, Vercel is an indispensable global player, particularly for empowering frontend developers with the ability to handle DevOps and backend tasks seamlessly. Renowned for the creation of Next.js - one of todays most influential web frameworks - Vercel emphasizes simplicity, great developer experience (DX), and robust security throughout their product offering. As an innovator in the industry, Vercel not only defines trends and sets new standards but also remains a constant subject of discussion among developers (especially in the Twitter/X and Reddit communities).

One of their latest endeavors that underscores their leadership role in modern and secure web development practices is Vercels rollout of passkeys in their developer console. This blog post delves into why this initiative is a milestone for the web development industry at large, exploring its technical and strategic implications, and projecting the implications of passkeys on Vercel.

• Developer Education: With GitHub's move in mid-2023 to roll out passkeys many developers had their first real touchpoint with passkeys from user perspective. Vercels adoption of passkeys represents another significant step in developer education and the broader acceptance of this cutting-edge authentication method. This shift not only brings attention to a more secure and convenient form of login but also encourages developers to reconsider authentication mechanisms on their own websites and apps that they develop.
• DevTool Industry Implication: The rollout of passkeys by an influential developer tool platform like Vercel sends a strong message across the developer tools ecosystem, encouraging other companies to integrate passkeys into their platforms as (Im looking at you Digital Ocean and Heroku which, until now, only support hardware security keys yet).
• Enable Frontend Developers: Traditionally, authentication processes were backend-focused, involving API endpoints for credential submission (e.g., a user's password) and server-side verification (e.g., comparing the submitted password's hash against the stored hash in a database). However, with Vercel's focus on enabling frontend developers to host applications - and with Next.js, to also develop backends the passkey rollout shows that Vercel might encourage frontend developers now to also incorporate authentication via passkeys. Given that passkeys shift a significant portion of the authentication process to the frontend, requiring user interaction via Face ID or Touch ID, Vercel's promotion of passkeys could inspire more frontend developers to explore and integrate passkeys into their own applications.

We analyzed the following processes of authentication: Sign-up, passkey creation and login.

Vercels employs a passwordless signup process, requiring an email link verification followed by phone number confirmation via SMS OTP. After these two factors are verified, the user has successfully created an account. However, passkeys do not play a role in the signup process (yet). Even, the promotion of passkeys isnt upfront; users need to navigate to the "Account Settings > Authentication" section to find the passkey option.

After going into the right settings section, the passkey creation can be triggered. Users are guided through the creation process, after which they can name their passkey - suggestions for the name are based on the provided user agent, such as "Chrome on Windows" or Safari on iOS. Creating additional passkeys is prevented by the correctly set of excludeCredentials, ensuring that each device / platform can only hold one passkey avoiding user confusion.

Click on the Passkey button in the Authentication Settings:

Clicking on the "Continue" button initiates the passkey flow. After successful creation, you can name your passkey in the account settings. A suggestion is given based on the user agent (e.g., Chrome on Windows).

Simultaneously, you will receive an email notification confirming the successful creation of your passkey

Interestingly, the WebAuthn User Name (and WebAuthn User Display Name) which is used inside the passkey is a transformed version of the email address and not the email address itself for what reason so ever, e.g. for vincent.delitz@corbado.com, the following username was set:

Creating an additional passkey is not possible, as the excludeCredentials property in the PublicKeyCredentialCreationOptions are correctly configured.

PublicKeyCredentialCreationOptions:

{
    "attestation": "none",
    "authenticatorSelection": {
        "residentKey": "required",
        "userVerification": "preferred"
    },
    "challenge": "JuDyF9zQx6uoZoL8N8VOpMlYl7qyodaTK5LehfidybA",
    "excludeCredentials": [
        {
            "id": "qejkASAAlhBALZXBO3xN975c0jW8dvXX7FQqw57-fibs",
            "transports": ["internal"],
            "type": "public-key"
        }
    ],
    "extensions": {
        "credProps": true
    },
    "pubKeyCredParams": [
        {
            "alg": -7,
            "type": "public-key"
        },
        {
            "alg": -257,
            "type": "public-key"
        }
    ],
    "rp": {
        "id": "vercel.com",
        "name": "Vercel"
    },
    "user": {
        "displayName": "vincentdelitz-corbadocom",
        "id": "Zk11S1JsSDN1eNUxOGs4STRsYVBDc1Fi",
        "name": " vincentdelitz-corbadocom "
    }
}

You can edit the name of the passkey:

The login flows works via a dedicated Login with Passkey button which offers usernameless functionality but does not support Conditional UI.

A notable issue is the failure of cross-device authentication when using a device stored in the Chrome profile (e.g., from Windows to Android or macOS to Android), attributed to the apparent omission of userHandle in certain scenarios. This hiccup, however, is bypassed when users opt for QR code scanning, indicating areas for refinement in Vercels passkey implementation.

Assertion (with missing userHandle):

{
    "authenticatorAttachment": "cross-platform",
    "clientExtensionResults": {},
    "id": "6POHeaXc5Ii2eLXO0S3fuQ",
    "rawId": "6POHeaXc5Ii2eLXO0S3fuQ",
    "response": {
        "authenticatorData": "m6rSfqsg-5hLOII-UnpgJFK7ZPLZzBTD3QIInxc6ySYdAAAAAA",
        "clientDataJSON": "eyJ0eXBlIjoid2ViYXV0aG4uZ2V0IiwiY2hhbGxlbmdlIjoiSXVNbEwwSVdiaGZvSzVTY0docmpMbW5HdFFQWllXckFpQ19qbGRIeGlNNCIsIm9yaWdpbiI6Imh0dHBzOi8vdmVyY2VsLmNvbSIsImNyb3NzT3JpZ2luIjpmYWxzZX0",
        "signature": "MEUCIQCGei86PiAfaw0aLxxjn2-KWpdQe1YDNae6hwAlSM3woygIgcdutTA5UWSbHoCFq64ZusHbYpd0KZJsAw5x8P_gQxwg"
    },
    "type": "public-key"
}

We already opened up a bug report for this issue.

Become part of our Passkeys Community for updates & support.

Join

• Commitment to Innovation: Vercel's rollout of passkeys underscores its dedication to providing cutting-edge and innovative web technologies that are widely accessible.
• Early Adopter Status: The current state, marked by the lack of certain passkey features like Conditional UI, indicates this is an initial testing phase, likely leading to a wider implementation for Vercel users in the future. Still, Vercel is perceived as an early adopter to roll out passkeys in safe way and making sure that more features will be probably made accessible to the wider masses after some initial testing phase.
• Leverage Tech-Savviness of User Base: The strategy recognizes the advanced technical knowledge of its main audience - frontend developers - and their openness to embracing new technologies.

As we look to the future, integrating Conditional UI and expanding the use of passkeys in Vercel- hosted apps marks a significant shift in how we think about authentication. This change points to a new era where user convenience and security are more closely aligned.

One interesting possibility on the horizon is the idea of Vercel enabling passkey-only sign-ups right from the get-go, eliminating the need for traditional email links or SMS OTPs for verification. This could not only make the sign-up process smoother but also cut down on costs, especially by moving away from SMS OTPs, which can get pricey.

Equally important will be the reaction from the Next.js team and how NextAuth.js adjusts to passkeys in general. Their stance on pushing forward with passkey authentication will be key in shaping how authentication evolves in web development.

This isn't just about the tech; it's about making the web easier and safer for everyone. Whether you're coding up a storm, managing digital products, or just signing into your favorite sites, the move towards simpler, more secure sign- ins could change a lot. With Vercel leading the charge, we're looking at a future where getting into your online spaces is both easy and secure, setting a new standard for what we all expect from our online experiences.

Cross-device passkey authentication on Vercel fails when switching between devices stored in a Chrome profile (e.g., Windows to Android) because the userHandle is apparently omitted in certain assertion responses. Users can work around this by choosing QR code scanning during the login flow instead.

Vercel's PublicKeyCredentialCreationOptions sets attestation to 'none', residentKey to 'required' and userVerification to 'preferred'. Supported algorithm parameters are alg -7 (ES256) and alg -257 (RS256), and the WebAuthn username is a transformed version of the user's email address rather than the raw email itself.

Vercel's current passkey login does not support Conditional UI. Authentication is triggered via a dedicated 'Login with Passkey' button that enables usernameless login, which suggests the implementation is still in an initial testing phase before a wider rollout.

A future direction for Vercel would be enabling passkey-only sign-ups from the start, removing the current requirement for email link verification and SMS OTP confirmation. Eliminating SMS OTPs in particular would reduce costs, since SMS-based verification can become expensive at scale.