How to self-host the Zitadel typescript login UI?

Federico Coppede
Federico Coppede

Sales Engineer

Some of our past blog posts cover the topics of designing a custom login flow with our Typescript-based login system.

In this post, we dive into the key aspects of hosting your own custom login UI using the Zitadel typescript library. We will guide you through the steps to deploy your own fully customized login user interface (UI) to Vercel (or the hosting service you prefer) and seamlessly connect it to your Zitadel Instance.

Deploying the custom login UI:

1. Create a Zitadel Cloud instance

Create a free Zitadel Cloud Instance, that will be used to run this demo (you can also use a self-hosted Zitadel instance, if you prefer). Zitadel Cloud Instance Setup Guide

2. Create a User

3. Create a PAT (Personal Access Token)

Create a PAT for the Service User and save it — you will need this later.

image title

4. Fork and Deploy the Login UI

4a. Set Environment Variables

Set the environment variables required by the app:

image title

  • ZITADEL_API_URL: The URL where your Zitadel instance is hosted.

    Example:

    https://<INSTANCE_NAME>.zitadel.cloud

  • ZITADEL_SERVICE_USER_TOKEN: A Personal Access Token (PAT) created in step 3 of the setup process. This token authenticates your service user.

  • EMAIL_VERIFICATION (optional): Set to true if you require users to verify their email before they can proceed.

eg:

ZITADEL_API_URL=https://<INSTANCE_NAME>.zitadel.cloud
ZITADEL_SERVICE_USER_TOKEN=<your_pat_here>
EMAIL_VERIFICATION=true

5. Add the Vercel Domain as a Trusted Domain

After deployment completes, copy your Vercel domain (without https://) and add it as a trusted domain to your Zitadel instance.

image title

6. Configure Your Zitadel Application

  • Open your Zitadel Console.

  • Create a new application.

  • Enable the new login UI checkbox.

  • Add your Vercel app URL as a Custom Base URL. React Login UI Setup Guide

    image title

7. Test Your Self-Hosted Login UI

To test your self-hosted login UI, you can use the Zitadel React quickstart application.

  • Replace authority and client ID with your Vercel deployment URL and Zitadel app client ID.

  • Run the app and test login.

    image title

Conclusion

Self-hosting the Zitadel TypeScript login UI lets you fully customize your authentication experience while staying secure and scalable. With just a few steps, you can deliver a seamless, branded login flow powered by Zitadel — including the ability to use a different custom login domain per application, a powerful level of flexibility that most of our competitors don’t offer.

Liked it? Share it!