Introducing our New TypeScript Login

Fabienne Bühler
Fabienne Bühler

CPO

We've developed a new TypeScript-based login system to streamline the authentication process for our customers. This solution offers a flexible, customizable, and self-hostable login experience.

By providing a ready-to-use login solution, we aim to reduce development time and effort for our customers. The open-source nature of the project allows for easy customization and adaptation to specific business needs.

Our immediate goal is to enable customers to self-host the login system. In the future, we plan to fully integrate this new login system into our cloud offering, providing a more robust and secure authentication experience. We plan to initiate the first cloud integration by the end of February. New customers will be automatically provisioned with the new cloud-based login. Existing customers will have the flexibility to migrate their entire instance or individual applications at their preferred time.

The new TypeScript login system offers several key improvements:

  • Leverages Modern Technology: By utilizing our newly developed session APIs, we've significantly enhanced the security and performance of the authentication process.
  • Enhanced Features: The system introduces new features such as user invitation flows and passkey-only authentication, providing greater flexibility and convenience for our users.
  • Improved Developer Experience: The use of TypeScript, a widely adopted language in frontend development, makes the codebase more accessible and easier to contribute to. This encourages community involvement and fosters rapid development.

Current State

Our primary goal for the TypeScript login system is to fully replace the existing login functionality within the current Zitadel version, which is shipped with Zitadel default. This will allow us to leverage the benefits of the new system, including its modular architecture and enhanced security features.

To achieve this, we are actively working on implementing the core features currently available in Zitadel, such as:

  • Authentication Methods:
    • Username and Password
    • Passkeys
    • Multi-Factor Authentication (MFA)
    • External Identity Providers (OIDC, SAML, etc.)
  • OpenID Connect (OIDC) Compliance: Adherence to the OIDC standard for seamless integration with various identity providers.
  • Customization:
    • Branding options to match your organization's identity.
    • Flexible configuration settings to tailor the login experience.

The full feature list can be found here.

As we continue to develop the TypeScript login system, we will provide regular updates on its progress and new capabilities.

Login UI with authentication method loginname, Apple, Google OIDC, Google and GitLab

Limitations

For the first release we have excluded the following features:

Beta Testing

The TypeScript login system is currently in the beta testing phase. Your feedback is highly valuable in helping us refine and improve this new solution.

At your convenience please open any issues faced on our Typescript Login GitHub repository to report bugs or suggest enhancements while more general feedback can be shared directly to the corresponding discord thread. Your contributions will play a crucial role in shaping the future of our login system. Thank you for your support!

Steps to start testing

The simplest way to deploy the new login for yourself is by using the “Deploy” button in our repository to deploy the login directly to your Vercel.

  1. Create a service user (ZITADEL_SERVICE_USER_ID) with a PAT in your instance
  2. Give the user IAM_LOGIN_CLIENT Permissions in the default settings (YOUR_DOMAIN/ui/console/instance?id=organizations) https://zitadel.com/docs/guides/manage/console/managers
  3. Deploy login to Vercel: You can do so, be directly clicking the “Deploy” button at the bottom of the readme in our repository
    Deploy to vercel button
  4. If you have used the deploy button in the steps before, you will automatically be asked for this step. Enter the environment variables in Vercel
  5. Add the domain where your login UI is hosted to the trusted domains in ZITADEL (Example: my-new-zitadel-login.vercel.app)
  6. Use the new login in your application. To implement the new login, choose one of the following options:
    1. Enable the new login in your application configuration: Add the URL of your new login UI to your application’s settings. Zitadel will automatically redirect users to the new login if they attempt to use the old one.
    2. Enable the loginV2 feature on the instance:Activate the LoginV2 feature in your Zitadel instance and specify the URL of your new login. This will apply the new login for all applications configured under your Zitadel instance. Example: https://my-new-zitadel-login.vercel.app. More details: Zitadel Documentation
    3. Update the issuer URL in your application configuration: Change the issuer domain in your application configuration to match the new login domain.

For more information read our Login V2 documentation

Important Notes

  • User Creation: The new TypeScript login utilizes the Session and User V2 APIs. Note that the User V2 API introduces some changes compared to the V1 API. Ensure you create users using the new V2 API to maintain compatibility.
  • External Identity Providers (IDPs): To enable login with external identity providers, such as Google or Apple, follow our existing setup guides. Ensure that you use the following redirect URL: $YOUR-DOMAIN/idps/callback.
  • Passkey/U2F Authentication: These authentication methods are domain-bound. Since your new login operates on a different domain than the previous one, existing passwordless authentication (e.g., fingerprint, Face ID) and U2F methods cannot be reused. Additionally, when managed through the Zitadel console, they will be tied to the old domain. Note: To avoid this issue, consider running the new login on a subdomain of your current instance (e.g., myinstance.zitadel.cloud and login.myinstance.zitadel.cloud).

Customization / Feature requests

If you have specific customization needs beyond the current capabilities of the Typescript login offering, please follow one of these two options:

  1. Fork the Repository: By forking the Typescript Login repository on GitHub, you can directly modify the source code to implement your desired features. This offers maximum flexibility and control over the login system.
  2. Build Your Own Login UI: For full customization control, you can leverage our Session API to build your own login interface. This allows you to create a fully tailored experience that aligns perfectly with your application's design and functionality. A detailed guide on how to use the Session API is available here.

Future plans

Our roadmap for the TypeScript login includes several exciting developments:

Short-term Goals

  • Feature Parity: We will continue to implement the missing features listed above to ensure seamless migration.
  • Multi-tenancy: We will enable multi-tenancy to support our cloud offering, allowing new users to directly access the new login experience while existing customers can migrate at their own pace.

Long-term Vision

  • Self-Service Components: We plan to introduce self-service components for the users like profile management, making it easier for you to integrate these functionalities into your applications without relying on our full-fledged management console.
  • Enhanced Customization: We will explore options to further customize the appearance of the login page, allowing you to tailor it to your specific branding and design preferences.

By focusing on these areas, we aim to provide a powerful, flexible, and customizable login solution that empowers your applications.

Now it’s your turn. Do you have any suggestions for improvement or bug reports? Explore the repository and share your feedback in our discord thread.

Liked it? Share it!