---
url: 'https://www.corbado.com/blog/astro-passkeys'
title: 'How to Implement Passkeys in Astro Apps '
description: 'Astro & Passkeys: Enhance your Astro apps with passkeys. Follow this tutorial to seamlessly integrate Corbado''s web-JS for secure logins.'
lang: 'en'
author: 'Amal'
date: '2024-08-01T09:24:23.423Z'
lastModified: '2026-04-15T06:00:36.887Z'
keywords: 'Astro passkey login, Secure login Astro, Astro authentication example, Astro passkeys, Astro webauthn, Astro, Astro passkeys, Astro webauthn, Astro passkey authentication, Corbado web-js integration, Secure login in Astro, Corbado Astro integration, astro'
category: 'Passkeys Implementation'
---

# How to Implement Passkeys in Astro Apps 

> ⚠️ **Archived tutorial - outdated integration**
>
> This article uses Corbado Complete, a discontinued product. Corbado now offers
> **[passkey observability and authentication for enterprise CIAM](https://www.corbado.com/features)**
>
> _The tutorial below is preserved for reference only and is no longer maintained._

## Key Facts

- **Corbado web-js** (`@corbado/web-js`) integrates passkey authentication into Astro apps
  via VanillaJS UI components, since Astro natively supports JavaScript. Install with
  `npm install @corbado/web-js`.
- The **Relying Party ID** must be a bare domain only (no protocol, port or path). For
  local development this means setting it to `localhost`, not `http://localhost:4321`.
- Selecting **Corbado Complete** in the developer panel enables both passkey
  authentication and session management, allowing retrieval of user data such as email
  post-login.
- A shared **corbadoSetup.js** initialization file centralizes the `Corbado.load()` call,
  making it reusable across the login and passkey list components without duplication.
- This tutorial targets **Astro version 4.12.3**, requiring Node.js and npm as the only
  prerequisites before adding passkey login.

## 1. Introduction: Astro Passkeys

In this blog post, we'll guide you through building an Astro application with passkey
login functionality using the
[Corbado web-js component](https://www.npmjs.com/package/@corbado/web-js). Astro is an
all-in-one web framework designed to simplify website creation. It boasts the performance
and Corbado simplifies the integration of secure passkey authentication into your web
apps. We'll show you how to embed Corbado's UI components and set up a secure login
system. If you want to see the complete code, check out our
[sample Astro passkey application repository on GitHub](https://github.com/corbado/example-passkeys-astro).
Here's a preview of the final [passkey login](https://www.corbado.com/blog/passkey-login-best-practices)
interface with Astro:
![Login Page of the Astro Passkeys App](https://www.corbado.com/website-assets/login_page_astro_passkeys_app_ca3c6d766c.png)

## 2. Prerequisites

This tutorial assumes you have a basic understanding of Astro, HTML, CSS, and JavaScript.
To get started, make sure you have [Node.js](https://www.corbado.com/blog/nodejs-passkeys) and Npm installed on
your machine. For this example, we'll be using the latest version of Astro (version
4.12.3). Let's start building our secure
[passkey login](https://www.corbado.com/blog/passkey-login-best-practices) application!

## 3. Repository Structure

Let's explore the structure of our repository
([full Astro passkeys GitHub repository](https://github.com/corbado/example-passkeys-astro)).
This organized architecture will help us efficiently manage and scale our Astro
application.

```
.
├── src
│   ├── components
│   │   └── PasskeyList.astro
│   ├── layouts
│   │   └── Layout.astro
│   ├── pages
│   │   ├── index.astro
│   │   └── profile.astro
├── .env
├── package.json
```

Here's a brief explanation of the relevant files and directories:

- `src/components/PasskeyList.astro`: Component for displaying the list of passkeys.
- `src/pages/index.astro`: Component for the sign-up/login screen.
- `src/pages/profile.astro`: Component for the user profile information shown after
  successful authentication.
- `.env`: Environment variables for configuring the application.
  

## 4. Set up the Astro Project

In this section, we'll explain step-by-step how to set up the Astro project. Let's get
started by initializing a new Astro project:

```bash
npm create astro@latest astro-passkeys-app
cd astro-passkeys-app
npm install
```

Next, install the necessary dependencies:

```bash
npm install @corbado/web-js
```

To start the development server and see the basic skeleton of your application, run:

```bash
npm run dev
```

Your application will start at `http://localhost:4321`. You should now see the basic
structure of your Astro application.
![Astro Basic App Interface](https://www.corbado.com/website-assets/astro_basic_app_interface_368051e81a.png)

## 5. Set Up the Corbado UI Components

To integrate Corbado's UI components in your Astro application, you need to follow these
steps.

### 5.1 Set Up your Corbado Account and Project

Visit the
[Corbado developer panel](https://app.corbado.com/signin#register?framework=Solid.js&technology=passkeys)
to sign up and create your account. You'll experience the passkey sign-up in action here!
![Corbado Developer Panel Interface](https://www.corbado.com/website-assets/corbado_developer_panel_interface_b5221dba8c.png)
In the project setup wizard, begin by selecting an appropriate name for your project. For
the product selection, opt for "Corbado Complete". Subsequently, select "DEV environment"
along with "Corbado session management" options. Afterwards, you'll get more foundational
setup guidance. Next, choose "Web app" as an application type and VanillaJS as your
frontend framework (as Astro supports JavaScript, we can use the VanillaJS UI components).
In the application settings, define your Application URL and
[Relying Party](https://www.corbado.com/glossary/relying-party) ID as follows:
![Configuration of the Astro Passkeys Project](https://www.corbado.com/website-assets/Screenshot_2024_08_01_at_09_47_33_bf7323984a.png)

- **Application URL**: Provide the URL where you embedded the UI component, here:
  `http://localhost:4321`
- **Relying Party ID**: Provide the domain (no protocol, no port, and no path) where
  passkeys should be bound to, here: `localhost` Lastly, navigate to the
  [Corbado project settings](https://app.corbado.com/app/settings/general/project-info) to
  find your project ID under Corbado API access. Then, store the project ID in your
  environment file. Your environment file should look like this:

```bash
PUBLIC_CORBADO_PROJECT_ID=<YOUR_PROJECT_ID>
```

You'll need this project ID later to embed the Corbado UI component in your Astro app.

### 5.2 Embed the UI Component in the Frontend

To get started with embedding the Corbado UI component in your Astro frontend, follow
these steps:

- **Initialize the Corbado Project**: The `corbadoSetup.js` file contains the shared logic
  for initializing Corbado. This file ensures that you only need to write the
  initialization logic once and reuse it across different components. Here’s the complete
  code of the `corbadoSetup.js` file:

```javascript
const projectId = import.meta.env.PUBLIC_CORBADO_PROJECT_ID;
export const loadCorbadoProject = async () => {
    await Corbado.load({
        projectId: projectId,
    });
};
```

- **Set Up the `Login` Component**: The `index.astro` component will handle user
  authentication by embedding Corbado's UI component. Here’s the complete code of the
  `index.astro` component:

```javascript
---
---
<html>
  <head>
    <title>Login</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.css"
    />
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
      }
      .container {
        text-align: center;
      }
      button {
        margin-top: 10px;
        padding: 10px 20px;
        font-size: 16px;
      }
    </style>
    <script src="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.js"
    ></script>
  </head>
  <body>
    <div class="container">
      <div id="corbado-auth"></div>
    </div>
    <script type="module">
      import { loadCorbadoProject } from "./corbadoSetup.js";
      const initializeCorbado = async () => {
        await loadCorbadoProject();
        const authElement = document.getElementById("corbado-auth");
        Corbado.mountAuthUI(authElement, {
          onLoggedIn: () => {
            window.location.href = "/profile";
          },
        });
      };
      initializeCorbado();
    </script>
  </body>
</html>
```

### 5.3 Set Up the Passkey List Component

The `PasskeyList.astro` component will display a list of passkeys. This component will be
integrated into the `Profile` component. Here’s the complete code of the
`PasskeyList.astro` component:

```javascript
<div id="passkey-list"></div>
<script type="module">
  import { loadCorbadoProject } from "./corbadoSetup.js";
  const initializePasskeyList = async () => {
    await loadCorbadoProject();
    const passkeyListElement = document.getElementById("passkey-list");
    if (Corbado.user) {
      Corbado.mountPasskeyListUI(passkeyListElement);
    }
  };
  initializePasskeyList();
</script>
```

### 5.4 Set Up the Profile Page

The `profile.astro` component will fetch and display user information using Corbado's API.
It will also provide a UI for managing passkeys and logging out. Here’s the complete code
of the `profile.astro` component:

```javascript
---
import PasskeyList from "../components/PasskeyList.astro";
---
<html>
  <head>
    <title>Profile</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.css"
    />
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
      }
      .container {
        text-align: center;
      }
      button {
        margin-top: 10px;
        padding: 10px 20px;
        font-size: 16px;
      }
    </style>
    <script src="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.js"
    ></script>
  </head>
  <body>
    <div class="container">
      <h1>Profile</h1>
      <div id="profile-content"></div>
      <PasskeyList />
      <button id="logout-button" style="display: none;">Logout</button>
    </div>
    <script type="module">
      import { loadCorbadoProject } from "./corbadoSetup.js";
      const initializeProfile = async () => {
        await loadCorbadoProject();
        const user = Corbado.user;
        const profileContent = document.getElementById("profile-content");
        const logoutButton = document.getElementById("logout-button");
        if (user) {
          profileContent.innerHTML = `<p>Welcome, ${user.email}</p>`;
          logoutButton.style.display = "block";
          logoutButton.addEventListener("click", () => {
            Corbado.logout();
            window.location.href = "/login";
          });
        } else {
          profileContent.innerHTML =
            '<p>Please <a href="/login">login</a> to view your profile.</p>';
        }
      };
      initializeProfile();
    </script>
  </body>
</html>
```

### 5.5 Start Using Passkeys

Now, when you start your development server with

```bash
npm run dev
```

and navigate to `http://localhost:4321`, you should see the authentication UI.
![Login Page of the Astro Passkeys App](https://www.corbado.com/website-assets/login_page_astro_passkeys_app_ca3c6d766c.png)
Once logged in, you'll be redirected to the profile page displaying user details and
passkey list feature.
![Profile Page of the Astro Passkeys App](https://www.corbado.com/website-assets/profile_page_astro_passkeys_app_c695bd8539.png)

## 6. Conclusion

In this tutorial, we've covered how to set up an Astro application with Corbado’s web-js
component for passkey authentication. This includes initializing an Astro project,
integrating Corbado for authentication, and creating a profile page with logout
functionality. With these steps, you should have a functional
[passkey login](https://www.corbado.com/blog/passkey-login-best-practices) system in your Astro application.
Besides the passkey-first authentication, Corbado provides simple session management, that
we used for a retrieval of basic user data. If you want to read more about how Corbado's
session management please
[check the docs here](https://docs.corbado.com/sessions/overview).

## Frequently Asked Questions

### How do I initialize Corbado only once across multiple components in an Astro app?

Create a shared `corbadoSetup.js` file that exports a `loadCorbadoProject()` async
function calling `Corbado.load()` with your project ID. Import and call this function in
each component (index.astro, PasskeyList.astro and profile.astro) to reuse the
initialization logic without duplicating it.

### Why should I use VanillaJS UI components from Corbado instead of a framework-specific package when building with Astro?

Astro supports JavaScript natively but does not require a specific frontend framework, so
the VanillaJS `@corbado/web-js` package is the correct choice. You select VanillaJS as the
frontend framework in the Corbado developer panel when configuring a Web app project.

### How do I configure the Application URL and Relying Party ID in Corbado for local Astro development?

Set the Application URL to `http://localhost:4321` (the default Astro dev server address)
and the Relying Party ID to `localhost` only, with no protocol, port or path included. The
Relying Party ID is the domain to which passkeys are cryptographically bound.

### How does session management work after a user logs in with a passkey in an Astro app using Corbado?

After a successful passkey login, Corbado exposes a `Corbado.user` object containing basic
user data such as email. Corbado Complete includes built-in session management, so no
separate session library is needed to retrieve and display that user information on the
profile page.