DEV Community

Cover image for How to Integrate Passkeys into JavaScript Apps
vdelitz for Corbado

Posted on • Originally published at Medium

How to Integrate Passkeys into JavaScript Apps

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.

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

<!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>
Enter fullscreen mode Exit fullscreen mode

5.2 Add Profile Page

Create a profile.html file with the following content:

<!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>
Enter fullscreen mode Exit fullscreen mode

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:

npm install --global http-server
Enter fullscreen mode Exit fullscreen mode

Navigate to your project directory and start the web server:

http-server ./
Enter fullscreen mode Exit fullscreen mode

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.

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

Top comments (1)

Collapse
 
aehnh profile image
Anders

😎