Web Components are the New APIs

For a long time, it was rather quiet around web components. Currently, however, they are rising in popularity even faster than APIs. The new login standard on the web, passkeys, is one technology that greatly benefits from web components, since the advantages of passkeys can be easily exploited with web components. We will explain why in the next post.

APIs have been around for quite some time and are getting constantly more attention in recent years. Programs today must be highly available, as error- free as possible and easy to maintain. For this reason, modularization the main goal of APIs is becoming increasingly popular. Investors also are eager to invest in models that leverage APIs, and many traditional SaaS providers now use API-first models. However, web components have also been around for a while now. For a long time, it was rather quiet around them and many already thought that they failed. However, recently they have become even more popular than APIs we will explain why in the following article.

APIs (application programming interfaces) provide a way for applications to interact with one another in a structured way. They allow developers to access data from a third-party application or service and can be used to integrate existing services with a web application. APIs provide a powerful way to increase the functionality of an application and make it easier to build complex and transformative user experiences. One of the most commons APIs are REST APIs and GraphQL. APIs are not self-contained, which differentiates them from web components. These components are a collection of web technologies that allow developers to create reusable, self-contained components for web applications. They are composed of HTML, CSS, JavaScript, and other web technologies, and are meant to be used as building blocks for web applications. Unlike APIs, web components are self-contained and can be used to create highly interactive user experiences. They are designed to be easy to use and can be used across multiple frameworks and libraries. They provide a way to create encapsulated and reusable components that can be used in multiple web applications. They are compatible with (or without) any JavaScript library or framework (e.g., React, Angular, Vue.js, Next.js), and work with all modern browsers.

Web components are a higher-level of abstraction than APIs. The components themselves use an API, which is also where their strength lies. It brings the power to create reusable components with nothing more than HTML, CSS, and vanilla JavaScript. They provide UIs to end-users instead of just a function to developers, so they inherently offer more value. For example, integrating a newspaper API can allow developers to dynamically pull current news articles into a web component, enhancing the application with up-to-date content.

Web Components are getting more popular every day: Today, more than 10% of all page loads in Google Chrome are pages that contain web components! Big tech companies like Apple, Google, and Facebook are also investigating ways of using web components in their applications and JavaScript Frameworks (e.g., Angular and React).

Currently,offer full support for web components. The exceptions are Internet Explorer 11 which in turn is no longer supported by Microsoft and Safari, as the browsers only partially support the web component standards. Ever since, the use of web components became even more attractive, as now not only the integration is easier, but also most browsers support these applications.

Modern web development becomes more complex every day, and, now that the web platform and its standards are maturing, it makes more sense to use web components more intensively. They are becoming increasingly important in modern web development as they offer powerful tools for creating custom, reusable code components without the need for complex frameworks, saving them time and effort.

Web components are highly modular and can be reused across a variety of projects. Built with HTML, CSS and JavaScript, they are lightweight and can be easily customized to meet the needs of any project. By providing better encapsulation of code, web components not only make it easier to organize and maintain code, but also protect it from changes made by others. As a result, they can be used to create secure and isolated components. Web components also allow developers to create more dynamic, interactive websites and to take advantage of the latest web technologies and web standards, as they can be updated and maintained in real time. This gives them a leg up on the competition.

With all these benefits, web components are becoming an essential part of modern web development. Its ever-increasing popularity proves that they are here to stay and the integration of a passkey login with web components is more attractive than one with APIs.

One technology that benefits tremendously from web components are passkeys, the new login standard on the web, because the advantages of passkeys can quickly be leveraged with web components:

1. Increased security in authentication: To achieve a high level of security, passkeys use public-key cryptography, making them highly resistant to phishing and theft. As passkeys eliminate passwords as a point of failure, only the code remains as a possible point of attack for hackers. Web components are designed to be self-contained, which means that the code is isolated from other resources and makes it difficult for attackers to exploit. The integration of a passkey login with web components thus provides numerous layers of security that make authentication extremely robust against attacks.

2. Reduced development time and costs for integration into existing systems: Developers can use web components to create custom login pages quickly, reducing the need for custom coding or API integration. If companies do not yet have a passkey login on their website, developers can easily integrate one into existing systems using web components. Especially if companies would like to test passkeys first and do not yet want to invest large development resources, an integration with web component is an attractive option: developers neither have to change anything in their existing systems nor write new code. Thus, the development time can be reduced enormously.

3. Improved performance to allow quick authentication: Passkeys are a password replacement that provides faster and easier login to websites and apps across users devices, as they do not have to remember and type in a password anymore. To make logging in to a website or app an even faster and smoother process, page load times can also be accelerated: web components are designed to be reusable and can be easily shared across different websites, resulting in faster page load times.

4. Improved user experience: On one side, passkeys allow users to access a system without creating another password, reducing the login effort and improving the user experience. Making use of biometric data for authentication, passkeys are the most user friendly passwordless authentication solution today. On the other side, web components can be easily customized to meet specific user requirements and preferences, providing an even more tailored user experience. A very effortless and fast login using passkeys accompanied by further customized options through web components ensures the optimal customer experience when logging in to a website or app.

The point this article makes about component-shaped integration is the reason Corbado Connect ships as UI you mount rather than as an API you call. Whether a passkey prompt makes sense depends on this device, this OS and this browser, so the component collects that context, asks the Corbado backend what to do with it and then runs whatever the answer allows. A plain API would return that verdict and leave you to build the ceremony, the error screens and the handoff back to your own form. Connect puts all of it inside a component you drop into the login page you already have.

Three components cover the flow. A login component, an append component for creating a passkey after someone signed in with a password and a passkey list for the account settings page. They ship as React components and as a script build that exposes Corbado on window, so a plain HTML page can mount them into any element:

<div id="conventional-login">
    <!-- your existing password form -->
</div>
<div id="corbado-auth"></div>
 
<script type="module">
    Corbado.mountCorbadoConnectLogin(document.getElementById("corbado-auth"), {
        projectId: "pro-123",
        onFallback: (identifier, errorMessage) =>
            showConventionalLogin(identifier, errorMessage),
        onComplete: async (signedPasskeyData) => {
            await fetch("/login/passkey", { method: "POST", body: signedPasskeyData });
            window.location.replace("/");
        },
    });
</script>

onFallback is the callback you cannot leave out, and it is what keeps the integration small. The component owns the login only for as long as a passkey can succeed. The moment it cannot, it hands you back the identifier the user typed and a message, and the form you already run takes over from there. onComplete gives you signed passkey data to verify in your backend, so the session you issue is the session you always issued. There is no user migration and no second source of truth for accounts.

Two honest caveats, because they matter to anyone comparing integration effort. These are mounted React roots rather than custom elements registered with customElements.define, so "framework-independent" here means the script build works without React on the page, and styling runs through CSS classes on the cb-connect root rather than through a theme object you pass in. A fourth component covers passkey as a second factor, and that one is exported for React only today.

The wider login surface the article mentions, SSO and social sign-in, stays with the identity stack you already run. Connect adds the passkey part to it and hands every other method back to your own login.

About Corbado

Corbado is the Passkey Intelligence Platform for large-scale CIAM teams running consumer authentication. We help you see what IDP logs and generic analytics tools can't: where passkeys, passwords, OTP, social login and fallback journeys succeed, stall or fail, which devices and browsers create friction, and when an OS update silently breaks login. Two products: Corbado Observe layers process mining and observability across authentication journeys. Corbado Connect adds managed passkeys with analytics built in alongside your IDP. VicRoads runs passkeys for 5M+ users with Corbado (+80% passkey activation). Talk to a Passkey Expert →

Web components are self-contained bundles of HTML, CSS and JavaScript that deliver a complete UI to end users, while APIs only expose functions to developers. For passkeys specifically, web components automatically handle device, browser and OS context without requiring complex API queries. This makes web components a higher level of abstraction than APIs, reducing integration complexity significantly.

Passkeys are not a pure backend technology. The frontend experience varies depending on the device, browser and operating system a user is on, making UX a central factor in successful passkey adoption. Web components encapsulate this cross-device complexity, ensuring consistent authentication flows without developers needing to build platform-specific handling.

Corbado's passkey web component can be embedded into an existing website with just a few lines of HTML. Developers do not need to change their existing backend systems or write new code, making it a low-effort option for teams who want to test passkeys before committing larger development resources.

The web component covers the complete login process including passwordless fallback, risk-based authentication, SSO and social logins in a single embeddable element. It also synchronizes bidirectionally with a customer's existing backend systems, keeping implementation effort minimal despite the complexity of the underlying authentication flow.