Bun Passkeys with Vue.js

In this blog post, well be walking through the process of creating a sample application with passkey authentication using the brand-new JavaScript runtime Bun. In most cases, apps that run on Bun are built with a framework you already know, like React, Next.js or Vue.js. The execution, though, is done by Bun instead of npm, as it is up to 29x faster according to their own website bun.sh.

The app we serve with Bun will be Corbados Vue.js passkeys sample application. It showcases passkey authentication using the Corbado web component in a Vue.js app which comes with a seamless user experience.

If you want to see the code of the Vue.js app, please have a look at our Vue.js sample application repository or the corresponding tutorial on how to build it.

The result looks as follows:

This tutorial assumes basic familiarity with Vue.js, HTML, CSS and JavaScript. Let's dive in!

Visit the Corbado developer panel to sign up and create your account (youll see passkey sign-up in action here!).

In the appearing project wizard, select Web app as type of app and afterwards select No existing users as were building a new app from scratch. Moreover, providing some details regarding your frontend and backend tech stack as well as the main goal you want to achieve with Corbado helps us to customize and smoothen your developer experience.

Next, we navigate to Settings > General > URLs and set the Application URL, Redirect URL and Relying Party ID to the following values (We will host our app on port 5173):

The app we will run with Bun is written in Vue.js and available in this Github repo. Clone the code with

git clone git@github.com:corbado/example-passkeys-vuejs.git

Create a .env file with the contents of .env.example. Afterwards fill in your projectID from step 3.

VITE_CORBADO_PROJECT_ID=pro-xxx

If you are using Linux or MacOS, you can install Bun with

curl -fsSL https://bun.sh/install | bash

For Windows users, we recommend using WSL, as Bun only provides a limited experimental build as of now.

Execute

bun install

and afterwards

bun --bun run dev

which should start your application. When visiting http://localhost:5173 you should see the following screen:

After successful sign up / login, you see the profile page:

Most Vue apps that reach for passkeys are the case this tutorial set aside in step 3 by choosing "No existing users": there is already a login and a user table, and both stay. Corbado Connect is built for that, and it adds passkeys to the app you run without moving anyone into a new pool.

• Mounting into a Vue app. connect-web-js exposes mountCorbadoConnectLogin, mountCorbadoConnectAppend and mountCorbadoConnectPasskeyList. Each one takes a plain DOM element and has a matching unmount call, so a Vue component can wire them up in onMounted and tear them down again. React apps get the same three from connect-react.
• A real version of the profile page. CorbadoConnectPasskeyList renders the credentials a user holds: provider name and icon resolved from the AAGUID, the browser and OS each was created with, when it was last used, plus Synced and Hybrid tags. That is the screen step 7 of this tutorial only stubs out.
• Styling is CSS, in your own stylesheet. The mounted markup is wrapped in a cb-connect container with a cb-connect-custom-style layer inside it, and you restyle the component by writing rules against those classes. There is no theme object to pass: CorbadoConnectProvider declares theme and customTranslations props, but neither is forwarded anywhere today, so treat the stylesheet as the whole customization surface.

Passkey Analysis in Corbado Observe then answers the question a tutorial cannot, because it separates users who hold a credential from users who hold one and log in with it. Creating a passkey is the easy half.

This tutorial showed how easy it is to run an application with passwordless authentication using Bun. For the passkey-first authentication Corbado's web component was used, providing simple session management that we used for the retrieval of basic user data. If you want to add Corbado to your existing app with existing users, see our Corbado Connect documentation.

About Corbado

Corbado is the Passkey Intelligence Platform for large-scale CIAM teams running consumer authentication. We help you see what IDP logs and generic analytics tools can't: where passkeys, passwords, OTP, social login and fallback journeys succeed, stall or fail, which devices and browsers create friction, and when an OS update silently breaks login. Two products: Corbado Observe layers process mining and observability across authentication journeys. Corbado Connect adds managed passkeys with analytics built in alongside your IDP. VicRoads runs passkeys for 5M+ users with Corbado (+80% passkey activation). Talk to a Passkey Expert →

Clone the Corbado Vue.js example repository from GitHub, then install Bun via the curl installer on Linux or macOS. Run 'bun install' to fetch dependencies, then 'bun --bun run dev' to start the app on localhost port 5173.

Bun only provides a limited experimental build for Windows at this time. The recommended approach for Windows developers is to use WSL (Windows Subsystem for Linux) to run the Bun passkey project.

In the Corbado developer panel under Settings > General > URLs, you must set the Application URL, Redirect URL and Relying Party ID to match your local hosting environment. You also need to copy your Corbado project ID into a .env file as the VITE_CORBADO_PROJECT_ID variable.

After successful passkey sign-up or login, Corbado's web component session management enables retrieval of basic user data such as profile information. For fetching backend data or adding passkeys to an app with existing users, Corbado offers separate documentation via Corbado Connect.