Links

Web component

This guide shows how to integrate the Corbado web component into your website.

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.
Before you start integrating, please follow Getting started to setup your project at the developer panel.
If you want to integrate your existing user base and want to test locally (or with multiple devices), please have a look at our guide with ngrok.

Setup

1. Embed the web component into your site

To embed Corbado web component into your site, add the Corbado script inside the <head/> and <corbado-auth/> web component inside the <body/> of your login page:
<CNAME> is by default the CNAME provided by Corbado (<project ID>.auth.corbado.com) or any CNAME provided by you (see also Push to production).
<html>
<head>
<script defer src="https://<CNAME>/auth.js"></script>
</head>
<body>
<!-- Your website content -->
<corbado-auth endpoint="https://<CNAME>" conditional="yes">
<input name="username" id="corbado-username" value=""
required autocomplete="webauthn" autofocus/>
</corbado-auth>
<!-- Your website content -->
</body>
</html>
The following attributes for <corbado-auth/> exist:
Attribute
Explanation
Default value
endpoint
This should be the CNAME where your app is running. Corbado provides you with a CNAME for developing: <project ID>.auth.corbado.com
-
companyimageurl
You 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.
-
conditional
If you want to use Conditional UI, you need to set this attribute to "yes" and add the inner <input/> element.
no
page
You can decide if "login" or "register" page should be displayed at first, when somebody sees the web component.
login
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.
You don't need to host the auth.js file yourself because https://<CNAME>/auth.js points to https://auth.corbado.com/auth.js, where the file is located.
Remember that the <corbado-auth/> web component varies in height depending on the number of textfields / buttons that are currently visible.

2. 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: #fff;
--secondary-background-color: transparent;
--secondary-border-color: #fff;
--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;
--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);
}
</style>
To adjust the styling, you can use a service like https://jsfiddle.net/ and see your results directly.

3. Define Redirect URL

Once a user has authenticated successfully (either with passkey, email magic link or password), he is forwarded to the Redirect URL with a sessionToken as HTTP GET parameter (e.g. https://www.my-application.com/redirectUrl?sessionToken=<tokenValue>). The sessionToken needs to be extracted, verified and a session generated.
If you have separate URLs/ports for your frontend and backend application, you can define individually which URL (frontend or backend) you use as Redirect URL. Your are fully flexible to handle the sessionToken and visual redirect for the user.
Provide the Redirect URL (incl. protocol, port and path) in "Project settings" - "Web component", e.g.:
  • https://www.my-application.com/redirectUrl for a live application
  • http://localhost:8080/redirectUrl for localhost
  • https://eb70-212-204-96-162.eu.ngrok.io/redirectUrl (only needed if you integrate an existing user base or want your local application be available from other devices)
Redirect URL in developer panel

Next steps

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