@corbado/web-js v2.8.0
@corbado/web-js
Table of Contents
- Overview
- 🚀 Getting Started
- 📌 Usage
- 💡 Example Applications
- 📄 Documentation & Support
- 🚢 Release Notes
- 🔒 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:
npm install @corbado/web-js
Option 2: Using script and style Tags
Include the script and styles directly in your HTML:
<link
rel="stylesheet"
href="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.css"
/>
<script src="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.js"></script>
Replace @latest
with the specific version number you intend to use.
📌 Usage
Usage with NPM
Initialization:
Import and initialize Corbado in your main JavaScript or TypeScript file:
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:
<script>
const authElement = document.getElementById('corbado-auth');
// In your JavaScript or TypeScript file after initializing Corbado
Corbado.mountAuthUI(authElement, {
onLoggedIn: () => {
window.location.href = '/';
},
});
</script>
<div id="corbado-auth"></div>
Handling Passkey List UI:
Use the Corbado.isAuthenticated
boolean to check if the user is logged in and to mount the passkey list UI:
// In your JavaScript or TypeScript file after initializing Corbado if (Corbado.user) {
Corbado.mountPasskeyListUI(passkeyListHTMLElement); }
<script>
const passkeyListElement = document.getElementById('passkey-list');
// In your JavaScript or TypeScript file after initializing Corbado
if (Corbado.isAuthenticated) {
Corbado.mountPasskeyListUI(passkeyListElement);
}
</script>
<div id="passkey-list"></div>
Handling Logout:
Use the Corbado.isAuthenticated
boolean to check if the user is logged in and to handle logout:
// 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 <script>
tag within your HTML:
<script type="module">
await Corbado.load({
projectId: 'pro-XXXXXXXXXXXXXXXXXXXX',
});
// Additional JavaScript to manage UI
</script>
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:
<script type="module">
if (!Corbado.user) {
// Handle login state
} else {
// Handle logout state and mount passkey list
}
</script>
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. - Use of Corbado with
<script>
tag is similar to using it with NPM, except that you don't need to import the package and you can use theCorbado
object directly from the global scope.
💡 Example Applications
- For a detailed example using the package from NPM checkout the example application and its source code
- For an example using script and style tags directly in HTML checkout the example application and its source code
📄 Documentation & Support
For support and questions please visit our Slack channel. For more detailed information and advanced configuration options, please visit our Documentation Page.
🚢 Release Notes
Find out what we've shipped! Check out the changelog files here
🔒 License
This project is licensed under the MIT License - see the LICENSE file for details.
11 days ago
17 days ago
18 days ago
19 days ago
19 days ago
23 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago