How to Implement Passkeys in SolidJS Apps

In this blog post, we will guide you through the process of creating a SolidJS application with passkey login 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.

Here's a preview of the final passkey login interface with SolidJS:

This tutorial assumes you have a basic understanding of SolidJS, HTML, CSS, and JavaScript. To get started, make sure you have Node.js 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 application!

Subscribe to our Passkeys Substack for the latest news, insights and strategies.

Subscribe

Let's take a closer look at the structure of our repository (full SolidJS passkeys GitHub repository). 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.

Become part of our Passkeys Community for updates and support.

Join

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:

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

Next, install the necessary dependencies:

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

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

npm run dev

Your application will start at http://localhost:3000. You should now see the basic structure of your SolidJS alication.

In order to integrate the Corbado's UI components in your SolidJS application, you need to follow these steps.

Visit the Corbado developer panel to sign up and create your account. You'll experience the passkey sign-up in action here!

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 ID as follows:

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

VITE_CORBADO_PROJECT_ID=<your-project-id>

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

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:

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:

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;

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:

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;

Now, when you start your development server with

npm run dev

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

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

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.