Web component
This guide shows how to integrate the Corbado web component into your website.
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, please have a look at the Corbado CLI.
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:<html>
<head>
<script defer src="https://auth.corbado.com/auth.js"></script>
</head>
<body>
<!-- Your website content -->
<corbado-auth project_id="<project ID>" 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 |
---|---|---|
project_id | This should be the project ID of your project. | - |
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 |
register_title | Change the title of the sign-up screen of the web component. | null |
register_btn | Change the button text of the sign-up button of the web component. | null |
login_title | Change the title of the login screen of the web component. | null |
login_btn | Change the button text of the login button of the web component. | null |
sub_title | Change the sub tile of the login screen of the web component (it can also be empty). | Welcome back! Please enter your details |
endpoint | Change the endpoint where API calls from the web component are sent to (e.g. you can define a different one for local or staging environment). | https://auth.corbado.com |
username | Pre-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. | - |
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.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;
}
</style>
To adjust the styling, you can use a service like https://jsfiddle.net/ and see your results directly.
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.

Application URL in developer panel
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 (e.g. http://localhost:3000) and backend (e.g. http://localhost:8080) application, you can define individually which URL (frontend or backend) you use as Redirect URL. You are fully flexible to handle the sessionToken and browser redirect for the user.
https://www.my-application.com/redirectUrl
for a live applicationhttp://localhost:8080/redirectUrl
for localhost

Redirect URL in developer panel
By default the WebAuthn Relying Party ID will be set to
<project ID>.auth.corbado.com
. This is where the passkeys are bound to. You can only use passkeys in a web component that runs in 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 applicationlocalhost
for localhost
If you develop locally and use
http://localhost:<port>
, please set the Relying Party ID to localhost
.
Corbado provides you with backend SDKs that ease the integration. Note that corbado-webhook is only needed if you have an existing user base.
PHP
Node.js
composer require corbado/client-php
composer require corbado/webhook-php
npm install corbado corbado-webhook --save
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.
Last modified 9h ago