Typescript Login UI
Use-case: I want to deploy the Next.js based UI.
Environment: Development env - self-hosting
Version: Version 3.2.2 according to the Zitadel UI
Stack: Docker Zitadel Backend and Next.js
I ran the Typescript based UI configured a proper .env.local file.
The first screen asks me to choose a locale, and it stops there because there is an exception; apparently, I do not have the right API version on the backend.
This is the error:
✓ Starting...
│ ✓ Ready in 2.5s
│ ✓ Compiled /middleware in 325ms (115 modules)
│ ○ Compiling / ...
│ ✓ Compiled / in 2.7s (1490 modules)
│ i18nOrganization:
│ Error fetching custom translations: Error [ConnectError]: [unimplemented] unknown method GetHostedLoginTranslation f
│ or service zitadel.settings.v2.SettingsService
│ at async eval (src/i18n/request.ts:22:21)
│ at async LanguageProvider (src/components/language-provider.tsx:6:19)
│ 20 | let translations: JsonObject | {} = {};
│ 21 | try {
│ > 22 | const i18nJSON = await getHostedLoginTranslation({
│ | ^
│ 23 | serviceUrl,
│ 24 | locale,
│ 25 | organization: i18nOrganization, {
│ rawMessage: 'unknown method GetHostedLoginTranslation for service zitadel.settings.v2.SettingsService',
│ code: 12,
│ metadata: Headers {
│ 'grpc-message': 'unknown method GetHostedLoginTranslation for service zitadel.settings.v2.SettingsService',
│ 'grpc-status': '12',
│ 'content-type': 'application/grpc+proto',
│ trailer: 'Grpc-Status, Grpc-Message, Grpc-Status-Details-Bin',
│ 'x-robots-tag': 'none'
│ },
│ details: [],
│ cause: undefined
│ }
17 Replies
Hi @guidolux, thanks for reaching out. Could you share a bit more context around how you're triggering this behavior? Did you follow this guide to set this up? Did you run the command
pnpm run-zitadel to set up the local ZITADEL environment from the example, or are you using your own local environment? Steps to reproduce would be super helpful. Let me know what you find and we can troubleshoot together!GitHub
GitHub - zitadel/typescript: Typescript packages and application to...
Typescript packages and application to showcase the ZITADEL resource API - zitadel/typescript
Hi @Matías,
I have Zitadel running in a Docker container on a separate machine on my home network.
I mapped the IP address of the server running Zitadel to a custom domain via the/etc/hosts file on my Mac and defined the external domain in the Zitadel service configuration file.
That works fine; I have an Admin login, which allows me to create users, organisations, etc when I log in through the default UI console.
I installed the hosted UI project on my Mac and created an .env.local file in the apps/login directory.
The file .env.local defines the following keys:
- ZITADEL_API_URL=http://localdomain.com:8080
- ZITADEL_SERVICE_USER_TOKEN=81YhBiB9.......
- EMAIL_VERIFICATION=true
- DEBUG=true
- NEXT_PUBLIC_BASE_PATH=""
I followed the document you linked to and used the following commands to start the hosted UI locally:
- pnpm install
- pnpm generate
- pnpm dev
The screen I see is the one where you can switch language.
This is the output of the shell after the pnpm dev command
@zitadel/login@ dev /Users/guido/Projects/Zitadel/Project_2/local_zitadel/typescript/apps/login next dev▲ Next.js 15.4.0-canary.86 - Local: http://localhost:3000 - Network: http://192.168.0.14:3000 - Environments: .env.local - Experiments (use with caution): ✓ dynamicIO ✓ Starting... ✓ Ready in 2.7s
I also ran into this yesterday. The login UI is for a not-yet-released version of Zitadel due to this PR: https://github.com/zitadel/typescript/pull/480. The API does exist when I run the docker image
ghcr.io/zitadel/zitadel:a9907df6015a1583dd635679393c9b2a8b8cecaf.Ahh, good catch. The Resource based API (API v2) will be GA along with Zitadel v4, on August this year. @guidolux you can either try running an older version of the new Login v2 that doesn't depend on that not-yet released endpoint, or do as @anlumo mentioned.
I can't get the version I mentioned to work, though. It doesn't even allow me to log in to the admin UI on a clean installation, because the page redirects to a nonexistent page
The way I got in was to log in using
latest, and then replace the docker image with that version. That doesn't solve the inherent issue that nothing works with the typescript login ui after that, though.Got it. Then, until the resource based API is GA I would recommend working with a login v2 release from before the pull request you shared.
The documentation says that I'm supposed to set the login ui client to IAM Login Client, but that doesn't exist in my self-hosted installation.
That's the list of roles I can set, there's nothing like the Iam Login Client role.
Hey @anlumo can you share the documentation link where you see this? It might be possible that the documentation was updated ahead of time and this is not yet available.
Oh, I see the issue. Those in your screenshot are ORG level roles. The
Iam Login Client role is at the Instance level (Default Settings)Ah, the blog post doesn’t say where the permissions have to be set.
Yes, you are right. I'll share this feedback with Federico, who wrote the post, so that he can clarify this, thank you!
@guidolux @Matías We were experiencing the same issue. We checked the v3.3.2 Zitadel code, https://github.com/zitadel/zitadel/blob/v3.3.2/proto/zitadel/settings/v2/settings_service.proto , and the implemntation of
getHostedLoginTranslation is missingGitHub
zitadel/proto/zitadel/settings/v2/settings_service.proto at v3.3.2 ...
ZITADEL - Identity infrastructure, simplified for you. - zitadel/zitadel
But it's implemented on v4.0.0-rc.2 https://github.com/zitadel/zitadel/blob/v4.0.0-rc.2/proto/zitadel/settings/v2/settings_service.proto
GitHub
zitadel/proto/zitadel/settings/v2/settings_service.proto at v4.0.0-...
ZITADEL - Identity infrastructure, simplified for you. - zitadel/zitadel
What's curious, that have been testing with a Zitadel hosted instance, which states is v3.3.2, and with this instance, we are not having the issue of the missing
etHostedLoginTranslation , that's make me thing that the Zitadel Managed Instance in fact it's not v3.3.2Hi @JoseSzycho I just got confirmation from 2 different staff Engineers, they said that the Zitadel version in Cloud (SaaS), in this case v3.3.2, is 3.3.2, there are no hidden or backported features.
@guidolux just checking in on this, are you still facing this issue? Please let me know if you still require our help 😄