ZITADEL•12mo ago

(NEW!) Typescript Login - Beta Feature

We've developed a new TypeScript-based login system to streamline the authentication process. 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.

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.

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.

You can find everything you need on our docs page
https://zitadel.com/docs/guides/integrate/login/hosted-login#hosted-login-version-2-beta

Testing Period: till 31. March 2025
Testing Objectives:

Did you encounter problems or bugs?
How to enhance Customizations?
Do you encounter any problems in regards to performance?
How to test: https://zitadel.com/docs/guides/integrate/login/hosted-login#beta-testing
Known Bugs / Limitations: https://zitadel.com/docs/guides/integrate/login/hosted-login#limitations

If you have any suggestions for improvement or bug reports please open an issue in the typescript repository, any other feedback we'd love to hear in this thread.

ZITADEL Docs

ZITADEL provides a hosted single-sign-on page to securely sign-in users to your applications.

peini7•1/24/25, 2:38 PM

Will it be possible to host a custom login based on this repo within the same process, or at least as a separate docker container?

Endre | Blackr4t•1/24/25, 2:57 PM

you can yes

pbechliv•1/24/25, 3:58 PM

Will this change the current "Branding" and "Login Interface Texts" options when it replaces the current login ui in the cloud version of zitadel? If so will it be a breaking change?

EEndre | Blackr4t you can yes

peini7•1/24/25, 8:26 PM

Are there some examples somewhere?

Endre | Blackr4t•1/24/25, 8:30 PM

@peini7 you can build it to a docker container and deploy it anywhere for example k8s or alike or to vercel even I think

peini7•1/24/25, 8:37 PM

Yes, i was hoping that someone would already have an existing Dockerfile because it looks like the repo doesnt contain one. Otherwise i will try to create one. Build the repo using Nodejs and then serve it using Nginx or similar..
Or is there a better approach?

peini7•1/24/25, 9:21 PM

Ah this is a Next.js app, so i think this should work as a starting point. https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

GitHub

next.js/examples/with-docker/Dockerfile at canary · vercel/next.js

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

Ppbechliv Will this change the current "Branding" and "Login Interface Texts" options when...

fabienneOP•1/27/25, 8:03 AM

The branding configuration will stay the same, currently the login interface texts are not included. As our current implementation is a lot of work each time we add new screens or texts from engineering side, we will look into an easier solution. But have not yet decided how to do it. You can track the state of that here: https://github.com/orgs/zitadel/projects/6?pane=issue&itemId=2806363287&issue=zitadel%7Ctypescript%7C346

GitHub

ZITADEL Roadmap • zitadel

ZITADEL Roadmap

Endre | Blackr4t•1/27/25, 9:00 AM

@fabienne Should the Authorization check feature work when I put the typescript app in-front of my Zitadel ?

I have tested now in our deployment and it seems like Authorizations are not checked when using the typescript app cc @peintnermax

EEndre | Blackr4t @fabienne Should the Authorization check feature work when I put the typescript ...

fabienneOP•1/27/25, 12:44 PM

At the moment this is not yet implemented, we generally recommend checking authorization in your own application. However I just added a new issue to implement this functionality again. https://github.com/zitadel/typescript/issues/350

GitHub

Permission check on Oidc Service session API · Issue #350 · zitadel...

As an administrator I am able to configure if an authorization check should be performed when a user authenticated with Zitadel. This settings should be triggered in the OIDC Service. Acceptance Cr...

Endre | Blackr4t•1/27/25, 12:45 PM

You mean checking authorization in the app towards the idp or internally in the app ?

EEndre | Blackr4t You mean checking authorization in the app towards the idp or internally in the ...

fabienneOP•1/27/25, 12:47 PM

not sure what you mean with that question. With that I mean, that your app should check if the user is allowed to do something ot not. as a login (especially oidc login), is generlly only about authentication.

Endre | Blackr4t•1/27/25, 12:47 PM

yeah, we where more thinking to have a "high level" authorization really on the Org level so you can allow login etc cross ORg

fabienneOP•2/4/25, 12:38 PM

@peintnermax can you help here?

MMartiño @peini7 did you have this problem with your docker deployment?

peini7•2/4/25, 6:22 PM

No i tried to build the login ui within a docker container but iam not able to build the container at all.

peintnermax•2/5/25, 9:08 AM

@Martiño my guess is that your domain login.example.com is not a valid url cause the https:// is missing. the login determines the service url for the api using this function. https://github.com/zitadel/typescript/blob/main/apps/login/src/lib/service.ts#L53-L81 can you confirm that you set ZITADEL_API_URL starting with https:// ?
you can ignore the forwarded host which should not be relevant in your use case

GitHub

typescript/apps/login/src/lib/service.ts at main · zitadel/typescript

Typescript packages and application to showcase the ZITADEL resource API - zitadel/typescript

peintnermax•2/5/25, 9:12 AM

seems that the host overrides the servier url in your case.. We'll merge https://github.com/zitadel/typescript/pull/342 soon which will use ZITADEL_API_URL per default

GitHub

fix(idp): show alternative auth methods on failed idp by peintnerma...

Definition of Ready

I am happy with the code
Short description of the feature/issue is added in the pr description
PR is linked to the corresponding user story
Acceptance criteria are met
All...

peintnermax•2/5/25, 9:13 AM

you could set the x-zitadel-forward-host header on your reverse proxy to set the service url

peintnermax•2/5/25, 9:24 AM

the service url should point to the zitadel instance. let us merge the PR which should resolve your issue.

peintnermax•2/5/25, 10:39 AM

cool thx for trying it out.. if you pull from main again you can remove the header again and it should use ZITADEL_API_URL before falling back to the host or forward header

peintnermax•2/5/25, 10:44 AM

We have not fully tested it behind a reverse proxy. but the redirection issues sounds strange to me. can you try out the new version and recheck?

peintnermax•2/5/25, 11:54 AM

I am not able to fully replicated your setup but one wild guess is that nextjs ist constructing the redirect using the origin header. Could you add it in your config?

peintnermax•2/5/25, 11:59 AM

Could you try to set it to the same as the host, including the protocol though.. I guess it should be https://login.example.comhttps://login.example.com

peintnermax•2/5/25, 12:21 PM

well cool so it is the hostname which constructs the url

peintnermax•2/5/25, 12:26 PM

Agree.. you'll get this better documented once we have done our own setup behind a reverse proxy which will be done in the coming days

MMartiño Sorry to bother you again, but I get now another error. When using a OIDC flow ...

fabienneOP•2/6/25, 12:37 PM

What role does the service user have? We recommend the IAM_LOGIN_CLIENT role

peintnermax•2/12/25, 4:19 PM

Hi @Martiño unfortunately there is no method to call it from the "outside" yet. You can log out users on the accounts page.
Would you be so kind to create an issue on the typescript repo to request this feature? Please provide some insights into your scenario

peintnermax•3/10/25, 10:55 AM

good point.. I'll have a look and we'll roll out a version which allows to cancel sessions on mobile too