How to Integrate Passkeys into JavaScript Apps
Tags: javascript, webdev, passkeys, beginners
Published: 2024-05-15 08:00:00

## 1. Introduction
In this tutorial, we'll guide you through creating a sample application that uses passkey authentication with Vanilla JavaScript. We'll utilize Corbado's Vanilla JavaScript component to streamline the implementation process, ensuring a smooth user experience.
For the complete code, visit our [GitHub repository](https://github.com/corbado/example-passkeys-javascript).

## 2. JavaScript Passkey Project Prerequisites
Before we begin, ensure you have a basic understanding of HTML and JavaScript. Additionally, Node.js and NPM must be installed on your machine as we'll use an npm package to run the project.

## 3. Repository Structure for JavaScript Passkey Project

Our project repository consists of two HTML files: `index.html` for the login page and `profile.html` for the profile page accessible after login.

## 4. Set up Your Corbado Account and Project

1. Sign up on the [Corbado developer panel](https://app.corbado.com/signin#register).
2. Create a new project named appropriately and select "Corbado Complete" as the product.
3. Choose your technology stack and select "DEV" and "Corbado session management" options.
4. In the project settings, navigate to `Settings > General > URLs` and configure the following:

- Application URL: `http://localhost:8080`
- Relying Party ID: `localhost`

## 5. Create Vanilla HTML / JavaScript App

### 5.1 Create Passkey Login Page
Create a project folder and add an `index.html` file with the following content:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Corbado</title>
    <link rel="stylesheet" href="https://unpkg.com/@corbado/web-js@2.5.5/dist/bundle/index.css" />
    <script src="https://unpkg.com/@corbado/web-js@2.5.5/dist/bundle/index.js"></script>
</head>
<body>
    <div id="corbado-auth"></div>
    <script type="module">
        await Corbado.load({
            projectId: "pro-2796694128247001826",
        });
        const authElement = document.getElementById('corbado-auth');
        Corbado.mountAuthUI(authElement, {
            onLoggedIn: () => {
                window.location.href = '/profile.html';
            },
            isDevMode: true,
        });
    </script>
</body>
</html>
```

### 5.2 Add Profile Page
Create a `profile.html` file with the following content:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Corbado</title>
    <link rel="stylesheet" href="https://unpkg.com/@corbado/web-js@2.5.5/dist/bundle/index.css" />
    <script src="https://unpkg.com/@corbado/web-js@2.5.5/dist/bundle/index.js"></script>
</head>
<body>
    <div>
        <h1>Profile Page</h1>
        <div>
            <p id="info"></p>
            <button id="auth-button"></button>
        </div>
    </div>
    <script type="module">
        await Corbado.load({
            projectId: "pro-2796694128247001826",
        });
        const createButton = (text, clickHandler) => {
            const buttonElement = document.getElementById('auth-button');
            buttonElement.innerHTML = text;
            buttonElement.onclick = clickHandler;
            return buttonElement;
        };
        const addLoginButton = () => {
            return createButton('Login', () => {
                window.location.href = '/index.html';
            });
        };
        const addLogoutButton = () => {
            return createButton('Logout', async () => {
                await Corbado.logout();
                window.location.href = '/index.html';
            });
        };
        if (!Corbado.user) {
            document.getElementById('info').innerHTML = `This content is only available to logged in users.`;
            addLoginButton();
        } else {
            document.getElementById('info').innerHTML = `
                User-ID: ${Corbado.user.sub}<br/>
                Email: ${Corbado.user.email}
            `;
            addLogoutButton();
        }
    </script>
</body>
</html>
```

## 6. Start Using Passkeys with Our JavaScript Implementation

To run your application, you'll need a simple web server. Install `http-server` globally with npm:

```bash
npm install --global http-server
```
Navigate to your project directory and start the web server:

```
http-server ./
```
Visit `http://localhost:8080` in your browser to view the application.

## 7. Conclusion

This tutorial demonstrated how to integrate passkey authentication into a basic HTML/JavaScript application using Corbado's Vanilla JavaScript component. For more information on session management and user data retrieval, refer to the [Corbado documentation](https://docs.corbado.com/sessions/overview).

By following these steps, you can easily add passwordless authentication to your applications, enhancing security and user experience.