--- url: 'https://www.corbado.com/blog/social-logins-pre-filled-passkeys-customization' title: 'Social Login, Smart Passkey Login Button & Customization' description: 'Discover new UI component features, such as social logins, pre-filled passkey login buttons, passkey append, optimized CDA & customization of styles & copy.' lang: 'en' author: 'Vincent' date: '2024-07-09T09:38:55.469Z' lastModified: '2026-03-25T10:00:35.426Z' keywords: 'ui components passkeys, web components passkeys, passkey features, social login passkeys, cda explainer passkeys, passkey append hybrid authentication, passkey customization, one-tape passkey login' category: 'Passkeys Strategy' --- # Social Login, Smart Passkey Login Button & Customization ## Key Facts - **Social login via OAuth** supports Google, Microsoft and GitHub. Corbado provides shared test accounts for each provider so developers can test without setting up their own OAuth credentials. - **One-Tap Passkey Login** stores user information in browser LocalStorage after a successful login, enabling single-click re-authentication on all subsequent visits. - **Passkey append after hybrid authentication** prompts desktop users to save a local passkey following cross-device authentication via QR code and Bluetooth, eliminating the need for a smartphone on future logins. - **CDA explainer screens** are built into UI components to guide users through Cross-Device Authentication flows that are otherwise confusing and prone to drop-off. - **Custom themes** support dark and light modes. Developers can override all Corbado styles using the `cb-` CSS class prefix to align components with their own brand CI. ## 1. Introduction 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](https://docs.corbado.com/frontend-integration/ui-components) (based on [React](https://www.corbado.com/blog/react-passkeys) 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](https://www.corbado.com/blog/component-first-developer-tool-startup) 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? ![ui-components.png](https://www.corbado.com/website-assets/ui_components_dd0bbc338a.png) ## 2. New Features to Enhance UX and DX With the transition to UI components, we've introduced several new features designed to improve both the user experience (UX) and developer experience (DX). ### 2.1 Social Logins (OAuth) We've added [OAuth support for popular social providers](https://docs.corbado.com/overview/configuration/social-logins/overview), including [Google](https://docs.corbado.com/overview/configuration/social-logins/google), [Microsoft](https://docs.corbado.com/overview/configuration/social-logins/microsoft), and [GitHub](https://docs.corbado.com/overview/configuration/social-logins/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. ![social login buttons](https://www.corbado.com/website-assets/social_login_buttons_0018639464.png) Let’ shave quick look on how to set up the social logins in our developer panel #### 2.1.1 Login with Google In general, and that applies to all [social login](https://www.corbado.com/glossary/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](https://www.corbado.com/glossary/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. ![social login google configuration](https://www.corbado.com/website-assets/social_login_google_configuration_921dc53081.png) 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. ![social login google configuration extended](https://www.corbado.com/website-assets/social_login_google_configuration_extended_fc9db8d489.png) #### 2.1.2 Login with Microsoft Also, for Microsoft, you can use a shared Corbado account to quickly test the implementation without setting everything up at Microsoft. ![social login microsoft configuration](https://www.corbado.com/website-assets/social_login_microsoft_configuration_6904ab0f3f.png) If you decide to use your own [Microsoft account](https://www.corbado.com/blog/use-windows-11-without-windows-hello-microsoft-account), you need to obtain the **Client ID** and **Client Secret** from the Microsoft Developer Site and paste your **Authorised Redirected URI**. ![social login microsoft configuration extended](https://www.corbado.com/website-assets/social_login_microsoft_configuration_extended_701a8dc35c.png) #### 2.1.3 Login with GitHub 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. ![social login github configuration](https://www.corbado.com/website-assets/social_login_github_configuration_e9375b18f1.png) 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. ![social login github configuration extended](https://www.corbado.com/website-assets/social_login_github_configuration_extended_3b9d784647.png) ### 2.2 Pre-Filled Passkey Re-Login Button Our new **pre-filled passkey login button** **(“One-Tap Passkey Login”)** simplifies the login process. After a successful [passkey login](https://www.corbado.com/blog/passkey-login-best-practices), 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. ![pre-filled re-login button](https://www.corbado.com/website-assets/smart_passkey_button_0def4ab50d.png) ### 2.3 Optimized Passkey Append Screens 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](https://www.corbado.com/blog/webauthn-errors), [Android](https://www.corbado.com/blog/how-to-enable-passkeys-android) or Windows device. ![ui-component passkey append](https://www.corbado.com/website-assets/ui_component_passkey_append_e2d4245d57.png) ### 2.4 Cross-Device Authentication (CDA) Explainers 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. ![use mobile passkey screen](https://www.corbado.com/website-assets/use_mobile_passkey_screen_111b374beb.png) ### 2.5 Passkey Append Screen After Hybrid Authentication 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](https://www.corbado.com/glossary/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. ![local passkey append screen](https://www.corbado.com/website-assets/local_passkey_append_screen_281ae54545.png) ## 3. Customization Themes and Translation 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](https://docs.corbado.com/frontend-integration/ui-components/customization#2-2-switching-the-theme), including dark and light modes, to match your application's design. Additionally, our components [support multiple translations](https://docs.corbado.com/frontend-integration/ui-components/customization#1-custom-translations), allowing you to provide a localized experience for your users. ![ui components customization](https://www.corbado.com/website-assets/ui_components_customization_eef04c3178.png) 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](https://docs.corbado.com/frontend-integration/ui-components/customization#2-1-configuring-dark-mode). If you want to provide your own CI, you can [create a custom theme](https://docs.corbado.com/frontend-integration/ui-components/customization#2-3-creating-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. ## 4. Conclusion 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](https://www.corbado.com/developer) today and see how they can streamline your authentication processes. ## Frequently Asked Questions ### How do I add Google, Microsoft or GitHub login to my Corbado passkey flow without setting up OAuth myself? Corbado provides a shared OAuth account for each social provider (Google, Microsoft and GitHub) that developers can use during development without any setup at the provider's console. For production, you supply your own Client ID, Client Secret and Authorized Redirect URI via the Corbado developer panel under Settings > User interface > Social. ### What happens after a user authenticates with a passkey from their phone via QR code on a desktop device? Corbado's passkey append screen appears on the desktop (CDA client) after the user completes hybrid authentication, prompting them to register a local passkey on that device. This means on the next login the user can authenticate directly with the desktop passkey instead of repeating the QR code and Bluetooth flow. ### How do I translate or customize the copy inside Corbado's UI components for different languages? You can supply a custom translation file to the UI components to support additional languages or override default text with your own copy. The components also support auto-detection, applying the correct translation automatically based on the user's browser language preference.