Customize your login

[hifabienne]

Next to our new resource-based API we will start building on TypeScript SDKs and a new Login application which should facilitate building frontend applications.
These SDKs should wrap the service generation of our protocol buffers such that developers don’t have to deal with it. Each package and app is 100% TypeScript and is part of our TypeScript monorepo bundled with Turborepo.

The following packages and applications are part of the monorepo:

• @zitadel/server

This package can be used for confidential clients like node.js servers or next.js server side.

• @zitadel/client

This SDK is used for javascript applications running in the browser like Single Page Applications.

• @zitadel/react

This package implements components for convenience in react .tsx files.
Part of it should be a drop in component for Identity Providers or Social Logins.

• Login Application

The login application will replace the current ZITADEL Login built on top of Go in the long run. This application will be built with next.js and should make use of the @zitadel/react and @zitadel/server packages to demo the use of the SDKs.

With the new resource API, we encourage developers to build their own login application. Goal of this monorepo is to have a starting point for all frontend applications. Customized Login applications can easily come from a fork and be self deployed.

Tooling should be kept at a minimum and encourage TypeScript developers to contribute and work on a free and public codebase using the latest and most uptodate technologies.

Please take a look at the repo and leave us feedback regarding the structure, technologies, code quality or any other aspect.
Be aware that the scope of functionality of this repo and packages is still limited and under active development. Once the package structure is set and all APIs are fully implemented we'll move this repo to beta state.

[reactima]

@hifabienne

It's nice to see login application can be customised with reactjs, nextjs and tailwind css.
Hacking into existing Angular app with Golang template is a bit overhead.

Quick thoughts/questions:

1. What would be the best practice for customised login app - run it on subdomain or embed the code into existing reactjs apps?

2. EDIT: Move question about https://github.com/zitadel/zitadel-go here Resource-Based API #5875

3. I think it would be nice to see login apps components in separate repo.
   https://github.com/zitadel/typescript/tree/main/apps/login/ui
   It's a bit strange to see components in two places @zitadel/react and /apps/login/ui

4. For embedding it's probably worth to explore headless components concept in case end user would like to use other UI frameworks or tailwind fell out of fashion.
   https://headlessui.com/

[peintnermax]

The idea of the login application is to run it yourself. We will build an application which should replace our current go serverside solution, so third party applications will be able to authenticate through OIDC. If you want to log into your own application, you can implement the Login API directly or import a component we provide from @zitadel/react for example.

We think of @zitadel/react to be a package which contains components to be used in any react app. The folder /ui in the login application only contains some components for our login application of which we think are not worth exposing for everybody. The login application can import some components from the react package though.

Headless UI is a nice approach. Do you have any ideas of components which should come without styles? We will provide a component for social logins (Identity providers) which come with predefined styles. Would this not bring more convenience to the users? Or should we consider providing both?

[lukasver]

Hi guys!, is there any ETD or roadmap with your estimated date for these packages to be released?

[hifabienne]

Hi @lukasver
The packages are already public and you can build your own login ui with that.
However at the moment it is only possible with a self-hosted ZITADEL instance, as we have not made the API publicly available on the cloud. We will wait till we have implemented the OIDC standard till we will make it available in the Cloud. (OIDC is implemented in the current Sprint, but will probably take another 2 weeks to test so we can ensure to publish confidentially)

[mlyskawinski]

Hi @hifabienne where can we find these packages? They are not present on npm under @zitadel/client or @zitadel/server

[hifabienne]

@peintnermax can you help here?

[proper-gentleman]

How do you actually remove this domain email outlined in red?

[hifabienne]

This depends a little on your needs.
If the domain suffix is per se enababled all usernames are suffix with it and therefore unique over the whole instance.
You can either, just hide it from the ui:
https://zitadel.com/docs/guides/manage/console/instance-settings#branding

Or you can disable the whole setting, in that case the users will not be suffix with the domain anymore.
https://zitadel.com/docs/guides/manage/console/instance-settings#add-organization-domain-as-suffix-to-loginnames

[proper-gentleman]

thanks for the prompt response, I did deactivate the setting according to the docs - it seems to have no effect however, but maybe it's not this one:

this only shows up when trying to create a user with an external provider such as GitHub

[peintnermax]

You may want to deactivate this for all your organizations, so you'd have to navigate to the top right instance settings, then domain settings

[Madhusudan-vb]

I have an question: From Zitadel when I logged in trough SSO identity providers It's still asking for 2 factor authentication. How do we bypass this. But I don't want to delete or disable that 2 factor authentication because Incase if my SSO login not worked for a reason sometimes, So that I can use to login normally by non-idp user with 2 factor authentication. So is there a way to "Bypass" the 2 factor authentication Only if I logging in trough Identity Providers. Please someone help me here with an soultion.