Bun Passkeys with Vue.js

We switched from web components to UI components. This blog post will soon be updated. Reach out via Slack if you need help.

Get help

1. Introduction

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:

2. Bun Passkey Project Prerequisites

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

3. Set Up Your Corbado Account and Project

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):

4. Clone Passkey Example Implementation

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

5. Configure Environment Variables

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

VITE_CORBADO_PROJECT_ID=pro-xxx

6. Install Bun

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.

7. Run Bun Passkey Project

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:

8. Conclusion

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 read more about how you can leverage Corbado's session management to retrieve backend data, please check out our documentation here or if you want to add Corbado to your existing app with existing users, please see our documentation here.