(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.
45 Replies
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?
you can yes
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?
Are there some examples somewhere?
@peini7 you can build it to a docker container and deploy it anywhere for example k8s or alike or to vercel even I think
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?
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.
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
@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
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...
You mean checking authorization in the app towards the idp or internally in the app ?
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.
yeah, we where more thinking to have a "high level" authorization really on the Org level so you can allow login etc cross ORg
Unknown User•10mo ago
Message Not Public
Sign In & Join Server To View
@peintnermax can you help here?
No i tried to build the login ui within a docker container but iam not able to build the container at all. 😦
Unknown User•10mo ago
Message Not Public
Sign In & Join Server To View
@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
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...
you could set the x-zitadel-forward-host header on your reverse proxy to set the service url
Unknown User•10mo ago
Message Not Public
Sign In & Join Server To View
the service url should point to the zitadel instance. let us merge the PR which should resolve your issue.
Unknown User•10mo ago
Message Not Public
Sign In & Join Server To View
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
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?
Unknown User•10mo ago
Message Not Public
Sign In & Join Server To View
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? 😄
Unknown User•10mo ago
Message Not Public
Sign In & Join Server To View
Could you try to set it to the same as the host, including the protocol though.. I guess it should be
https://login.example.comUnknown User•10mo ago
Message Not Public
Sign In & Join Server To View
well cool so it is the hostname which constructs the url 😄
Unknown User•10mo ago
Message Not Public
Sign In & Join Server To View
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 👍
Unknown User•10mo ago
Message Not Public
Sign In & Join Server To View
What role does the service user have? We recommend the IAM_LOGIN_CLIENT role
Unknown User•10mo ago
Message Not Public
Sign In & Join Server To View
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 🙂
Unknown User•9mo ago
Message Not Public
Sign In & Join Server To View
good point.. I'll have a look and we'll roll out a version which allows to cancel sessions on mobile too
Unknown User•8mo ago
Message Not Public
Sign In & Join Server To View
Hi Adam, we would accept PRs for adding other languages to the translations, you can find all the languages currently supported here: https://github.com/zitadel/typescript/tree/main/apps/login/locales , the custom login texts, is about the possiblity to overwrite those texts when you do want to have something completaly different.
GitHub
typescript/apps/login/locales at main · zitadel/typescript
Typescript packages and application to showcase the ZITADEL resource API - zitadel/typescript
Hello! We’ve encountered an issue while onboarding the Typescript Login project in our K8S setup due to HTTP/2 and gRPC requirements. We’ve detailed the problem in the #questions-help-bugs thread —would appreciate any insights.
https://discord.com/channels/927474939156643850/1352894563831906314
Edit: we managed to solve it, see post for details.
Unknown User•8mo ago
Message Not Public
Sign In & Join Server To View
Seems "Iam Login Client" role is mandatory to work to use the new login UI for projects. "Iam Owner" is not enough, not sure if a bug.
Would be nice to have the required roles of the Service Users documented to be able to use the new login UI with V3.
Hi @Arnau yes this is on purpose. it is docuemented in the step by step guide for the vercel custom login deployment: https://zitadel.com/docs/guides/integrate/login/hosted-login?deployment=vercel_custom#hosted-login-version-2-beta
ZITADEL Docs
ZITADEL provides a hosted single-sign-on page to securely sign-in users to your applications.
Hey @fabienne, totally true, thanks! I missed that step 🫣