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.

Before you start integrating, please follow Getting started to setup your project at the developer panel.

If you use React or VanillaJS as your tech stack, we highly recommend to use the new React components or VanillaJS components.


  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.

Install the web component via NPM:

npm install @corbado/webcomponent

Next, include the package in the module where you plan to utilize the web component, and import the styling file accordingly:

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

Use the web component via CDN:

To add the Corbado JavaScript library to your website, simply insert the following code on the same page where you want to add the web component.

Must be put in <body>part, not in<head>!

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

<!-- Your website content -->

2. Add additional HTML attributes (optional)

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

AttributeExplanationDefault value
project-idThis should be the project ID of your project.-
company-image-urlYou can provide a URL for the company logo which will be displayed in the top of the web component. For best performance, the logo should have a maximum height of 80px.-
conditionalIf you want to use Conditional UI, you need to set this attribute to “yes” and add the inner <input/> element.no
pageYou can decide if “login” or “register” page should be displayed at first, when somebody sees the web component.login
register-titleChange the title of the sign-up screen of the web component.null
register-btnChange the button text of the sign-up button of the web component.null
login-titleChange the title of the login screen of the web component.null
login-btnChange the button text of the login button of the web component.null
sub-titleChange the sub tile of the login screen of the web component (it can also be empty).Welcome back! Please enter your details
endpointThis should be your Frontend API.https://<project ID>.frontendapi.corbado.io
usernamePre-fill the username (email address) input field with a value of your choice. If there is no username HTML attribute set or it is empty, LocalStorage is searched for a key username that is then taken instead. If that doesn’t exist, the pre-fill will be empty.-
user-full-namePre-fill the userFullName input field with a value of your choice.-
passkey-append-textChange the text of the passkey-append-screenLogin event faster with Touch ID, Face ID or PIN
disable-input-animationRemove the animation of the labels for input fieldsno

The inner <input /> element is needed to make Conditional UI available as some browsers currently do not support Conditional UI in web components.

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.

Remember that the <corbado-auth/> web component varies in height depending on the number of textfields / buttons that are currently visible.

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:

Adapted Styles
  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

To adjust the styling, you can use a service like https://jsfiddle.net/ and see your results directly.

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 = () => {
            .then(() => {
                // Here, you can define what happens after the user is logged out
            .catch(err => {

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


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.

Application URL in Developer Panel

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

Redirect URL in Developer Panel

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

If you develop locally on http://localhost:<port>, please set the Relying Party ID to localhost.

We highly recommend to take at our detailed blog post about the Relying Party ID.

Relying Party ID in Developer Panel

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)