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, please have a look at the Corbado CLI.
Setup 
1.​Embed the web component into your site​
2.​Adapt styling (optional)​
3.​Define Application URL​
4.​Define Redirect URL​
5.​Verify Relying Party ID​
6.​Install Corbado backend SDK​
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:
<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.
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: #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.
3. 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
4. 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 (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.
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
5. Verify Relying Party ID
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 application
localhost for localhost
If you develop locally and use http://localhost:<port>, please set the Relying Party ID to localhost.
6. Install Corbado backend SDK
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
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 without exsting user base (greenfield)​
2.​Application with existing user base​

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

Integrations - Previous

Hosted page

No existing user base

Last modified 9h ago