Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@corbado/webcomponent

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@corbado/webcomponent

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

1.0.25
npm

Version published: 2 years ago

Weekly downloads: 118; decreased by-13.87%

Maintainers: 2

Weekly downloads

Created: 2 years ago

Source

@corbado/webcomponent

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

Installation

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 as an ES module

Install the package with npm

npm install @corbado/webcomponent

After installing, import Corbado into your JavaScript files and initialize it with your Frontend API.

Install as a script

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>

Usage

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.

Vanilla 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>

React

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(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>
    )
}

Vue.js

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')

Getting help

Have questions or need help? Here's how you can reach us:

Join our Slack community
Visit our Support page for more contact options

Security

@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

What is @corbado/webcomponent?

Is @corbado/webcomponent popular?

Is @corbado/webcomponent well maintained?

Package last updated on 15 Jun 2023

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.

Install