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
- Sign up on the Corbado developer panel.
- Create a new project named appropriately and select "Corbado Complete" as the product.
- Choose your technology stack and select "DEV" and "Corbado session management" options.
- In the project settings, navigate to
Settings > General > URLsand 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>
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>
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
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.
By following these steps, you can easily add passwordless authentication to your applications, enhancing security and user experience.
Top comments (1)
😎