---
url: 'https://www.corbado.com/blog/solidjs-passkeys'
title: 'How to Implement Passkeys in SolidJS Apps'
description: 'SolidJS & Passkeys: Enhance your SolidJS apps with passkeys. Follow this tutorial to seamlessly integrate Corbado''s web-JS for secure logins. '
lang: 'en'
author: 'Amal'
date: '2024-07-30T13:05:26.495Z'
lastModified: '2026-03-25T10:00:38.226Z'
keywords: 'solid.js, solidjs, Solid.js passkey login,  Solid.js Corbado integration, Secure login Solid.js, Solid.js authentication example, solid.js passkeys, solid passkeys, solid.js webauthn, solid webauthn, solid.js , SolidJS passkeys, SolidJS webauthn'
category: 'Passkeys Implementation'
---

# How to Implement Passkeys in SolidJS Apps

## Key Facts

- SolidJS passkey integration uses the **@corbado/web-js** npm package with VanillaJS UI
  components, since SolidJS supports JavaScript and requires no framework-specific SDK.
- The **Relying Party ID** must be the bare domain only: no protocol, no port and no path.
  For local development, set it to "localhost".
- Corbado's **mountAuthUI** method attaches the authentication UI to any DOM element and
  accepts an onLoggedIn callback to handle post-login routing.
- The **mountPasskeyListUI** method renders a passkey management UI on the profile page,
  letting users view and manage their registered credentials.
- Corbado's **session management** exposes user data including user ID and email via the
  Corbado.user object after successful passkey authentication.

## 1. Introduction: SolidJS Passkeys

In this blog post, we will guide you through the process of creating a SolidJS application
with [passkey login](https://www.corbado.com/blog/passkey-login-best-practices) functionality using the Corbado
web-js component. SolidJS is a reactive UI library that offers excellent performance and
reactivity, and Corbado provides a seamless way to integrate passkey authentication into
your web applications. We will cover how to embed Corbado's UI components and implement
secure login functionality.

If you want to see the complete code, check out our
[sample SolidJS passkey application repository on GitHub](https://github.com/corbado/example-passkeys-solidjs).

Here's a preview of the final [passkey login](https://www.corbado.com/blog/passkey-login-best-practices)
interface with SolidJS:

![SolidJS Passkeys Login Interface](https://www.corbado.com/website-assets/solidjs_passkeys_login_26b0cd77b8.png)

## 2. Prerequisites

This tutorial assumes you have a basic understanding of SolidJS, 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 SolidJS. Let's start building our
secure [passkey login](https://www.corbado.com/blog/passkey-login-best-practices) application!

## 3. Repository Structure

Let's take a closer look at the structure of our repository
([full SolidJS passkeys GitHub repository](https://github.com/corbado/example-passkeys-solidjs)).
This structure will help us organize our SolidJS application efficiently, making it easier
to manage and scale.

```
.
├── .env
├── index.html
├── package.json
└── src
    ├── assets
    ├── components
    │   ├── Auth
    │   │   ├── Auth.jsx
    │   │   └── Auth.module.css
    │   ├── Profile
    │   │   ├── Profile.jsx
    │   │   └── Profile.module.css
    │   ├── App.jsx
    │   └── App.module.css
    ├── index.css
    ├── index.jsx
```

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

- `src/`: The main source directory for our application.
    - `components/`: Contains all the components used in the application.
        - `Auth/`: Contains the `Auth.jsx` component and its corresponding CSS module
          (`Auth.module.css`). This component handles the authentication UI.

        - `Profile/`: Contains the `Profile.jsx` component and its corresponding CSS
          module (`Profile.module.css`). This component displays the user profile and
          logout functionality.

    - `App.jsx`: The main application component that sets up routing and renders other
      components.

    - `App.module.css`: CSS module for styling the App.jsx component.

    - `index.jsx`: The entry point of the application. It initializes and renders the root
      component.

- `.env`: Environment variables for configuring the application.

- `index.html`: The main HTML file for the application.

## 4. Set up the SolidJS Project

In this section, we'll explain step-by-step how to set up the SolidJS project.

Let's get started by initializing a new SolidJS project:

```bash
npx degit solidjs/templates/js solid-passkeys-app
cd solid-passkeys-app
npm install
```

Next, install the necessary dependencies:

```bash
npm install @corbado/web-js solid-app-router
```

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:3000`. You should now see the basic
structure of your SolidJS alication.

![SolidJS Basic App Interface](https://www.corbado.com/website-assets/solidjs_app_interface_900d897669.png)

## 5. Set up the Corbado UI Components

In order to integrate the Corbado's UI components in your SolidJS 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/#login-init?framework=Solid.js&technology=passkeys)
to sign up and create your account. You'll experience the passkey sign-up in action here!

![Screens screenshot of a login screen Description automatically generated](37ece1c24879b0fcf46fbc38ec689f26.png)![Corbado Developer Panel](https://www.corbado.com/website-assets/corbado_developer_panel_e3a116b68c.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 Vanilla as your frontend framework (as
SolidJS 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:

![SolidJS Project Configuration](https://www.corbado.com/website-assets/solidjs_project_configuration_e464372563.png)

- **Application URL**: Provide the URL where you embedded the UI component, here:
  `http://localhost:3000`

- **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
VITE_CORBADO_PROJECT_ID=<your-project-id>
```

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

### 5.2 Embed the UI Component in the Frontend

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

- **Set Up the `Auth` Component**:

The `Auth` component will handle user authentication by embedding Corbado's UI component.

Here’s the complete code of the `Auth` component:

```javascript
import { onMount } from "solid-js";
import Corbado from "@corbado/web-js";
import styles from "./Auth.module.css";

function Auth() {
    onMount(async () => {
        try {
            await Corbado.load({
                projectId: import.meta.env.VITE_CORBADO_PROJECT_ID,
            });

            const authElement = document.getElementById("corbado-auth");
            Corbado.mountAuthUI(authElement, {
                onLoggedIn: () => {
                    window.location.href = "/profile";
                },
            });
        } catch (error) {
            console.error("Error initializing Corbado:", error);
        }
    });

    return (
        <div class={styles["auth-container"]}>
            <div id="corbado-auth"></div>
        </div>
    );
}

export default Auth;
```

- **Set Up Routing in the `App` Component**:

Configure the `App` component to use the `Auth` component for the root path and the
`Profile` component for the `/profile` path.

Here’s the complete code of the `App` component:

```javascript
import Auth from "./components/Auth/Auth";
import { Router, Route } from "@solidjs/router";
import Profile from "./components/Profile/Profile";
function App() {
    return (
        <Router>
            <Route path="/" component={Auth} />
            <Route path="/profile" component={Profile} />
        </Router>
    );
}

export default App;
```

### 5.3 Set Up the Profile Page

The `Profile` 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` component:

```javascript
import { onMount, createEffect } from "solid-js";
import Corbado from "@corbado/web-js";
import { createSignal } from "solid-js";
import styles from "./Profile.module.css";

function Profile() {
    const [userId, setUserId] = createSignal(null);
    const [userEmail, setUserEmail] = createSignal(null);
    const [isLoading, setIsLoading] = createSignal(true);

    onMount(async () => {
        try {
            await Corbado.load({
                projectId: import.meta.env.VITE_CORBADO_PROJECT_ID,
            });

            if (Corbado.user) {
                setUserId(Corbado.user.sub);
                setUserEmail(Corbado.user.email);
            } else {
                window.location.href = "/";
            }
        } catch (error) {
            console.error("Error loading Corbado:", error);
        } finally {
            setIsLoading(false);
        }
    });

    const handleLogout = async () => {
        try {
            await Corbado.logout();
            window.location.href = "/";
        } catch (error) {
            console.error("Error during logout:", error);
        }
    };

    createEffect(() => {
        if (!isLoading() && userId() && userEmail()) {
            const passkeyListElement = document.getElementById("passkey-list");
            if (passkeyListElement) {
                Corbado.mountPasskeyListUI(passkeyListElement);
            }
        }
    });

    return (
        <div class={styles["profile-container"]}>
            <h1>Profile Page</h1>
            {isLoading() ? (
                <p>Loading user information...</p>
            ) : userId() && userEmail() ? (
                <div>
                    <p class={styles["profile-info"]}>User ID: {userId()}</p>
                    <p class={styles["profile-info"]}>Email: {userEmail()}</p>
                    <button
                        id="logout-button"
                        class={styles["logout-button"]}
                        onClick={handleLogout}
                    >
                        Logout
                    </button>
                    <div id="passkey-list" class={styles["passkey-list"]}></div>
                </div>
            ) : (
                <p>Error fetching user information.</p>
            )}
        </div>
    );
}

export default Profile;
```

### 5.4 Start Using Passkeys

Now, when you start your development server with

```bash
npm run dev
```

and navigate to `http://localhost:3000`, you should see the authentication UI.

![SolidJS Passkeys Login Interface](https://www.corbado.com/website-assets/solidjs_passkeys_login_26b0cd77b8.png)

Once logged in, you'll be redirected to the profile page displaying user details and
passkey list feature.

![Profile Page of the SolidJS Passkeys](https://www.corbado.com/website-assets/profile_page_solidjs_passkeys_af6e546daf.png)

## 6. Conclusion

In this tutorial, we've covered how to set up a SolidJS application with Corbado’s web-js
component for passkey authentication. This includes initializing a SolidJS project,
integrating Corbado for authentication, and creating a profile page with logout
functionality. With these steps, you should have a functional passkey login system in your
SolidJS 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

### Which npm packages do I need to add passkey login to a SolidJS app?

You need two packages: @corbado/web-js for the passkey authentication UI and
@solidjs/router for client-side routing between the auth and profile pages. Install them
with: npm install @corbado/web-js solid-app-router.

### How do I configure my Corbado project for local SolidJS development?

In the Corbado developer panel, set your Application URL to http\://localhost:3000 and
your Relying Party ID to "localhost" (no protocol, port or path). Select "Web app" as the
application type and Vanilla as your frontend framework, since SolidJS is compatible with
VanillaJS UI components.

### How do I redirect a user to the profile page after a successful passkey login in SolidJS?

Pass an onLoggedIn callback to Corbado.mountAuthUI, then set window\.location.href to your
profile route inside that callback. The Auth component calls this method inside SolidJS's
onMount lifecycle hook to ensure the DOM element exists before mounting the UI.

### How do I let authenticated users manage their passkeys in a SolidJS profile page?

After confirming the user is authenticated via the Corbado.user object, call
Corbado.mountPasskeyListUI and pass a reference to a dedicated DOM element. In the
tutorial this is triggered inside a createEffect hook that runs once loading is complete
and user data is available.