Designing a Login Flow That Fits with Zitadel
When exploring a new application, one of the first touchpoints a user encounters is the login experience. While a simple, generic screen can be an effective and efficient way to approach the beginning of your user flow, building out a custom login interface allows you to deliver a branded, seamless, memorable experience that aligns with your app’s functionality, user interface (UI), user experience (UX), and design.
For scenarios where a simple username/password and 'forgot your password?' buttons aren't enough, Zitadel offers a robust, API-driven solution that supports advanced authentication methods, including passkeys, multi-factor authentication (MFA), and enterprise or social login integrations, allowing you to create and smoothly integrate a fully customized login UI.
Custom Login: The Use Case
While we provide a powerful built-in authentication flow compatible with OIDC & SAML standards, we recognize that some organizations require more flexibility to create more customized and advanced workflows that align with specific business logic, compliance requirements, security policies, or user experience needs. This is why we support customized logins where you have the ability to integrate your system while using our robust authentication and authorization capabilities. This gives you complete control of branding, user experience, and flows without compromising security.
Your login page isn't just a gateway to your app; it is an opportunity to present a strong first impression. By using our customizable APIs, you will improve the aesthetic experience and tailor authentication to meet your needs. Whether you are managing multi-factor authentication, adding external login capabilities, or even exploring integrating passkeys into your workflow, Zitadel makes it easier to implement advanced authentication flows while ensuring a smooth user journey.
Below is an example of a login flow implementation shown in our TypeScript repository, which provides all of the packages and components you need to build your own branded login user interface using Zitadel's APIs.
How does Zitadel Support Custom Logins?
With Zitadel, you can implement custom logins through our session and user APIs. These APIs allow you to authenticate users through various methods, including traditional username/password, passkeys, or external Identity Providers (IDPs). You have full control over the session lifecycle, starting from initiating the login process to managing user sessions after authentication. This includes configuring session expiration, integrating multi-factor authentication (MFA), and deploying any additional security mechanisms that strengthen the user verification process while maintaining compliance with authentication standards.
Exploring How Our Users Leverage Custom Logins
Building out your custom login with Zitadel is use-case-agnostic. Our users utilize custom logins with Zitadel in a variety of approaches.
Here are two examples:
Example 1: Exploring authentication and accessibility
One of our users, Melvin Weiershäuser, was exploring authentication methods and accessibility for his academic thesis. For this project, he required a custom login to compare traditional authentication and passkey methods to assess their impact on accessibility and the development of more accessible user experiences. Initially, he evaluated both Zitadel and Keycloak and ultimately chose Zitadel due to the flexibility in integrating a custom login interface. To complete the project, he built his solution with Zitadel and Next.js, with the implementation supporting both multi-factor authentication (MFA) and passkeys. Key features included passkey registration, service user integration for login control, and session management. By leveraging Zitadel’s authentication capabilities, he was able to provide valuable insights into how login methods can influence accessibility and usability while maintaining a smooth authentication experience. The project is publicly available on GitHub for those interested in exploring it further.
Example 2: Designing a secure login for a banking app
Security is key when developing a user authentication flow for a mobile application for fintech companies. One such fintech company, an IT and digitalization partner for leading financial and insurance service providers, set out to provide a more seamless and branded login process that integrated better with their own application. They built out a custom login using Swift and Android Java while integrating a .NET backend with our session API to ensure a secure, device-bound auth process. By customizing their login experience with Zitadel, they were able to enable multi-user handling, token rotation, and enhance security through session revocation. This addressed their need for heightened protection, paired with a frictionless user experience.
Looking Ahead
We are committed to further enhancing our API and SDK offerings and make it easier for developers to implement custom logins. We recently launched our ready-to-use TypeScript-based login system that reduces development time and effort for our users.
Start building your custom login UI today, and join a growing community of developers shaping the future of authentication. If you have any questions as you are building out a custom login and integrating it with Zitadel, contact us through our community.