Social Login, Smart Passkey Login Button & Customization

At Corbado, we're dedicated to providing developers with the best tools to implement passkeys for user authentication. We've recently made a significant transition from web components to UI components (based on React and Vanilla JavaScript), enhancing our platform's functionality and usability (see this blog post to understand our reasoning behind the transition and why many other component-first developer tools follow this path). This blog post will provide insights for the following questions:

1. What new features come with the UI components?
2. How can the new UI components be customized?

With the transition to UI components, we've introduced several new features designed to improve both the user experience (UX) and developer experience (DX).

We've added OAuth support for popular social providers, including Google, Microsoft, and GitHub, with more to come. This feature allows users to log in using their existing social accounts, providing a more convenient and familiar authentication method. While passkeys remain the primary authentication method, social logins offer a flexible alternative for users.

Let’ shave quick look on how to set up the social logins in our developer panel

In general, and that applies to all social login providers, Corbado tries to get you up and running quickly and offers a shared account, that you can use without any own setup at the respective social login provider. This is only for development purposes. In production applications, you need to provide your own account. Per default, it’s preselected as “Corbado Account”. You can find the setting for the social logins in the developer panel at Settings > User interface > Social.

Besides, the authentication account selection, you see which scopes are used.

If you decide to use your own account, you have to provide your Client ID and Client Secret that you get from Google API console.

The Authorised Redirected URI needs to be copied and pasted into the Google API Console.

Also, for Microsoft, you can use a shared Corbado account to quickly test the implementation without setting everything up at Microsoft.

If you decide to use your own Microsoft account, you need to obtain the Client ID and Client Secret from the Microsoft Developer Site and paste your Authorised Redirected URI.

To set up the login with GitHub, you have the similar options like for Google and Microsoft. You can use a shared account for quick testing.

Alternatively, you can provide your own account. Here, you need to obtain the Client ID and Client Secret and need to paste the Authorised Redirected URI to GitHub OAuth.

Our new pre-filled passkey login button (“One-Tap Passkey Login”) simplifies the login process. After a successful passkey login, user information is saved in the LocalStorage of the browser, enabling users to log in with a single click in subsequent login attempts. This feature enhances the user experience by reducing the number of steps required for authentication.

In case you want to use another account than the one pre-selected in the button, you can switch accounts at any time via the respective link.

If the user wants to create an account, we introduced an additional screen that provides a short explainer about passkeys and their major benefits. Moreover, this explainer is customized depending on the device being an iOS, Android or Windows device.

Cross-Device Authentication (CDA) can sometimes be confusing for users. To address this, our UI components now include screens (explainers) that help users understand and navigate the CDA process. These explainers provide clear instructions, making it easier for users to authenticate across different devices.

For hybrid authentication scenarios, where users use passkeys from other devices via QR codes & Bluetooth, we've introduced a passkey append screen. This screen helps users append a passkey to their account on the CDA client (mostly a Windows or macOS desktop device) after they have used the passkey from a CDA authenticator (mostly a smartphone). The next time the user logs in on the CDA client device, they can use the local passkey instead of the passkey from the smartphone.

We understand that every application has its unique look and feel. To accommodate this, our UI components are highly customizable. You can tailor the appearance with customizable themes, including dark and light modes, to match your application's design. Additionally, our components support multiple translations, allowing you to provide a localized experience for your users.

To customize the styling, you have different options.

• Customized Themes: First of all, Corbado works with themes that you can supply to the UI component. Each theme has a dark and light mode, and you can define which theme should be applied or change the application of dark mode. If you want to provide your own CI, you can create a custom theme. Inside this theme you can overwrite all Corbado classes by using the prefix cb-.
• Customized Copy / Translations: To provide support for other languages or use your own customized copy in the UI components, you can provide a translation file. Also, our UI components can use auto detection to apply the right language / translation based on the user’s browser preference.

Our transition from web components to UI components will enhance both the developer and user experience. By offering framework-specific integration, preparing for server-side rendering, and introducing a set of new passkey-related features, we're making it easier than ever to implement passkeys for user authentication. Explore our new UI components today and see how they can streamline your authentication processes.