TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-06-12 01:28:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: typescript login progress (#7378)

Browse Source 
* docs: typescript login progress

* docs

* space

* Update docs/docs/guides/integrate/login-ui/typescript-repo.mdx

Co-authored-by: Fabi <fabienne@zitadel.com>

* Update docs/docs/guides/integrate/login-ui/typescript-repo.mdx

Co-authored-by: Fabi <fabienne@zitadel.com>

* Update docs/docs/guides/integrate/login-ui/typescript-repo.mdx

Co-authored-by: Fabi <fabienne@zitadel.com>

* future login, show email password login

---------

Co-authored-by: Fabi <fabienne@zitadel.com>
This commit is contained in:
Max Peintner 2024-03-15 11:02:56 +01:00 committed by GitHub
parent 150f3bddf0
commit 0d46c39d00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 95 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
docs/docs/guides/integrate/login-ui/typescript-repo.mdx Normal file
View File

@ -0,0 +1,65 @@
---
title: Typescript Repository
sidebar_label: Typescript Repository
---
To replace our current golang built login UI and showcase the use of our new resource, session and OIDC APIs, we've created the [Typescript Repository](https://github.com/zitadel/typescript).
The typescript repository contains all TypeScript and JavaScript packages and applications you need to create your own Login UI using the ZITADEL APIs.
The repo implements the [OIDC standard](./oidc-standard)
## Included Apps And Packages
- `login`: The future login UI used by ZITADEL Cloud, powered by Next.js
- `@zitadel/server`: core components for establishing node client connection, grpc stub
- `@zitadel/client`: core components for establishing web client connection, grpc stub
- `@zitadel/react`: shared React utilities and components built with Tailwind CSS
- `@zitadel/next`: shared Next.js utilities
- `@zitadel/tsconfig`: shared `tsconfig.json`s used throughout the monorepo
- `eslint-config-zitadel`: ESLint preset
## Implemented features of OIDC Standard
- [x] Authorization Code Flow with PKCE
- [x] AuthRequest `hintUserId`
- [x] AuthRequest `loginHint`
- [ ] AuthRequest `prompt`
- [x] Login
- [x] Select Account
- [ ] Consent
- [x] Create
- Scopes
- [x] `openid email profile address``
- [x] `offline access`
- [ ] `urn:zitadel:iam:org:idp:id:{idp_id}`
- [x] `urn:zitadel:iam:org:project:id:zitadel:aud`
- [ ] `urn:zitadel:iam:org:id:{orgid}`
- [ ] AuthRequest UI locales
- Multifactor
- [x] Passkeys
- [ ] TOTP
- Passwordless
- [x] Passkeys
- Security Prompts
- [x] Setup Passkey as Passwordless method
- [ ] Setup TOTP as Multifactor
- [ ] Password Change
- Login
- [x] Email Password
- [x] Passkey
- [ ] IDPs
- [ ] Google
- [ ] GitHub
- [ ] GitLab
- [ ] Azure
- [ ] Apple
- Register
- [x] Email Password
- [x] Passkey
## How to setup domains
In order to use the new login app, the domain must be registered on your instance and use https.
If you are using a self hosted instance, [install](/docs/apis/resources/system/system-service-add-domain) your domain on your instance using the system service.
The login using our cloud service is still experimental, but you can purchase your domain on zitadel.com, install it on your domain following [our guide](/docs/guides/manage/cloud/instances#add-custom-domain).
After your domain has been verified, you can reconfigure your DNS settings in order to deploy the login on your own.

57
docs/sidebars.js
View File

@ -51,7 +51,7 @@ module.exports = {
{
type: "category",
label: "Examples & SDKs",
link: {type: 'doc', id: 'sdk-examples/introduction'},
link: { type: "doc", id: "sdk-examples/introduction" },
items: [
"sdk-examples/introduction",
"sdk-examples/angular",
@ -82,8 +82,8 @@ module.exports = {
},
{
type: "link",
label: "Node.js",
href: "https://www.npmjs.com/package/@zitadel/node",
label: "Node.js",
href: "https://www.npmjs.com/package/@zitadel/node",
},
{
type: "link",
@ -211,7 +211,7 @@ module.exports = {
"Integrate your users and application with ZITADEL. In this section you will find resource on how to authenticate your users, configure external identity providers, access the ZITADEL APIs to manage resources, and integrate with third party services and tools.",
},
items: [
'guides/integrate/login/login-users',
"guides/integrate/login/login-users",
{
type: "category",
label: "Openid Connect",
@ -220,7 +220,8 @@ module.exports = {
type: "generated-index",
title: "Authenticate users with OpenID Connect (OIDC)",
slug: "guides/integrate/login/oidc",
description: "This guide explains how to utilize ZITADEL for user authentication within your applications using OpenID Connect (OIDC). Here, we offer comprehensive guidance on seamlessly integrating ZITADEL's authentication features, ensuring both security and user experience excellence. Throughout this documentation, we'll cover the setup process for ZITADEL authentication, including the recommended OIDC flows tailored to different application types. Additionally, we'll provide clear instructions on securely signing out or logging out users from your application, ensuring data security and user privacy. With our guidance, you'll be equipped to leverage ZITADEL's authentication capabilities effectively, enhancing your application's security posture while delivering a seamless login experience for your users.",
description:
"This guide explains how to utilize ZITADEL for user authentication within your applications using OpenID Connect (OIDC). Here, we offer comprehensive guidance on seamlessly integrating ZITADEL's authentication features, ensuring both security and user experience excellence. Throughout this documentation, we'll cover the setup process for ZITADEL authentication, including the recommended OIDC flows tailored to different application types. Additionally, we'll provide clear instructions on securely signing out or logging out users from your application, ensuring data security and user privacy. With our guidance, you'll be equipped to leverage ZITADEL's authentication capabilities effectively, enhancing your application's security posture while delivering a seamless login experience for your users.",
},
items: [
"guides/integrate/login/oidc/login-users",
@ -257,8 +258,8 @@ module.exports = {
title: "Onboard Customers and Users",
slug: "/guides/integrate/onboarding",
description:
"When building your own application, one of the first questions you have to face, is 'How do my customers onboard to my application?'\n" +
"These guides will explain the built-in solution for onboarding new tenants, customers, and users and how you can handle more advanced onboarding use cases. ",
"When building your own application, one of the first questions you have to face, is 'How do my customers onboard to my application?'\n" +
"These guides will explain the built-in solution for onboarding new tenants, customers, and users and how you can handle more advanced onboarding use cases. ",
},
collapsed: true,
items: [
@ -273,7 +274,7 @@ module.exports = {
type: "generated-index",
title: "Token Introspection",
slug: "/guides/integrate/token-introspection",
description:
description:
"Token introspection is the process of checking whether an access token is valid and can be used to access protected resources. You have an API that acts as an OAuth resource server and can be accessed by user-facing applications. To validate an access token by calling the ZITADEL introspection API, you can use the JSON Web Token (JWT) Profile (recommended) or Basic Authentication for token introspection. It's crucial to understand that the API is entirely separate from the front end. The API shouldn’t concern itself with the token type received. Instead, it's about how the API chooses to call the introspection endpoint, either through JWT Profile or Basic Authentication. Many APIs assume they might receive a JWT and attempt to verify it based on signature or expiration. However, with ZITADEL, you can send either a JWT or an opaque Bearer token from the client end to the API. This flexibility is one of ZITADEL's standout features.",
},
collapsed: true,
@ -326,6 +327,7 @@ module.exports = {
"guides/integrate/login-ui/password-reset",
"guides/integrate/login-ui/logout",
"guides/integrate/login-ui/oidc-standard",
"guides/integrate/login-ui/typescript-repo",
],
},
{
@ -579,7 +581,8 @@ module.exports = {
type: "generated-index",
title: "APIs V1 (GA)",
slug: "/apis/services/",
description: "APIs V1 organize access by context (authenticated user, organisation, instance, system), unlike resource-specific V2 APIs.",
description:
"APIs V1 organize access by context (authenticated user, organisation, instance, system), unlike resource-specific V2 APIs.",
},
items: [
{
@ -590,7 +593,7 @@ module.exports = {
title: "Auth API",
slug: "/apis/resources/auth",
description:
"The authentication API (aka Auth API) is used for all operations on the currently logged in user. The user id is taken from the sub claim in the token.",
"The authentication API (aka Auth API) is used for all operations on the currently logged in user. The user id is taken from the sub claim in the token.",
},
items: require("./docs/apis/resources/auth/sidebar.js"),
},
@ -602,7 +605,7 @@ module.exports = {
title: "Management API",
slug: "/apis/resources/mgmt",
description:
"The management API is as the name states the interface where systems can mutate IAM objects like, organizations, projects, clients, users and so on if they have the necessary access rights. To identify the current organization you can send a header x-zitadel-orgid or if no header is set, the organization of the authenticated user is set.",
"The management API is as the name states the interface where systems can mutate IAM objects like, organizations, projects, clients, users and so on if they have the necessary access rights. To identify the current organization you can send a header x-zitadel-orgid or if no header is set, the organization of the authenticated user is set.",
},
items: require("./docs/apis/resources/mgmt/sidebar.js"),
},
@ -614,7 +617,7 @@ module.exports = {
title: "Admin API",
slug: "/apis/resources/admin",
description:
"This API is intended to configure and manage one ZITADEL instance itself.",
"This API is intended to configure and manage one ZITADEL instance itself.",
},
items: require("./docs/apis/resources/admin/sidebar.js"),
},
@ -626,9 +629,9 @@ module.exports = {
title: "System API",
slug: "/apis/resources/system",
description:
"This API is intended to manage the different ZITADEL instances within the system.\n" +
"\n" +
"Checkout the guide how to access the ZITADEL System API.",
"This API is intended to manage the different ZITADEL instances within the system.\n" +
"\n" +
"Checkout the guide how to access the ZITADEL System API.",
},
items: require("./docs/apis/resources/system/sidebar.js"),
},
@ -707,13 +710,13 @@ module.exports = {
title: "Feature Service API (Beta)",
slug: "/apis/resources/feature_service",
description:
"This API is intended to manage features for ZITADEL. Feature settings that are available on multiple \"levels\", such as instance and organization. The higher level instance acts as a default for the lower level. When a feature is set on multiple levels, the lower level takes precedence. Features can be experimental where ZITADEL will assume a sane default, such as disabled. When over time confidence in such a feature grows, ZITADEL can default to enabling the feature. As a final step we might choose to always enable a feature and remove the setting from this API, reserving the proto field number. Such removal is not considered a breaking change. Setting a removed field will effectively result in a no-op.\n" +
'This API is intended to manage features for ZITADEL. Feature settings that are available on multiple "levels", such as instance and organization. The higher level instance acts as a default for the lower level. When a feature is set on multiple levels, the lower level takes precedence. Features can be experimental where ZITADEL will assume a sane default, such as disabled. When over time confidence in such a feature grows, ZITADEL can default to enabling the feature. As a final step we might choose to always enable a feature and remove the setting from this API, reserving the proto field number. Such removal is not considered a breaking change. Setting a removed field will effectively result in a no-op.\n' +
"\n" +
"This project is in beta state. It can AND will continue breaking until a stable version is released.",
},
items: require("./docs/apis/resources/feature_service_v2/sidebar.js"),
},
]
],
},
{
type: "category",
@ -732,9 +735,9 @@ module.exports = {
title: "User Schema Service API (Preview)",
slug: "/apis/resources/user_schema_service",
description:
"This API is intended to manage data schemas for users in a ZITADEL instance.\n" +
"\n" +
"This project is in Preview state. It can AND will continue breaking until the service provides the same functionality as the v1 and v2 user services.",
"This API is intended to manage data schemas for users in a ZITADEL instance.\n" +
"\n" +
"This project is in Preview state. It can AND will continue breaking until the service provides the same functionality as the v1 and v2 user services.",
},
items: require("./docs/apis/resources/user_schema_service_v3/sidebar.js"),
},
@ -746,9 +749,9 @@ module.exports = {
title: "User Service API (Preview)",
slug: "/apis/resources/user_service_v3",
description:
"This API is intended to manage users with your own data schema in a ZITADEL instance.\n"+
"\n"+
"This project is in Preview state. It can AND will continue breaking until the service provides the same functionality as the v1 and v2 user services."
"This API is intended to manage users with your own data schema in a ZITADEL instance.\n" +
"\n" +
"This project is in Preview state. It can AND will continue breaking until the service provides the same functionality as the v1 and v2 user services.",
},
items: require("./docs/apis/resources/user_service_v3/sidebar.js"),
},
@ -760,13 +763,13 @@ module.exports = {
title: "Execution Service API (Preview)",
slug: "/apis/resources/execution_service_v3",
description:
"This API is intended to manage custom executions (previously known as actions) in a ZITADEL instance.\n"+
"\n"+
"This project is in Preview state. It can AND will continue breaking until the services provide the same functionality as the current actions.",
"This API is intended to manage custom executions (previously known as actions) in a ZITADEL instance.\n" +
"\n" +
"This project is in Preview state. It can AND will continue breaking until the services provide the same functionality as the current actions.",
},
items: require("./docs/apis/resources/execution_service_v3/sidebar.js"),
},
]
],
},
{
type: "category",