Delegated access management

Hosted Login

Multifactor Authentication

Passwordless Authentication

Audit Trail

Identity Brokering

Platform

Service Accounts

Features

Easy integration

B2B (Business to Business)

Self Service

Existing identities

Secure authentication

Use Cases

Learn how to install, setup, and use ZITADEL.

Documentation

ZITADEL Cloud

Self-hosting

Trust center

Examples and Guides

Github Repository

Develop

Get Started

Contribute

Roadmap

Changelog

About Us

Jobs

Contact

Company

Read the blog

Sign up

Login

Pricing

Blog

Some of our past blog posts cover the topics of [designing a custom login flow](https://zitadel.com/blog/custom-login) with our [Typescript-based login](https://zitadel.com/blog/typescript-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 instace

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](https://zitadel.com/docs/guides/manage/cloud/start)


---

### 2. Create a User

- Create a User of type *Machine* (formerly service user).
- Assign the **IAM Login Client Administrator** role.https://zitadel.com/docs/guides/manage/console/managers
    
    ![image title](https://cdn.sanity.io/images/y3uu7rkl/production/4595ca73d79dd0a0c0418e6f404f1d0e5658c03f-1488x720.png)
    

---

### 3. Create a PAT (Personal Access Token)

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

![image title](https://cdn.sanity.io/images/y3uu7rkl/production/e825e6707b2654046147d513f5380f45cbb50348-1512x770.png)


---

### 4. Fork and Deploy the Login UI

- Fork the TypeScript login UI repo: [GitHub - zitadel/typescript](https://github.com/zitadel/typescript)
- Deploy the project to your Vercel account. You can deploy directly via the Vercel deploy button in the repo README.
    - [Vercel GitHub Deployment Guide](https://vercel.com/docs/git/vercel-for-github)
        
        ![image title](https://cdn.sanity.io/images/y3uu7rkl/production/634952a6b75fe242e0526721277a06418e55514a-300x118.png)
        

### 4a. Set Environment Variables

Set the environment variables required by the app:

![image title](https://cdn.sanity.io/images/y3uu7rkl/production/b57ef92fbc8d3383dbc86cc52edc61ca94fa6c15-1924x564.png)

- **`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.

- Use the Zitadel Management API with an IAM_OWNER access token (not the PAT from step 3). You can use Postman for this.
- [How to get access tokens](https://zitadel.com/docs/guides/integrate/zitadel-apis/access-zitadel-apis#how-to-access-zitadel-apis)
- [Trusted domains API endpoint](https://zitadel.com/docs/apis/resources/admin/admin-service-add-nstance-trusted-domain)

![image title](https://cdn.sanity.io/images/y3uu7rkl/production/4215a74dab41125c3a7819e242de2021849b7b5c-1500x284.png)


---

### 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](https://zitadel.com/docs/examples/login/react#set-up-application-and-obtain-keys)
    
   ![image title](https://cdn.sanity.io/images/y3uu7rkl/production/05ec7d3c6e478e483042fdacc7804937803502b2-1482x1052.png)
 
 
---

### 7. Test Your Self-Hosted Login UI

To test your self-hosted login UI, you can use the [Zitadel React quickstart application](https://github.com/zitadel/zitadel-react).

- Replace authority and client ID with your Vercel deployment URL and Zitadel app client ID.
- Run the app and test login.
    
    ![image title](https://cdn.sanity.io/images/y3uu7rkl/production/096d42c0d9984d687768b93388e149eb1fa4215d-1412x288.png)
    

---

## 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.**

This post dives into some of the key aspects of hosting your own custom login UI using the Zitadel typescript library.

How to self-host the Zitadel typescript login UI?

All posts/ #how-to

How to self-host the Zitadel typescript login UI?

Why

Explore

Company