@corbado/webcomponent NPM

@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 scripts with your Project ID:

<script src="https://<Project ID>.frontendapi.corbado.io/auth.js"></script>
<!-- Only required for Vanilla HTML / JS, see below-->
<script src="https://<Project ID>.frontendapi.corbado.io/utility.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:

React
Vue.js
HTML custom elements
Vanilla HTML / JS

React

Use @corbado/webcomponent in your React components:

// ... your other imports
import Corbado from '@corbado/webcomponent';
import '@corbado/webcomponent/pkg/auth_cui.css';

const corbado = new Corbado.Session('<project ID>');

function App() {
    const session = new Corbado.Session("<Project ID>");
    let [currentUser, setCurrentUser] = useState(null);

    useEffect(() => {
        session.refresh(user => {
            setCurrentUser(user);
        });
    }, [session]);

    const handleLogout = async () => {
       await session.logout();
    }

    return (
        <div>
            <corbado-auth project-id="<Project ID>" conditional="yes">
                <input id="corbado-username" autoComplete="webauthn" name="username" required/>
            </corbado-auth>
            <button onClick={handleLogout}>Logout</button>
        </div>
    )
}

Vue.js

Use corbado-auth-provider and corbado-auth tags in your Vue templates:

<template>
  <corbado-auth-provider project-id="<Project ID>">
    <corbado-auth project-id="<Project ID>" conditional="yes">
      <input id="corbado-username" autocomplete="webauthn" name="username" required/>
    </corbado-auth>
  </corbado-auth-provider>
</template>

<script>
import "@corbado/webcomponent"
import "@corbado/webcomponent/pkg/auth_cui.css"

export default {
  name: 'App',
  setup() {
    return {
      session: new Corbado.Session('<Project ID>'),
    }
  },
  mounted() {
    // Register a callback for session refresh
    // in order to receive an authentication event
    this.session.refresh(user => {
      // Here, you can define what happens when the session is initialized
      // if user is null, then the user is not logged in
    });
  },
  methods: {
    handleLogout() {
      this.session.logout()
          .then(() => {
            // Here, you can define what happens after the user is logged out
          })
          .catch(err => {
            console.error(err);
          });
    }
  }
}
</script>

Vue.js 3 setup:

export default defineConfig(({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')

HTML custom elements

Include corbado-auth-provider and corbado-auth tags in your HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Corbado</title>
</head>
<body>
<script src="https://<Project ID>.frontendapi.corbado.io/auth.js"></script>
<!-- Use the corbado-auth-provider custom element in your HTML. -->
<corbado-auth-provider project-id="<Project ID>">
    <!-- Only displayed if the user is not logged in -->
    <div slot="unauthed">
        <corbado-auth project-id="<%Project ID>" conditional="yes">
            <input name="username" id="corbado-username"
                   data-input="username" required
                   autocomplete="webauthn"/>
        </corbado-auth>
    </div>

    <!-- Only displayed if the user is logged in -->
    <div slot="authed">
        You're logged in.
        <corbado-logout-handler project-id="<Project ID>"
                                redirect-url="https://www.acme.com">
            <button>Logout</button>
        </corbado-logout-handler>
    </div>

    <!-- Always displayed -->
    <div>
        You're logged in.
        <corbado-logout-handler project-id="<Project ID>"
                                redirect-url="https://www.acme.com">
            <button>Logout</button>
        </corbado-logout-handler>
    </div>
</corbado-auth-provider>
</body>
</html>

Vanilla HTML / JS

Include corbado-auth-provider and corbado-auth tags in your HTML:

<!DOCTYPE html>
<html>
<head>
<title>Corbado</title>
<!-- Import Corbado SDK -->
</head>
<body>
<script src="https://<Project ID>.frontendapi.corbado.io/auth.js"></script>
<script src="https://<Project ID>.frontendapi.corbado.io/utility.js"></script>
    <!-- Logout button -->
    <button id="logoutButton">Logout</button>

    <script>
        // Create a new session
        const session = new Corbado.Session('<Project ID>');

        // Register a callback for session refresh
        // in order to receive an authentication event
        session.refresh(user => {
            // Here, you can define what happens when the session is initialized
            // if user is null, then the user is not logged in
        });

        // Get logout button
        const logoutButton = document.getElementById('logoutButton');

        // Add event listener to logout button
        logoutButton.addEventListener('click', function() {
            session.logout()
                .then(() => {
                    // Here, you can define what happens after the user is logged out
                })
                .catch(err => {
                    console.error(err);
                });
        });
    </script>
</body>
</html>