Web component (deprecated)

​

Overview

The following page shows how to set up the pre-built Corbado web component. Using the web component saves you a lot of engineering time, comes with many of out-of-the-box features and can be easily integrated with existing authentication solutions.

​

Setup

1. Embed the web component into your site
2. Add additional HTML attributes (optional)
3. Adapt styling (optional)
4. Add session management (optional)
5. Define Application URL
6. Define Redirect URL
7. Verify Relying Party ID

​

1. Embed the web component into your site

You can install the Corbado web component via npm or add the JavaScript library via CDN.

npm install @corbado/webcomponent

import "@corbado/webcomponent/pkg/auth_cui.css";
import "@corbado/webcomponent";

<script src="https://<Project ID>.frontendapi.corbado.io/auth.js"></script>

Embed the Corbado web component by adding <corbado-auth/> to your login page:

<!-- Your website content -->

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

<!-- Your website content -->

​

2. Add additional HTML attributes (optional)

The following attributes for <corbado-auth/> exist:

If you want to use Conditional UI (what we recommend for the best UX), just copy and paste the inner <input/> element’s attributes like shown above. If not, you don’t need to insert the inner <input/> element at all.

​

3. Adapt styling (optional)

To adapt Corbado web component to your UI, you can modify the following style properties. Do so by adding CSS for the <corbado-auth/> web component:

<style>
  corbado-auth {
    --primary-color: #1953ff;
    --primary-color-rgb: 25, 83, 255;
    --primary-background-color: #1953ff;
    --primary-hover-color: #1145df;

    --secondary-font-color: #59acff;
    --secondary-background-color: transparent;
    --secondary-border-color: #59acff;

    --secondary-background-hover-color: transparent;
    --secondary-border-hover-color: #59acff;
    --secondary-font-hover-color: #59acff;
    --heading-color: #fff;
    --text-color: #d0d9f5;
    --text-disabled-color: #999;
    --light-color: #59acff; //also used for link colors
    --error-color: #ff4c51;
    --primary-font: "Space Grotesk", sans-serif;
    --secondary-font: "Inter", sans-serif;
    --border-color: rgba(143, 155, 191, 0.5);
    --email-provider-btn-color: rgba(143, 155, 191, 0.5);

    --border-radius: 25px;
    --border-container-width: 0; // outer border container
    --text-align: left;

    --email-link-resend-margin: 0px; // change margin of button at resend page
  }
</style>

​

4. Add session management (optional)

​

4.1 Session refresh

If you want to use Corbado’s session management, it is mandatory to include the JavaScript logic below on all of your pages. This ensures that session refresh functionality works seamlessly.

​

4.2 Session logout

Corbado provides functionality to logout the current user. The logout work as follows:

1. Corbado sends an AJAX call to your Frontend API.
2. The current session is revoked using your long-term session (represented as session ID with database entry).
3. In the response of the AJAX call, Corbado sends a delete cookie.
4. The short-term session cookie (represented as JWT) is deleted via JavaScript.

import { useEffect } from 'react';
import Corbado from '@corbado/webcomponent';

function App() {
const session = new Corbado.Session('<Project ID>');

    useEffect(() => {
        // 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
        });
    }, [session]);

    const handleLogout = () => {
        session.logout()
            .then(() => {
                // Here, you can define what happens after the user is logged out
            })
            .catch(err => {
                console.error(err);
            });
    }

    return (
        <div>
            {/* Render your UI here */}
            <button onClick={handleLogout}>Logout</button>
        </div>
    );

}

export default App;

If you want to find out how you can get data via Corbado session management, please see:

​

5. Define Application URL

Please provide the URL where the web component runs (incl. protocol, port & path) as Application URL in “Settings” - “General” - “URLs”. The Application URL is used, among others, to correctly direct users to the web component again, when they have clicked on an email magic link.

Often, it is on the same domain like the authorized origin.

​

6. Define Redirect URL

Once a user has authenticated successfully (either with passkey, email magic link or password), the user redirected to the Redirect URLin the browser.

Provide the Redirect URL (incl. protocol, port and path) in “Settings” - “General” - “URLs”, e.g.:

• https://www.my-application.com/redirectUrl for a live application
• http://localhost:8080/redirectUrl for localhost

​

7. Verify Relying Party ID

By default the WebAuthn Relying Party ID will be set to <project ID>.preview.corbado.io for previews and localhost for web component integration. This is where the passkeys are bound to. You can only use passkeys in a web component that runs in a matching domain of the Relying Party ID. Matching domains means that it’s either the same or a subdomain of the Relying Party ID.

Provide the Relying Party ID (without protocol, port and path) in “Settings” - “General” - “URLs”, e.g.:

• my-application.com for a live application
• localhost for localhost

​

Next steps

After you made the inital settings for the web component, there are two ways depending on if you create an entirely new application (greenfield) without existing users or if you already have users that login with a password.

1. New application (no existing users)
2. Existing application (with existing users)