@corbado/webcomponent
Advanced tools
The `@corbado/webcomponent` JavaScript library empowers developers to build seamless passkey-first authentication into their applications. It facilitates user sign-up, login, and session management operations directly from your JavaScript (Frontend).
The @corbado/webcomponent JavaScript library empowers developers to build seamless passkey-first authentication into
their applications. It facilitates user sign-up, login, and session management operations directly from your
JavaScript (Frontend).
You can install @corbado/webcomponent either as an ES module via npm, or load it as a script in your HTML. Both
methods are discussed below.
Install the package with npm
npm install @corbado/webcomponent
After installing, import Corbado into your JavaScript files and initialize it with your Frontend API.
To load Corbado directly in your HTML using a <script/> tag, add the following script:
<script defer src="https://auth.corbado.com/auth.js"></script>
The usage of @corbado/webcomponent differs slightly depending on your choice of JavaScript or a frontend framework.
Examples are provided below for vanilla JavaScript, React, and Vue.js.
Include corbado-auth-provider and corbado-auth tags in your HTML:
<body>
<corbado-auth-provider endpoint="<Frontend API>">
<corbado-auth endpoint="<Frontend API>" conditional="yes">
<input id="corbado-username" autocomplete="webauthn" name="username" required value=""/>
</corbado-auth>
</corbado-auth-provider>
</body>
Use @corbado/webcomponent in your React components:
// ... your other imports
import Corbado from '@corbado/webcomponent';
import '@corbado/webcomponent/pkg/auth_cui.css';
const frontendAPI = 'https://<project ID>.auth.corbado.com';
const corbado = new Corbado.Session('<project ID>', frontendAPI);
function App() {
// ... your other hooks
let [currentUser, setCurrentUser] = useState(null);
async function logout() {
await corbado.logout();
}
// Initialize the session
corbado.initialize(user => {
setCurrentUser(user)
});
return (
<corbado-auth endpoint={corbadoAuthenticationURL} conditional="yes">
<input id="corbado-username" autoComplete="webauthn" name="username" required value=""/>
</corbado-auth>
)
}
Use corbado-auth-provider and corbado-auth tags in your Vue templates:
<template>
<corbado-auth-provider endpoint="<Frontend API>">
<corbado-auth endpoint="<Frontend API>" conditional="yes">
<input id="corbado-username" autocomplete="webauthn" name="username" required value=""/>
</corbado-auth>
</corbado-auth-provider>
</template>
<script setup>
import "@corbado/webcomponent"
import "@corbado/webcomponent/pkg/auth_cui.css"
</script>
Vue.js 3 setup:
export default defineConfig(({command, mode, ssrBuild}) => {
console.log(command, mode, ssrBuild)
return {
build: {
sourcemap: command === 'build',
},
plugins: [
vue({
template: {
transformAssetUrls,
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('corbado-')
},
},
}),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
}),
],
define: {'process.env': {}},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
],
},
server: {
port: 3000,
},
}
})
Vue.js 2 setup:
import {i18n} from '@/plugins/i18n'
import '@/plugins/vue-composition-api'
import '@/styles/styles.scss'
import Vue from 'vue'
import App from './App.vue'
import './plugins/acl'
import vuetify from './plugins/vuetify'
import router from './router'
import store from './store'
Vue.config.productionTip = false
Vue.config.ignoredElements = [
'corbado-auth',
]
new Vue({
router,
store,
i18n,
vuetify,
render: h => h(App),
}).$mount('#app')
Have questions or need help? Here's how you can reach us:
@corbado/webcomponent follows good practices of security, but 100% security cannot be assured.
@corbado/webcomponent is provided "as is" without any warranty. Use at your own risk.
FAQs
The `@corbado/webcomponent` JavaScript library empowers developers to build seamless passkey-first authentication into their applications. It facilitates user sign-up, login, and session management operations directly from your JavaScript (Frontend).
The npm package @corbado/webcomponent receives a total of 72 weekly downloads. As such, @corbado/webcomponent popularity was classified as not popular.
We found that @corbado/webcomponent demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.