# @corbado/web-js
[](https://github.com/corbado/javascript/blob/main/LICENSE)
[](https://docs.corbado.com/frontend-integration/vanilla-js)
[](https://join.slack.com/t/corbado/shared_invite/zt-1b7867yz8-V~Xr~ngmSGbt7IA~g16ZsQ)
[](https://www.npmjs.com/package/@corbado/web-js)
---
## Table of Contents
- [Overview](#overview)
- [🚀 Getting Started](#-getting-started)
- [Option 1: Using NPM](#option-1-using-npm)
- [Option 2: Using script and style Tags](#option-2-using-script-and-style-tags)
- [📌 Usage](#-usage)
- [Usage with NPM](#usage-with-npm)
- [Initialization](#initialization)
- [Authentication UI](#authentication-ui)
- [Handling Passkey List UI](#handling-passkey-list-ui)
- [Handling Logout](#handling-logout)
- [Usage in HTML with script and style Tags](#usage-in-html-with-script-and-style-tags)
- [Initialization](#initialization-1)
- [Handling User Authentication State](#handling-user-authentication-state)
- [💡 Example Applications](#-example-applications)
- [📄 Documentation & Support](#-documentation--support)
- [ 🚢 Release Notes](#-release-notes)
- [🔒 License](#-license)
---
## Overview
The `@corbado/web-js` package enables easy integration of Corbado's authentication functionalities into web projects.
It can be used either by installing the package from NPM or by directly including it in your HTML files through script and style tags.
---
## 🚀 Getting Started
### Option 1: Using NPM
Install the package via NPM:
```bash
npm install @corbado/web-js
```
### Option 2: Using script and style Tags
Include the script and styles directly in your HTML:
```html
```
`@2` loads the most recent version of major version 2. Replace `@2` with a specific version number if you want to pin it. Use `@latest` if you always want to have the most recent version **including** majors (not recommended for production).
---
## 📌 Usage
### Usage with NPM
#### Initialization:
Import and initialize Corbado in your main JavaScript or TypeScript file:
```typescript
import Corbado from '@corbado/web-js';
await Corbado.load({
projectId: 'pro-XXXXXXXXXXXXXXXXXXXX',
});
```
**Note**: It's important to initialize Corbado before using any of its functionalities.
#### Authentication UI
Mount the authentication UI to your HTML element:
```html
```
#### Handling Passkey List UI:
Use the `Corbado.isAuthenticated` boolean to check if the user is logged in and to mount the passkey list UI:
```html
// In your JavaScript or TypeScript file after initializing Corbado if (Corbado.user) {
Corbado.mountPasskeyListUI(passkeyListHTMLElement); }
```
#### Handling Logout:
Use the `Corbado.isAuthenticated` boolean to check if the user is logged in and to handle logout:
```typescript
// In your JavaScript or TypeScript file after initializing Corbado
if (Corbado.isAuthenticated) {
logoutButton.addEventListener('click', async () => {
await Corbado.logout();
});
}
```
### Usage in HTML with script and style Tags
#### Initialization:
Initialize Corbado in a `
```
**Note**: It's important to initialize Corbado before using any of its functionalities.
#### Handling User Authentication State:
Use JavaScript to manage login/logout states and to mount the passkey list UI:
```html
```
**Note**:
- The use of the `type="module"` attribute is necessary to use ES6 modules in the browser. For more information, please refer to [this article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).
- Use of Corbado with `