diff --git a/docs/docs/apis/introduction.mdx b/docs/docs/apis/introduction.mdx index 4ec740d202..7e68540c95 100644 --- a/docs/docs/apis/introduction.mdx +++ b/docs/docs/apis/introduction.mdx @@ -34,7 +34,7 @@ The easiest way to have a look at them is, to import them in the [Swagger Editor 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. -
+
### GRPC @@ -70,7 +70,7 @@ The management API is as the name states the interface where systems can mutate 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.
-
+
### GRPC @@ -104,7 +104,7 @@ Definition: This API is intended to configure and manage one ZITADEL instance itself.
-
+
### GRPC @@ -140,7 +140,7 @@ This API is intended to manage the different ZITADEL instances within the system Checkout the guide how to [access the ZITADEL System API](/docs/guides/integrate/access-zitadel-system-api).
-
+
### GRPC @@ -209,9 +209,9 @@ As you can see the `GetMyUser` function is also available as a REST service unde In the table below you can see the URI of those calls. -| Service | URI | -| :------ | :--------------------------------------------------------------------------------------------------------------------------------------------- | -| REST | {your_domain}/auth/v1/users/me | +| Service | URI | +| :------ | :-------------------------------------------------- | +| REST | {your_domain}/auth/v1/users/me | | GRPC | {your_domain}/zitadel.auth.v1.AuthService/GetMyUser | ## Domains diff --git a/docs/docs/apis/openidoauth/authrequest.mdx b/docs/docs/apis/openidoauth/authrequest.mdx new file mode 100644 index 0000000000..5a57b21d0c --- /dev/null +++ b/docs/docs/apis/openidoauth/authrequest.mdx @@ -0,0 +1,115 @@ +--- +title: OIDC Authentication Request Playground +sidebar_label: OIDC Playground +--- + +import { SetAuthRequest } from "../../../src/components/authrequest"; + +The OIDC Playground is for testing OpenID Authentication Requests, giving you more insight how OpenID Connect works and how you can customize ZITADEL behavior with different parameters. + +An OpenID Connect (OIDC) [authentication request](https://openid.net/specs/openid-connect-core-1_0.html) is an OAuth 2.0 Authorization Request using additional parameters and scopes to request that the end-user be authenticated by ZITADEL. + + + +## Why this OIDC playground? + +Currently ZITADEL requires human users to authenticate trough the hosted login page. +Your application should initiate a login by issuing an authentication request and redirecting the user to the login page. You can customize the behavior of ZITADEL by providing additional parameters and scopes in the request. + +This playground should help you to initially craft an authentication request and to explore the behavior of ZITADEL in more depth. + +## Request parameters explained + +Not all request parameters are available in the playground. Please refer to the full documentation of the [authorization endpoint](/docs/apis/openidoauth/endpoints#authorization_endpoint). + +### Your Domain + +The Instance Domain to your ZITADEL instance. Use the base-path, the playground will add the required path to the request. + +### Required Parameters + +

+ Client ID is the resource id of an + application. It's the application where you want your users to login. You can + find the resource id in the Console. When using organization grants, use the + client id from the origin organization. +

+ +

+ Redirect URI be one of the + pre-configured redirect uris for your application. You must add the redirect + uri for your application, else you will receive an error. +

+ +

+ Response Type defines whether a + code, id_token token or just id_token will be returned. Most use cases will + need code. +

+ +More in the documentation about required Parameters. + +### Authentication methods + +Depending on the authentication and authorization flow of your application you might need to append some information to the authentication request. + +Authentication method "(none) PKCE" is recommended +for most application types. The playground appends automatically a code challenge +for PKCE flows. + +You need to append a "Code Challenge" by providing a random Code Verifier that is being hashed and encoded in the request to the token endpoint, please see our [guide](/docs/guides/integrate/login-users#token-request) for more details. + +More in the [documentation](/docs/apis/openidoauth/authn-methods) about authentication methods. + +### Additional Parameters + +

+ Prompt defines if and how the user + should be prompted on login. For example you can pre-select a login name ( + select_account) or present the register form (create + ) to users directly. The value login requires the user to + re-authenticate. +

+ +

+ Login hint must be a valid logon name + of a user. You can skip the account picker by providing the Login hint. +

+ +There are many more additional parameters. Please refer to the [documentation](/docs/apis/openidoauth/endpoints#additional-parameters) about additional parameters. + +## Standard Scopes + +Used to request additional information from ZITADEL. +These scopes are defined in the OpenID Connect specification. +The `openid` scope is mandatory. + +Not all scopes are available in the playground. Please refer to the full [documentation](/docs/apis/openidoauth/scopes) for the exhaustive list of available standard and reserved scopes. + +## Reserved Scopes + +You can request additional information that is specific to ZITADEL or customize the behavior of ZITADEL by including reserved scopes. +Please refer to the [documentation](/docs/apis/openidoauth/scopes#reserved-scopes) for a full list of available reserved scopes. + +### Organization policies and branding + +Enforce an organization's policies and branding as well as membership of the user by passing the scope `urn:zitadel:iam:org:id:{id}` with the required Organization ID. + +Please refer to the full [guide on branding](/docs/guides/manage/customize/branding). + +### Get user metadata + +Pass the scope `urn:zitadel:iam:user:metadata` to request a user's metadata. +Please refer to the full [guide on user-metadata](/docs/guides/manage/customize/user-metadata) for further details. + +### Access core apis + +Calling the [core API](/docs/apis/introduction) with the authenticated user, requires that the projectID of ZITADEL is included in the audience claim. + +This can be achieved by adding the scope `urn:zitadel:iam:org:project:id:zitadel:aud` to your applications authorization request. + +## How to use ZITADEL in your project + +Please refer to our [guide](/docs/guides/integrate/login-users) on how to login users. + +OpenID Connect certified libraries should allow you to customize the parameters and define scopes for the authorization request. You can also continue by using one of our [example applications](/docs/examples/introduction). diff --git a/docs/docs/apis/openidoauth/endpoints.md b/docs/docs/apis/openidoauth/endpoints.mdx similarity index 90% rename from docs/docs/apis/openidoauth/endpoints.md rename to docs/docs/apis/openidoauth/endpoints.mdx index 129aebdd0c..94a0168ac6 100644 --- a/docs/docs/apis/openidoauth/endpoints.md +++ b/docs/docs/apis/openidoauth/endpoints.mdx @@ -2,13 +2,13 @@ title: Endpoints --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; ## OpenID Connect 1.0 Discovery The OpenID Connect Discovery Endpoint is located within the issuer domain. - This would give us {your_domain}/.well-known/openid-configuration. +This would give us {your_domain}/.well-known/openid-configuration. **Link to spec.** [OpenID Connect Discovery 1.0 incorporating errata set 1](https://openid.net/specs/openid-connect-discovery-1_0.html) @@ -21,28 +21,36 @@ The authorization_endpoint is located with the login page, due to the need of ac ::: The authorization_endpoint is the starting point for all initial user authentications. The user agent (browser) will be redirected to this endpoint to -authenticate the user in exchange for an authorization_code (authorization code flow) or tokens (implicit flow). +authenticate the user in exchange for an authorization_code (authorization code flow) or tokens (implicit flow).
- Links to specs - + Links to specs +
### Required request parameters | Parameter | Description | -|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------| +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | client_id | The id of your client as shown in Console. | | redirect_uri | Callback uri of the authorization request where the code or tokens will be sent to. Must match exactly one of the preregistered in Console. | | response_type | Determines whether a `code`, `id_token token` or just `id_token` will be returned. Most use cases will need `code`. See flow guide for more info. | | scope | `openid` is required, see [Scopes](scopes) for more possible values. Scopes are space delimited, e.g. `openid email profile` | :::important -Following the [OIDC Core 1.0 specs](https://openid.net/specs/openid-connect-core-1_0.html#ScopeClaims) whenever an access_token is issued, -the id_token will not contain any claims of the scopes `profile`, `email`, `phone` and `address`. +Following the [OIDC Core 1.0 specs](https://openid.net/specs/openid-connect-core-1_0.html#ScopeClaims) whenever an access_token is issued, +the id_token will not contain any claims of the scopes `profile`, `email`, `phone` and `address`. Send the access_token to the [userinfo_endpoint](#userinfo_endpoint) or [introspection_endpoint](#introspection_endpoint) the retrieve these claims or set the `id_token_userinfo_assertion` Option ("User Info inside ID Token" in Console) to true. @@ -69,7 +77,7 @@ no additional parameters required | Parameter | Description | -|-----------------------|-------------------------------------------------------| +| --------------------- | ----------------------------------------------------- | | code_challenge | The SHA-256 value of the generated `code_verifier` | | code_challenge_method | Method used to generate the challenge, must be `S256` | @@ -84,7 +92,7 @@ no additional parameters required ### Additional parameters | Parameter | Description | -|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id_token_hint | Valid `id_token` (of an existing session) used to identity the subject. **SHOULD** be provided when using prompt `none`. | | login_hint | A valid logon name of a user. Will be used for username inputs or preselecting a user on `select_account`. Be sure to encode the hint correctly using url encoding (especially when using `+` or alike in the loginname) | | max_age | Seconds since the last active successful authentication of the user | @@ -95,10 +103,10 @@ no additional parameters required ### Successful Code Response -When your `response_type` was `code` and no error occurred, the following response will be returned: +When your `response_type` was `code` and no error occurred, the following response will be returned: | Property | Description | -|----------|-------------------------------------------------------------------------------| +| -------- | ----------------------------------------------------------------------------- | | code | Opaque string which will be necessary to request tokens on the token endpoint | | state | Unmodified `state` parameter from the request | @@ -107,7 +115,7 @@ When your `response_type` was `code` and no error occurred, the following respon When your `response_type` was either `it_token` or `id_token token` and no error occurred, the following response will be returned: | Property | Description | -|--------------|---------------------------------------------------------------------------------------| +| ------------ | ------------------------------------------------------------------------------------- | | access_token | Only returned if `response_type` included `token` | | expires_in | Number of second until the expiration of the `access_token` | | id_token | An `id_token` of the authorized user | @@ -125,7 +133,7 @@ the error will be display directly to the user on the auth server ::: | Property | Description | -|-------------------|----------------------------------------------------------------------| +| ----------------- | -------------------------------------------------------------------- | | error | An OAuth / OIDC [error_type](#authorize-errors) | | error_description | Description of the error type or additional information of the error | | state | Unmodified `state` parameter from the request | @@ -133,7 +141,7 @@ the error will be display directly to the user on the auth server #### Possible errors {#authorize-errors} | error_type | Possible reason | -|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | invalid_request | The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. | | invalid_scope | The requested scope is invalid. Typically the required `openid` value is missing. | | unauthorized_client | The client is not authorized to request an access_token using this method. Check in Console that the requested `response_type` is allowed in your application configuration. | @@ -142,12 +150,11 @@ the error will be display directly to the user on the auth server | interaction_required | The authorization server requires end-user interaction of some form to proceed. This error MAY be returned when the prompt parameter value in the Authentication Request is none, but the Authentication Request cannot be completed without displaying a user interface for end-user interaction. | | login_required | The authorization server requires end-user authentication. This error MAY be returned when the prompt parameter value in the Authentication Request is none, but the Authentication Request cannot be completed without displaying a user interface for end-user authentication. | - ## token_endpoint {your_domain}/oauth/v2/token -The token_endpoint will as the name suggests return various tokens (access, id and refresh) depending on the used `grant_type`. +The token_endpoint will as the name suggests return various tokens (access, id and refresh) depending on the used `grant_type`. When using [`authorization_code`](#authorization-code-grant-code-exchange) flow call this endpoint after receiving the code from the authorization_endpoint. When using [`refresh_token`](#authorization-code-grant-code-exchange) or [`urn:ietf:params:oauth:grant-type:jwt-bearer` (JWT Profile)](#jwt-profile-grant) you will call this endpoint directly. @@ -158,7 +165,7 @@ As mention above, when using `authorization_code` grant, this endpoint will be y #### Required request Parameters | Parameter | Description | -|--------------|---------------------------------------------------------------------------------------------------------------| +| ------------ | ------------------------------------------------------------------------------------------------------------- | | code | Code that was issued from the authorization request. | | grant_type | Must be `authorization_code` | | redirect_uri | Callback uri where the code was be sent to. Must match exactly the redirect_uri of the authorization request. | @@ -185,7 +192,7 @@ Send your `client_id` and `client_secret` as Basic Auth Header. Check [Client Se Send your `client_id` and `client_secret` as parameters in the body: | Parameter | Description | -|---------------|----------------------------------| +| ------------- | -------------------------------- | | client_id | client_id of the application | | client_secret | client_secret of the application | @@ -195,7 +202,7 @@ Send your `client_id` and `client_secret` as parameters in the body: Send your `code_verifier` for us to recompute the `code_challenge` of the authorization request. | Parameter | Description | -|---------------|--------------------------------------------------------------| +| ------------- | ------------------------------------------------------------ | | code_verifier | code_verifier previously used to generate the code_challenge | @@ -204,7 +211,7 @@ Send your `code_verifier` for us to recompute the `code_challenge` of the author Send a client assertion as JWT for us to validate the signature against the registered public key. | Parameter | Description | -|-----------------------|--------------------------------------------------------------------------------------------------------------| +| --------------------- | ------------------------------------------------------------------------------------------------------------ | | client_assertion | JWT built and signed according to [Using JWTs for Client Authentication](authn-methods#jwt-with-private-key) | | client_assertion_type | Must be `urn:ietf:params:oauth:client-assertion-type:jwt-bearer` | @@ -214,7 +221,7 @@ Send a client assertion as JWT for us to validate the signature against the regi #### Successful code response {#token-code-response} | Property | Description | -|---------------|---------------------------------------------------------------------------------------| +| ------------- | ------------------------------------------------------------------------------------- | | access_token | An `access_token` as JWT or opaque token | | expires_in | Number of second until the expiration of the `access_token` | | id_token | An `id_token` of the authorized user | @@ -227,7 +234,7 @@ Send a client assertion as JWT for us to validate the signature against the regi #### Required request Parameters | Parameter | Description | -|------------|-------------------------------------------------------------------------------------------------------------------------| +| ---------- | ----------------------------------------------------------------------------------------------------------------------- | | grant_type | Must be `urn:ietf:params:oauth:grant-type:jwt-bearer` | | assertion | JWT built and signed according to [Using JWTs for Authorization Grants](grant-types#using-jwts-as-authorization-grants) | | scope | [Scopes](scopes) you would like to request from ZITADEL. Scopes are space delimited, e.g. `openid email profile` | @@ -243,7 +250,7 @@ curl --request POST \ #### Successful JWT Profile response {#token-jwt-response} | Property | Description | -|--------------|---------------------------------------------------------------------------------------| +| ------------ | ------------------------------------------------------------------------------------- | | access_token | An `access_token` as JWT or opaque token | | expires_in | Number of second until the expiration of the `access_token` | | id_token | An `id_token` of the authorized service user | @@ -252,13 +259,13 @@ curl --request POST \ ### Refresh Token Grant -To request a new `access_token` without user interaction, you can use the `refresh_token` grant. +To request a new `access_token` without user interaction, you can use the `refresh_token` grant. See [offline_access Scope](scopes#standard-scopes) for how to request a `refresh_token` in the authorization request. #### Required request Parameters | Parameter | Description | -|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | grant_type | Must be `refresh_token` | | refresh_token | The refresh_token previously issued in the last authorization_code or refresh_token request. | | scope | [Scopes](scopes) you would like to request from ZITADEL for the new access_token. Must be a subset of the scope originally requested by the corresponding auth request. When omitted, the scopes requested by the original auth request will be reused. Scopes are space delimited, e.g. `openid email profile` | @@ -285,7 +292,7 @@ Send your `client_id` and `client_secret` as Basic Auth Header. Check [Client Se Send your `client_id` and `client_secret` as parameters in the body: | Parameter | Description | -|---------------|----------------------------------| +| ------------- | -------------------------------- | | client_id | client_id of the application | | client_secret | client_secret of the application | @@ -300,7 +307,7 @@ Send your `client_id` as parameter in the body. No authentication is required. Send a `client_assertion` as JWT for us to validate the signature against the registered public key. | Parameter | Description | -|-----------------------|--------------------------------------------------------------------------------------------------------------| +| --------------------- | ------------------------------------------------------------------------------------------------------------ | | client_assertion | JWT built and signed according to [Using JWTs for Client Authentication](authn-methods#jwt-with-private-key) | | client_assertion_type | Must be `urn:ietf:params:oauth:client-assertion-type:jwt-bearer` | @@ -310,7 +317,7 @@ Send a `client_assertion` as JWT for us to validate the signature against the re #### Successful refresh token response {#token-refresh-response} | Property | Description | -|---------------|---------------------------------------------------------------------------------------| +| ------------- | ------------------------------------------------------------------------------------- | | access_token | An `access_token` as JWT or opaque token | | expires_in | Number of second until the expiration of the `access_token` | | id_token | An `id_token` of the authorized user | @@ -321,7 +328,7 @@ Send a `client_assertion` as JWT for us to validate the signature against the re ### Error response | error_type | Possible reason | -|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | invalid_request | The request is missing a required parameter, includes an unsupported parameter value (other than grant type), repeats a parameter, includes multiple credentials, utilizes more than one mechanism for authenticating the client, or is otherwise malformed. | | invalid_scope | The requested scope is invalid, unknown, malformed, or exceeds the scope granted by the resource owner. | | unauthorized_client | The authenticated client is not authorized to use this authorization grant type. | @@ -338,7 +345,7 @@ This endpoint enables clients to validate an `acccess_token`, either opaque or J this endpoint will check if the token is not revoked (by client or logout). | Parameter | Description | -|-----------|-----------------| +| --------- | --------------- | | token | An access token | Depending on your authorization method you will have to provide additional parameters or headers: @@ -370,7 +377,7 @@ curl --request POST \ Send a `client_assertion` as JWT for us to validate the signature against the registered public key. | Parameter | Description | -|-----------------------|-------------------------------------------------------------------------------------------------------------| +| --------------------- | ----------------------------------------------------------------------------------------------------------- | | client_assertion | JWT built and signed according to [Using JWTs for Client Authentication](authn-methods#client-secret-basic) | | client_assertion_type | must be `urn:ietf:params:oauth:client-assertion-type:jwt-bearer` | @@ -388,25 +395,25 @@ curl --request POST \ ### Successful introspection response {#introspect-response} -Upon successful authorization of the client a response with the boolean `active` is returned, indicating if the provided token +Upon successful authorization of the client a response with the boolean `active` is returned, indicating if the provided token is active and the requesting client is part of the token audience. If `active` is **true**, further information will be provided: -| Property | Description | -|------------|------------------------------------------------------------------------| -| aud | The audience of the token | -| client_id | The client_id of the application the token was issued to | -| exp | Time the token expires (as unix time) | -| iat | Time of the token was issued at (as unix time) | -| iss | Issuer of the token | -| jti | Unique id of the token | -| nbf | Time the token must not be used before (as unix time) | -| scope | Space delimited list of scopes granted to the token | -| token_type | Type of the inspected token. Value is always `Bearer` | -| username | ZITADEL's login name of the user. Consist of `username@primarydomain` | +| Property | Description | +| ---------- | --------------------------------------------------------------------- | +| aud | The audience of the token | +| client_id | The client_id of the application the token was issued to | +| exp | Time the token expires (as unix time) | +| iat | Time of the token was issued at (as unix time) | +| iss | Issuer of the token | +| jti | Unique id of the token | +| nbf | Time the token must not be used before (as unix time) | +| scope | Space delimited list of scopes granted to the token | +| token_type | Type of the inspected token. Value is always `Bearer` | +| username | ZITADEL's login name of the user. Consist of `username@primarydomain` | -Additionally and depending on the granted scopes, information about the authorized user is provided. +Additionally and depending on the granted scopes, information about the authorized user is provided. Check the [Claims](claims) page if a specific claims might be returned and for detailed description. ### Error response {#introspect-error-response} @@ -420,6 +427,7 @@ If the authorization fails, an HTTP 401 with `invalid_client` will be returned. This endpoint will return information about the authorized user. Send the `access_token` of the **user** (not the client) as Bearer Token in the `authorization` header: + ```BASH curl --request GET \ --url {your_domain}/oidc/v1/userinfo @@ -446,9 +454,8 @@ If you revoke an `access_token` only the specific token will be revoked. When re the corresponding `access_token` will be revoked as well. ::: - | Parameter | Description | -|-----------|----------------------------------| +| --------- | -------------------------------- | | token | An access token or refresh token | Depending on your authorization method you will have to provide additional parameters or headers: @@ -473,7 +480,7 @@ Send your `client_id` and `client_secret` as Basic Auth Header. Check [Client Se Send your `client_id` and `client_secret` as parameters in the body: | Parameter | Description | -|---------------|----------------------------------| +| ------------- | -------------------------------- | | client_id | client_id of the application | | client_secret | client_secret of the application | @@ -483,7 +490,7 @@ Send your `client_id` and `client_secret` as parameters in the body: Send your `client_id` as parameters in the body: | Parameter | Description | -|-----------|------------------------------| +| --------- | ---------------------------- | | client_id | client_id of the application | @@ -492,7 +499,7 @@ Send your `client_id` as parameters in the body: Send a `client_assertion` as JWT for ZITADEL to verify the signature against the registered public key. | Parameter | Description | -|-----------------------|---------------------------------------------------------------------------------------------------------------| +| --------------------- | ------------------------------------------------------------------------------------------------------------- | | client_assertion | JWT created and signed according to [Using JWTs for Client Authentication](authn-methods#client-secret-basic) | | client_assertion_type | must be `urn:ietf:params:oauth:client-assertion-type:jwt-bearer` | @@ -514,10 +521,10 @@ curl --request POST \ The endpoint has to be opened in the user agent (browser) to terminate the user sessions. -No parameters are needed apart from the user agent cookie, but you can provide the following to customize the behaviour: +No parameters are needed apart from the user agent cookie, but you can provide the following to customize the behaviour: | Parameter | Description | -|--------------------------|----------------------------------------------------------------------------------------------------------------------------------| +| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | | id_token_hint | the id_token that was previously issued to the client | | client_id | client_id of the application | | post_logout_redirect_uri | Callback uri of the logout where the user (agent) will be redirected to. Must match exactly one of the preregistered in Console. | diff --git a/docs/docs/examples/login/flutter.md b/docs/docs/examples/login/flutter.md index cdfc779a8c..646f486561 100644 --- a/docs/docs/examples/login/flutter.md +++ b/docs/docs/examples/login/flutter.md @@ -166,12 +166,12 @@ Our Android and iOS Application opens ZITADEL's login within a custom tab, on We If everything works out correctly, your applications should look like this: -
+
Unauthenticated Flutter Authenticated
-
+
Unauthenticated Flutter Authenticated
diff --git a/docs/docs/examples/login/react.md b/docs/docs/examples/login/react.mdx similarity index 100% rename from docs/docs/examples/login/react.md rename to docs/docs/examples/login/react.mdx diff --git a/docs/docs/guides/integrate/authmethods/basic.mdx b/docs/docs/guides/integrate/authmethods/basic.mdx index be2d1bbd16..a621d89729 100644 --- a/docs/docs/guides/integrate/authmethods/basic.mdx +++ b/docs/docs/guides/integrate/authmethods/basic.mdx @@ -21,16 +21,7 @@ the authentication process. The latter is used to bind the client session with t You don't need any additional parameter for this request. We're identifying the app by the `client_id` parameter. -So your request might look like this (linebreaks and whitespace for display reasons): - -```curl -curl --request GET \ - --url '{your-domain}/oauth/v2/authorize - ?client_id=${client_id} - &redirect_uri=${redirect_uri} - &response_type=code - &scope=openid%20email%20profile' -``` +Try out the request in our [OIDC Authentication Request Playground](/docs/apis/openidoauth/authrequest?auth_method=Client%20Secret%20Basic). ### Additional parameters and customization diff --git a/docs/docs/guides/integrate/authmethods/jwtpk.mdx b/docs/docs/guides/integrate/authmethods/jwtpk.mdx index f97ae0a0c2..4d896b2481 100644 --- a/docs/docs/guides/integrate/authmethods/jwtpk.mdx +++ b/docs/docs/guides/integrate/authmethods/jwtpk.mdx @@ -23,14 +23,7 @@ You don't need any additional parameter for this request. We're identifying the So your request might look like this (linebreaks and whitespace for display reasons): -```curl -curl --request GET \ - --url '{your-domain}/oauth/v2/authorize - ?client_id=${client_id} - &redirect_uri=${redirect_uri} - &response_type=code - &scope=openid%20email%20profile' -``` +Try out the request in our [OIDC Authentication Request Playground](/docs/apis/openidoauth/authrequest?auth_method=Client%20Secret%20Basic). ### Additional parameters and customization diff --git a/docs/docs/guides/integrate/authmethods/pkce.mdx b/docs/docs/guides/integrate/authmethods/pkce.mdx index 544e82cafa..523bc13830 100644 --- a/docs/docs/guides/integrate/authmethods/pkce.mdx +++ b/docs/docs/guides/integrate/authmethods/pkce.mdx @@ -29,18 +29,7 @@ the hash as well and to verify it's correct. In order to do so you're required t For example for `random-string` the code_challenge would be `9az09PjcfuENS7oDK7jUd2xAWRb-B3N7Sr3kDoWECOY` -The request would finally look like (linebreaks and whitespace for display reasons): - -```curl -curl --request GET \ - --url '{your-domain}/oauth/v2/authorize - ?client_id=${client_id} - &redirect_uri=${redirect_uri} - &response_type=code - &scope=openid%20email%20profile - &code_challenge=${code_challenge} - &code_challenge_method=S256' -``` +Try out the request in our [OIDC Authentication Request Playground](/docs/apis/openidoauth/authrequest). ### Additional parameters and customization diff --git a/docs/docs/guides/integrate/oauth-recommended-flows.md b/docs/docs/guides/integrate/oauth-recommended-flows.md index 6db2f7de00..508cf4f18c 100644 --- a/docs/docs/guides/integrate/oauth-recommended-flows.md +++ b/docs/docs/guides/integrate/oauth-recommended-flows.md @@ -2,7 +2,8 @@ title: Recommended authorization flows --- - +
+ @@ -24,9 +25,9 @@ title: Recommended authorization flows Basic knowledge about federated identities +
Description Learn about the different authentication flows and which flow we recommend you should use for your application.
- ## Introduction Before we get into setting up our first application within ZITADEL, we need to go through some basics on how to obtain an authorization with OpenID Connect 1.x and OAuth 2.x. @@ -43,21 +44,22 @@ Although Federated Identities are not a new concept ([RFC 6749](https://tools.ie The aforementioned RFC provides us with some [problems and limitations](https://tools.ietf.org/html/rfc6749#section-1) of the client-server authentication, where a client requests a protected resource on the server by authenticating with the user’s credentials: -* Applications need to store users credentials (eg, password) for future use; compromise of any application results in compromise of the end-users credentials -* Servers are required to support password authentication -* Without means of limiting scope when providing the user’s credentials, the application gains overly broad access to protected resources -* Users cannot revoke access for a single application, but only for all by changing credentials +- Applications need to store users credentials (eg, password) for future use; compromise of any application results in compromise of the end-users credentials +- Servers are required to support password authentication +- Without means of limiting scope when providing the user’s credentials, the application gains overly broad access to protected resources +- Users cannot revoke access for a single application, but only for all by changing credentials So what do we want to achieve with delegated authentication? -* Instead of implementing authentication on each server and trusting each server - * Users only **authenticate** with a trusted server (ie. ZITADEL), that validates the user’s identity through a challenge (eg, multiple authentication factors) and issues an **ID token** (OpenID Connect 1.x) - * Applications have means of **validating the integrity** of presented access and ID tokens +- Instead of implementing authentication on each server and trusting each server -* Instead of sending around the user’s credentials - * Clients may access protected resources with an **access token** that is only valid for specific scope and limited lifetime (OAuth 2.x) - * Users have to **authorize** applications to access certain [**scopes**](../../apis/openidoauth/scopes) (eg, email address or custom roles). Applications can request [**claims**](../../apis/openidoauth/claims) (key:value pairs, eg email address) for the authorized scopes with the access token or ID token from ZITADEL - * Access tokens are bearer tokens, meaning that possession of the token provides access to a resource. But the tokens expire frequently and the application must request a new access token via **refresh token** or the user must reauthenticate + - Users only **authenticate** with a trusted server (ie. ZITADEL), that validates the user’s identity through a challenge (eg, multiple authentication factors) and issues an **ID token** (OpenID Connect 1.x) + - Applications have means of **validating the integrity** of presented access and ID tokens + +- Instead of sending around the user’s credentials + - Clients may access protected resources with an **access token** that is only valid for specific scope and limited lifetime (OAuth 2.x) + - Users have to **authorize** applications to access certain [**scopes**](../../apis/openidoauth/scopes) (eg, email address or custom roles). Applications can request [**claims**](../../apis/openidoauth/claims) (key:value pairs, eg email address) for the authorized scopes with the access token or ID token from ZITADEL + - Access tokens are bearer tokens, meaning that possession of the token provides access to a resource. But the tokens expire frequently and the application must request a new access token via **refresh token** or the user must reauthenticate ![Overview federated identities](/img/guides/consulting_federated_identities_basics.png) @@ -74,19 +76,20 @@ As mentioned in the beginning of this module, there are two main determinants fo OAuth 2.x defines two [client types](https://tools.ietf.org/html/rfc6749#section-2.1) based on their ability to maintain the confidentiality of their client credentials: -* Confidential: Clients capable of maintaining the confidentiality of their credentials (e.g., client implemented on a secure server with restricted access to the client credentials), or capable of secure client authentication using other means. -* Public: Clients incapable of maintaining the confidentiality of their credentials (e.g., clients executing on the device used by the resource owner, such as an installed native application or a web browser-based application), and incapable of secure client authentication via any other means. +- Confidential: Clients capable of maintaining the confidentiality of their credentials (e.g., client implemented on a secure server with restricted access to the client credentials), or capable of secure client authentication using other means. +- Public: Clients incapable of maintaining the confidentiality of their credentials (e.g., clients executing on the device used by the resource owner, such as an installed native application or a web browser-based application), and incapable of secure client authentication via any other means. The following table gives you a brief overview of different client profiles. - +
+ - + @@ -95,7 +98,7 @@ The following table gives you a brief overview of different client profiles. - + @@ -103,6 +106,7 @@ The following table gives you a brief overview of different client profiles. +
Confidentiality of client credentials Client profile Examples of clients
PublicPublic User-Agent Single-page web applications (SPA), generally JavaScript executed in Browser
Native, Mobile, or Desktop applications
ConfidentialConfidential Web Server-side web applications such as java, .net, …
Machine-to-Machine APIs, generally services without direct user-interaction at the authorization server
## Our recommended authorization flows @@ -111,7 +115,7 @@ We recommend using the flow **“Authorization Code with Proof Key of Code Excha If you don’t have any technical limitations, you should favor the flow Authorization Code with PKCE over other methods. The PKCE part makes the flow resistant against authorization code interception attack as described well in RFC7636. -*So what about APIs?* +_So what about APIs?_ We recommend using **“JWT bearer token with private key”** ([RFC7523](https://tools.ietf.org/html/rfc7523)) for Machine-to-Machine clients. @@ -125,13 +129,13 @@ In case you need alternative flows and their advantages and drawbacks, there wil ## Summary (3) -* Federated Identities solve key problems and challenges with traditional server-client architecture -* Use “Authorization Code with Proof Key of Code Exchange (PKCE)” for User-Agent, Native, and Web clients -* “JWT bearer token with private key” for Machine-to-Machine clients -* There are alternative flows and fallback strategies supported by ZITADEL, if these flows are technically not possible +- Federated Identities solve key problems and challenges with traditional server-client architecture +- Use “Authorization Code with Proof Key of Code Exchange (PKCE)” for User-Agent, Native, and Web clients +- “JWT bearer token with private key” for Machine-to-Machine clients +- There are alternative flows and fallback strategies supported by ZITADEL, if these flows are technically not possible ### Where to go from here -* Applications -* Service Accounts -* Alternative authentication flows (aka. "The Zoo") +- Applications +- Service Accounts +- Alternative authentication flows (aka. "The Zoo") diff --git a/docs/docs/guides/manage/customize/behavior.md b/docs/docs/guides/manage/customize/behavior.md index 5cb9f8086b..6b73990c93 100644 --- a/docs/docs/guides/manage/customize/behavior.md +++ b/docs/docs/guides/manage/customize/behavior.md @@ -9,7 +9,7 @@ After users register using an external identity provider, the action assigns the Before you start, make sure you have everything set up correctly. -- You need to be at least a ZITADEL *ORG_OWNER* +- You need to be at least a ZITADEL _ORG_OWNER_ - Your ZITADEL organization needs to have the actions feature enabled. - [Your ZITADEL organization needs to have at least one external identity provider enabled](../../integrate/identity-brokering) - [You need to have at least one role configured for a project](../console/projects) @@ -24,12 +24,11 @@ Before you start, make sure you have everything set up correctly. ## Create the action 1. Select the **Actions** navigation item. -1. In the **Actions ** section, select the **+ New** button. +1. In the **Actions ** section, select the **+ New** button. 1. Give the new action the name `addGrant`. 1. Paste this snippet into the multiline textfield. 1. Replace the snippets placeholders and select **Save**. - ```js reference https://github.com/zitadel/actions/blob/main/examples/add_user_grant.js ``` @@ -38,11 +37,11 @@ https://github.com/zitadel/actions/blob/main/examples/add_user_grant.js Now, make the action hook into the [external authentication flow](../../../apis/actions/register-flow#external-authentication). -1. In the **Flows ** section, select the **+ New** button. -2. Select the **Flow Type** *External Authentication*. -3. Select the **Trigger Type** *Post Creation*. -4. In the **Actions** dropdown, check *addGrant*. -5. Select the **Save** button. +1. In the **Flows ** section, select the **+ New** button. +1. Select the **Flow Type** _External Authentication_. +1. Select the **Trigger Type** _Post Creation_. +1. In the **Actions** dropdown, check _addGrant_. +1. Select the **Save** button. @@ -51,4 +50,4 @@ New users automatically are assiged a role now if they register by authenticatin ## What's next? - [Read more about the concepts around actions](../../../concepts/features/actions) -- [Read more about all the options you have with actions](../../../apis/actions/introduction) \ No newline at end of file +- [Read more about all the options you have with actions](../../../apis/actions/introduction) diff --git a/docs/docs/guides/manage/customize/branding.md b/docs/docs/guides/manage/customize/branding.md index f2b3368b01..6242bfeb7e 100644 --- a/docs/docs/guides/manage/customize/branding.md +++ b/docs/docs/guides/manage/customize/branding.md @@ -43,22 +43,10 @@ If you like to trigger your settings for your applications you have different po ### 1. Primary Domain Scope -Send a [primary domain scope](../../../apis/openidoauth/scopes) with your [authorization request](../../integrate/login-users#auth-request) to trigger your organization. +Send a [reserved scope](../../../apis/openidoauth/scopes) with your [authorization request](../../integrate/login-users#auth-request) to trigger your organization. The primary domain scope will restrict the login to your organization, so only users of your own organization will be able to login. -See the following link as an example. Users will be able to register and login to the organization that verified the @caos.ch domain only. - -``` -https://{your_domain.zitadel.cloud}/oauth/v2/authorize?client_id=69234247558357051%40zitadel&scope=openid%20profile%20urn%3Azitadel%3Aiam%3Aorg%3Adomain%3Aprimary%3Acaos.ch&redirect_uri=https%3A%2F%2Fconsole.zitadel.cloud%2Fauth%2Fcallback&state=testd&response_type=code&nonce=test&code_challenge=UY30LKMy4bZFwF7Oyk6BpJemzVblLRf0qmFT8rskUW0 -``` - -:::info -Make sure to replace the domain `caos.ch` with your own domain to trigger the correct branding. -::: - -:::caution -This example uses the ZITADEL Cloud Application for demonstration. You need to create your own auth request with your applications parameters. Please see the docs to construct an [Auth Request]../integrate/login-users#auth-request). -::: +You can use our [OpenID Authentication Request Playground](/docs/apis/openidoauth/authrequest) to learn more about how to trigger an [organization's policies and branding](/docs/apis/openidoauth/authrequest#organization-policies-and-branding). ### 2. Setting on your Project diff --git a/docs/docs/guides/manage/customize/user-metadata.md b/docs/docs/guides/manage/customize/user-metadata.md index 143b06f724..7a692ea5e3 100644 --- a/docs/docs/guides/manage/customize/user-metadata.md +++ b/docs/docs/guides/manage/customize/user-metadata.md @@ -107,33 +107,7 @@ Export the result to the environment variable `BASIC_AUTH`. ### Create Auth Request -You need to create a valid auth request, including the reserved scope `urn:zitadel:iam:user:metadata`. Please refer to our API documentation for more information about [reserved scopes](../../../apis/openidoauth/scopes#reserved-scopes). - - - - - -```bash -echo "${ZITADEL_DOMAIN}/oauth/v2/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=openid email profile urn:zitadel:iam:user:metadata" -``` - - - - - -```zsh -open "${ZITADEL_DOMAIN}/oauth/v2/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=openid email profile urn:zitadel:iam:user:metadata" -``` - - - - -```bash -wslview "${ZITADEL_DOMAIN}/oauth/v2/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=openid email profile urn:zitadel:iam:user:metadata" -``` - - - +You need to create a valid auth request, including the reserved scope `urn:zitadel:iam:user:metadata`. Please refer to our API documentation for more information about [reserved scopes](../../../apis/openidoauth/scopes#reserved-scopes) or try it out in our [OIDC Authrequest Playground](/docs/apis/openidoauth/authrequest?scope=openid%20email%20profile%20urn%3Azitadel%3Aiam%3Auser%3Ametadata). Login with the user to which you have added the metadata. After the login you will be redirected. diff --git a/docs/docs/guides/solution-scenarios/introduction.mdx b/docs/docs/guides/solution-scenarios/introduction.mdx index b6d51fbcb0..bf375a8ea3 100644 --- a/docs/docs/guides/solution-scenarios/introduction.mdx +++ b/docs/docs/guides/solution-scenarios/introduction.mdx @@ -18,7 +18,7 @@ This guide attempts to explain real-world implementations and break them down in img", background: { @@ -77,19 +84,22 @@ module.exports = { position: "left", }, { - href: "https://github.com/zitadel/zitadel", - label: "GitHub", + type: "html", position: "right", + value: + '', }, { - href: "https://zitadel.com/chat", - label: "Chat", + type: "html", position: "right", + value: + '', }, { - label: "Discussions", + type: "html", position: "right", - href: "https://github.com/zitadel/zitadel/discussions", + value: + '', }, ], }, @@ -193,6 +203,19 @@ module.exports = { }, ], ], - plugins: [require.resolve("docusaurus-plugin-image-zoom")], + plugins: [ + require.resolve("docusaurus-plugin-image-zoom"), + async function myPlugin(context, options) { + return { + name: "docusaurus-tailwindcss", + configurePostCss(postcssOptions) { + // Appends TailwindCSS and AutoPrefixer. + postcssOptions.plugins.push(require("tailwindcss")); + postcssOptions.plugins.push(require("autoprefixer")); + return postcssOptions; + }, + }; + }, + ], themes: ["@saucelabs/theme-github-codeblock"], }; diff --git a/docs/package.json b/docs/package.json index 824667402d..2a2d04323a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -47,6 +47,8 @@ "@docusaurus/theme-classic": "^2.1.0", "@docusaurus/theme-search-algolia": "^2.1.0", "@docusaurus/types": "^2.1.0", + "@headlessui/react": "^1.7.4", + "@heroicons/react": "^2.0.13", "@jridgewell/resolve-uri": "3.0.7", "@jridgewell/set-array": "1.1.1", "@jridgewell/trace-mapping": "0.3.11", @@ -63,16 +65,17 @@ "@types/react-router-config": "5.0.6", "@types/react-router-dom": "5.3.3", "@types/ws": "8.5.3", - "autoprefixer": "10.4.7", + "autoprefixer": "^10.4.13", "axios": "0.25.0", "babel-loader": "8.2.5", "body-parser": "1.20.0", "bonjour-service": "1.0.12", "boxen": "6.2.1", + "buffer": "^6.0.3", "clean-css": "5.3.0", "cli-boxes": "3.0.0", "cli-table3": "0.6.2", - "clsx": "^1.1.1", + "clsx": "^1.2.1", "cookie": "0.5.0", "copy-webpack-plugin": "10.2.4", "core-js": "3.22.5", @@ -106,6 +109,7 @@ "node-forge": "1.3.1", "object-inspect": "1.12.0", "plugin-image-zoom": "ataft/plugin-image-zoom", + "postcss": "^8.4.19", "postcss-calc": "8.2.4", "postcss-colormin": "5.3.0", "postcss-convert-values": "5.1.0", @@ -179,5 +183,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "tailwindcss": "^3.2.4" } } diff --git a/docs/sidebars.js b/docs/sidebars.js index d75dd75981..9bd5c716dc 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -236,6 +236,7 @@ module.exports = { collapsed: false, items: [ "apis/openidoauth/endpoints", + "apis/openidoauth/authrequest", "apis/openidoauth/scopes", "apis/openidoauth/claims", "apis/openidoauth/authn-methods", diff --git a/docs/src/components/apicard.jsx b/docs/src/components/apicard.jsx index ce2113797a..c8025ae1d3 100644 --- a/docs/src/components/apicard.jsx +++ b/docs/src/components/apicard.jsx @@ -1,34 +1,32 @@ -import React from 'react'; +import React from "react"; -import styles from '../css/apicard.module.css'; +import styles from "../css/apicard.module.css"; -export function ApiCard({ title, type, label, children}) { - let style = styles.apiauth; +export function ApiCard({ type, children }) { + let classes = ""; switch (type) { - case 'AUTH': - style = styles.apiauth; + case "AUTH": + classes = "bg-green-500/10 dark:bg-green-500/20"; break; - case 'MGMT': - style = styles.apimgmt; + case "MGMT": + classes = "bg-blue-500/10 dark:bg-blue-500/20"; break; - case 'ADMIN': - style = styles.apiadmin; + case "ADMIN": + classes = "bg-red-500/10 dark:bg-red-500/20"; break; - case 'SYSTEM': - style = styles.apisystem; + case "SYSTEM": + classes = "bg-yellow-500/10 dark:bg-yellow-500/20"; + break; + case "ASSET": + classes = "bg-black/10 dark:bg-black/20"; break; - case 'ASSET': - style = styles.apiasset; - break; } - + return ( -
- {/* {title &&

{title}

} */} - {/*

- -

*/} +
{children}
- ) + ); } diff --git a/docs/src/components/authrequest.jsx b/docs/src/components/authrequest.jsx new file mode 100644 index 0000000000..871be22fb1 --- /dev/null +++ b/docs/src/components/authrequest.jsx @@ -0,0 +1,594 @@ +import React, { Fragment, useContext, useEffect, useState } from "react"; +import { AuthRequestContext } from "../utils/authrequest"; +import { Listbox } from "@headlessui/react"; +import { Transition } from "@headlessui/react"; +import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/solid"; +import clsx from "clsx"; +import { Buffer } from "buffer"; + +export function SetAuthRequest() { + const { + instance: [instance, setInstance], + clientId: [clientId, setClientId], + redirectUri: [redirectUri, setRedirectUri], + responseType: [responseType, setResponseType], + scope: [scope, setScope], + prompt: [prompt, setPrompt], + authMethod: [authMethod, setAuthMethod], + codeVerifier: [codeVerifier, setCodeVerifier], + codeChallenge: [codeChallenge, setCodeChallenge], + loginHint: [loginHint, setLoginHint], + idTokenHint: [idTokenHint, setIdTokenHint], + organizationId: [organizationId, setOrganizationId], + } = useContext(AuthRequestContext); + + const inputClasses = (error) => + clsx({ + "w-full sm:text-sm h-10 mb-2px rounded-md p-2 bg-input-light-background dark:bg-input-dark-background transition-colors duration-300": true, + "border border-solid border-input-light-border dark:border-input-dark-border hover:border-black hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500": true, + "focus:outline-none focus:ring-0 text-base text-black dark:text-white placeholder:italic placeholder-gray-700 dark:placeholder-gray-700": true, + "border border-warn-light-500 dark:border-warn-dark-500 hover:border-warn-light-500 hover:dark:border-warn-dark-500 focus:border-warn-light-500 focus:dark:border-warn-dark-500": + error, + }); + + const labelClasses = "text-sm"; + const hintClasses = "mt-1 text-xs text-black/50 dark:text-white/50"; + + const allResponseTypes = ["code", "id_token", "id_token token"]; + + const allPrompts = ["", "login", "select_account", "create"]; + + const allAuthMethods = ["(none) PKCE", "Client Secret Basic"]; + + const CodeSnipped = ({ cname, children }) => { + return {children}; + }; + + const allScopes = [ + "openid", + "email", + "profile", + "address", + "offline_access", + "urn:zitadel:iam:org:project:id:zitadel:aud", + "urn:zitadel:iam:user:metadata", + `urn:zitadel:iam:org:id:${ + organizationId ? organizationId : "[organizationId]" + }`, + ]; + + const [scopeState, setScopeState] = useState( + [true, true, true, false, false, false, false, false] + // new Array(allScopes.length).fill(false) + ); + + function toggleScope(position, forceChecked = false) { + const updatedCheckedState = scopeState.map((item, index) => + index === position ? !item : item + ); + + if (forceChecked) { + updatedCheckedState[position] = true; + } + + setScopeState(updatedCheckedState); + + setScope( + updatedCheckedState + .map((checked, i) => (checked ? allScopes[i] : "")) + .filter((s) => !!s) + .join(" ") + ); + } + + // Encoding functions for code_challenge + + async function string_to_sha256(message) { + // encode as UTF-8 + const msgBuffer = new TextEncoder().encode(message); + // hash the message + const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer); + // return ArrayBuffer + return hashBuffer; + } + async function encodeCodeChallenge(codeChallenge) { + let arrayBuffer = await string_to_sha256(codeChallenge); + let buffer = Buffer.from(arrayBuffer); + let base64 = buffer.toString("base64"); + let base54url = base64_to_base64url(base64); + return base54url; + } + var base64_to_base64url = function (input) { + input = input.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, ""); + return input; + }; + + useEffect(async () => { + setCodeChallenge(await encodeCodeChallenge(codeVerifier)); + }, [codeVerifier]); + + useEffect(() => { + const newScopeState = allScopes.map((s) => scope.includes(s)); + if (scopeState !== newScopeState) { + setScopeState(newScopeState); + } + }, [scope]); + + return ( +
+
Your Domain
+
+ + { + const value = event.target.value; + setInstance(value); + }} + /> + + The domain of your zitadel instance. + +
+ +
Required Parameters
+ +
+
+ + { + const value = event.target.value; + setClientId(value); + }} + /> + + This is the resource id of an application. It's the application + where you want your users to login. + +
+ +
+ + { + const value = event.target.value; + setRedirectUri(value); + }} + /> + + Must be one of the pre-configured redirect uris for your + application. + +
+ +
+ + +
+ + {responseType} + + + + + Determines whether a code, id_token token or just id_token will + be returned. Most use cases will need code. + + + + {allResponseTypes.map((type, typeIdx) => ( + + `relative cursor-default select-none py-2 pl-10 pr-4 ${ + active ? "bg-black/20 dark:bg-white/20" : "" + }` + } + value={type} + > + {({ selected }) => ( + <> + + {type} + + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ +
+
+ +
+
+ + +
+ + {authMethod} + + + + + Authentication method + + + + {allAuthMethods.map((type, typeIdx) => ( + + `h-10 relative cursor-default select-none py-2 pl-10 pr-4 ${ + active ? "bg-black/20 dark:bg-white/20" : "" + }` + } + value={type} + > + {({ selected }) => ( + <> + + {type} + + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ +
+ {authMethod === "(none) PKCE" && ( +
+ + { + const value = event.target.value; + setCodeVerifier(value); + }} + /> + + Authentication method PKCE + requires a random string used to generate a{" "} + code_challenge + +
+ )} +
+ +
Additional Parameters
+ +
+
+
+ + +
+ + {prompt} + + + + + Define how the user should be prompted on login and register. + + + + {allPrompts.map((type, typeIdx) => ( + + `h-10 relative cursor-default select-none py-2 pl-10 pr-4 ${ + active ? "bg-black/20 dark:bg-white/20" : "" + }` + } + value={type} + > + {({ selected }) => ( + <> + + {type} + + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ +
+
+ + {prompt === "select_account" && ( +
+ + { + const value = event.target.value; + setLoginHint(value); + }} + /> + + This in combination with a{" "} + select_account{" "} + prompt the login will + preselect a user. + +
+ )} + + {/*
+ + { + const value = event.target.value; + setIdTokenHint(value); + }} + /> + + This in combination with a{" "} + select_account{" "} + prompt the login will + preselect a user. + +
*/} +
+ +
Scopes
+ +
+
+ + { + const value = event.target.value; + setOrganizationId(value); + allScopes[7] = `urn:zitadel:iam:org:id:${ + value ? value : "[organizationId]" + }`; + toggleScope(8, true); + setScope( + scopeState + .map((checked, i) => (checked ? allScopes[i] : "")) + .filter((s) => !!s) + .join(" ") + ); + }} + /> + + Enforce organization policies and user membership by requesting the{" "} + scope{" "} + urn:zitadel:iam:org:id:{organizationId} + +
+
+
+

Scopes

+ + Request additional information about the user with scopes. The claims + will be returned on the userinfo_endpoint or in the token (when + configured). + + {allScopes.map((scope, scopeIndex) => { + return ( +
+ { + toggleScope(scopeIndex); + }} + /> + +
+ ); + })} +
+ + {/*
Optional Parameters
+ +
+
+ + { + const value = event.target.value; + setIdTokenHint(value); + }} + /> +
+
*/} + +
+ Your authorization request +
+ +
+ + + {instance.endsWith("/") ? instance : instance + "/"} + + oauth/v2/authorize? + {`client_id=${encodeURIComponent( + clientId + )}`} + {`&redirect_uri=${encodeURIComponent( + redirectUri + )}`} + + {`&response_type=${encodeURIComponent(responseType)}`} + + {`&scope=${encodeURIComponent( + scope + )}`} + {prompt && ( + {`&prompt=${encodeURIComponent( + prompt + )}`} + )} + {loginHint && prompt === "select_account" && ( + {`&login_hint=${encodeURIComponent( + loginHint + )}`} + )} + {authMethod === "(none) PKCE" && ( + {`&code_challenge=${encodeURIComponent( + codeChallenge + )}&code_challenge_method=S256`} + )} + + + { + window.plausible("OIDC Playground", { + props: { method: "Try it out", pageloc: "Authorize" }, + }); + }} + target="_blank" + className="mt-2 flex flex-row items-center py-2 px-4 text-white bg-green-500 dark:bg-green-600 hover:dark:bg-green-500 hover:text-white rounded-md hover:no-underline font-semibold text-sm" + href={`${ + instance.endsWith("/") ? instance : instance + "/" + }oauth/v2/authorize?client_id=${encodeURIComponent( + clientId + )}&redirect_uri=${encodeURIComponent( + redirectUri + )}&response_type=${encodeURIComponent( + responseType + )}&scope=${encodeURIComponent(scope)}${ + prompt ? `&prompt=${encodeURIComponent(prompt)}` : "" + }${ + loginHint && prompt === "select_account" + ? `&login_hint=${encodeURIComponent(loginHint)}` + : "" + }${ + authMethod === "(none) PKCE" + ? `&code_challenge=${encodeURIComponent( + codeChallenge + )}&code_challenge_method=S256` + : "" + }`} + > + Try it out + + +
+
+ ); +} diff --git a/docs/src/components/column.jsx b/docs/src/components/column.jsx index b44be4a174..f2314f799a 100644 --- a/docs/src/components/column.jsx +++ b/docs/src/components/column.jsx @@ -1,11 +1,7 @@ -import React from 'react'; +import React from "react"; -import styles from '../css/column.module.css'; - -export default function Column({children}) { - return ( -
- {children} -
- ) -} \ No newline at end of file +export default function Column({ children }) { + return ( +
{children}
+ ); +} diff --git a/docs/src/components/environment.jsx b/docs/src/components/environment.jsx new file mode 100644 index 0000000000..37f5eb169d --- /dev/null +++ b/docs/src/components/environment.jsx @@ -0,0 +1,133 @@ +import React, { useContext, useEffect } from "react"; +import { EnvironmentContext } from "../utils/environment"; +import styles from "../css/environment.module.css"; +import Interpolate from "@docusaurus/Interpolate"; +import CodeBlock from "@theme/CodeBlock"; + +export function SetEnvironment() { + const { + instance: [instance, setInstance], + clientId: [clientId, setClientId], + } = useContext(EnvironmentContext); + + useEffect(() => { + const params = new URLSearchParams(window.location.search); // id=123 + const clientId = params.get("clientId"); + const instance = params.get("instance"); + + const localClientId = localStorage.getItem("clientId"); + const localInstance = localStorage.getItem("instance"); + + setClientId(clientId ?? localClientId ?? ""); + setInstance(instance ?? localInstance ?? ""); + }, []); + + function setAndSaveInstance(value) { + if (instance !== value) { + localStorage.setItem("instance", value); + setInstance(value); + } + } + + function setAndSaveClientId(value) { + if (clientId !== value) { + localStorage.setItem("clientId", value); + setClientId(value); + } + } + + return ( +
+
+ + { + const value = event.target.value; + if (value) { + setAndSaveInstance(value); + } else { + localStorage.removeItem("instance"); + } + }} + /> +
+ +
+ +
+ + { + const value = event.target.value; + if (value) { + setAndSaveClientId(value); + } else { + localStorage.removeItem("clientId"); + } + }} + /> +
+
+ ); +} + +export function Env({ name }) { + const env = useContext(EnvironmentContext); + const variable = env[name]; + + return
{variable}
; +} + +export function EnvInterpolate({ children }) { + const { + instance: [instance], + clientId: [clientId], + } = useContext(EnvironmentContext); + + return ( + + {children} + + ); +} + +export function EnvCode({ + language, + title, + code, + showLineNumbers = false, + children, +}) { + const { + instance: [instance], + clientId: [clientId], + } = useContext(EnvironmentContext); + + return ( + + + {children} + + + ); +} diff --git a/docs/src/components/list.jsx b/docs/src/components/list.jsx index cdfea92152..276b2ba280 100644 --- a/docs/src/components/list.jsx +++ b/docs/src/components/list.jsx @@ -1,113 +1,181 @@ -import React from 'react'; +import React from "react"; -import styles from '../css/list.module.css'; +import styles from "../css/list.module.css"; export const ICONTYPE = { - START:
- -
, - TASKS:
- -
, - ARCHITECTURE:
- -
, - INSTANCE:
- -
, - LOGIN:
- -
, - PRIVATELABELING:
- -
, - TEXTS:
- -
, - POLICY:
- -
, - SERVICE:
- -
, - STORAGE:
- -
, - FOLDER:
- -
, - FILE:
- -
, - SYSTEM:
- -
, - APIS:
- -
, - HELP:
- -
, - HELP_REGISTER:
- -
, - HELP_LOGIN:
- -
, - HELP_PASSWORDLESS:
- -
, - HELP_PASSWORD:
- - - -
, - HELP_FACTORS:
- -
, - HELP_PHONE:
- -
, - HELP_EMAIL:
- -
, - HELP_SOCIAL:
- -
, + START: ( +
+ +
+ ), + TASKS: ( +
+ +
+ ), + ARCHITECTURE: ( +
+ +
+ ), + INSTANCE: ( +
+ +
+ ), + LOGIN: ( +
+ +
+ ), + PRIVATELABELING: ( +
+ +
+ ), + TEXTS: ( +
+ +
+ ), + POLICY: ( +
+ +
+ ), + SERVICE: ( +
+ +
+ ), + STORAGE: ( +
+ +
+ ), + FOLDER: ( +
+ +
+ ), + FILE: ( +
+ +
+ ), + SYSTEM: ( +
+ +
+ ), + APIS: ( +
+ +
+ ), + HELP: ( +
+ +
+ ), + HELP_REGISTER: ( +
+ +
+ ), + HELP_LOGIN: ( +
+ +
+ ), + HELP_PASSWORDLESS: ( +
+ +
+ ), + HELP_PASSWORD: ( +
+ + + +
+ ), + HELP_FACTORS: ( +
+ +
+ ), + HELP_PHONE: ( +
+ +
+ ), + HELP_EMAIL: ( +
+ +
+ ), + HELP_SOCIAL: ( +
+ +
+ ), }; -export function ListElement({ link, iconClasses,roundClasses, label, type, title, description}) { +export function ListElement({ + link, + iconClasses, + roundClasses, + label, + type, + title, + description, +}) { return ( - {type ? type : - iconClasses &&
- { label ? {label}: } -
- } + {type + ? type + : iconClasses && ( +
+ {label ? ( + {label} + ) : ( + + )} +
+ )}

{title}

{description}

 - ) + ); } -export function ListWrapper({children, title, columns}) { +export function ListWrapper({ children, title, columns }) { return (
{title && {title}} {children}
- ) + ); } -export function HomeListWrapper({children, image}) { +export function HomeListWrapper({ children, image }) { return (
{image} -
- {children} -
+
{children}
- ) -} \ No newline at end of file + ); +} diff --git a/docs/src/css/apicard.module.css b/docs/src/css/apicard.module.css index 9ac0cdebbe..047e9b4ef4 100644 --- a/docs/src/css/apicard.module.css +++ b/docs/src/css/apicard.module.css @@ -1,53 +1,10 @@ .apicard { - border-radius: 0.5rem; - display: flex; - flex-direction: column; - min-width: 200px; - background: var(--card-background); - padding: 1rem; text-decoration: none; - transition: all 0.2 ease-in-out; - margin: 1rem 0; } -.apiauth { - background: var(--apiauthbackground); -} - -.apimgmt { - background: var(--apimgmtbackground); -} - -.apiadmin { - background: var(--apiadminbackground); -} - -.apisystem { - background: var(--apisystembackground); -} - -.apiasset { - background: var(--apiassetbackground); -} - -.apicard:hover { - text-decoration: none; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); -} - -/* .apicard h2 { - color: white; -} - -.apicard a { - color: #bfc1cc; -} */ - .apicard h3, h4, h5 { - /* color: white; */ margin: 0.5rem 0 0 0; } @@ -55,26 +12,3 @@ h5 { font-size: 14px; margin: 0; } - -.fillspace { - flex: 1; -} - -.bottom { - display: flex; - align-items: center; -} - -.bottomicon { - width: 24px; - margin-right: 0.5rem; - color: var(--ifm-font-color-base); -} - -.bottomspan { - font-size: 12px; - font-weight: 600; - color: var(--ifm-font-color-base); - text-transform: uppercase; - margin: 0; -} diff --git a/docs/src/css/column.module.css b/docs/src/css/column.module.css deleted file mode 100644 index 93fb8bd129..0000000000 --- a/docs/src/css/column.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.column { - display: grid; - grid-template-columns: 1fr; - grid-gap: 1rem; -} - -.item { - border-radius: 1rem; - transition: all 0.2s ease; - padding: 1rem; - display: flex; - flex-direction: column; -} - -.item:hover { - border-radius: 1rem; - box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12); -} - -@media (min-width: 1180px) { - .column { - grid-template-columns: 1fr 1fr; - } -} diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 897ca4a27f..75a374a0ae 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -1,9 +1,7 @@ -/* stylelint-disable docusaurus/copyright-header */ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ +@tailwind base; +@tailwind components; +@tailwind utilities; + @import "../../static/icons/line-awesome/css/line-awesome.min.css"; @font-face { @@ -129,6 +127,9 @@ --footer-border: rgba(0, 0, 0, 0.12); --card-border: rgba(135, 149, 161, 0.2); --ifm-pagination-nav-color-hover: #000000; + --input-border: #1a191954; + --input-hover-border: #000000; + --input-background: #00000004; } pre code { @@ -303,6 +304,9 @@ h2 { --footer-border: rgba(255, 255, 255, 0.12); --card-border: rgba(135, 149, 161, 0.2); --ifm-pagination-nav-color-hover: #ffffff; + --input-border: #f9f7f775; + --input-hover-border: #ffffff; + --input-background: #00000040; } .get-started:hover { @@ -325,7 +329,7 @@ main .container img { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12); } -.rounded { +.custom-rounded { display: flex; align-items: center; justify-content: center; @@ -336,51 +340,51 @@ main .container img { height: 40px; } -.rounded svg { +.custom-rounded svg { fill: white; height: 1.5rem; width: 1.5rem; } -.rounded i { +.custom-rounded i { color: white; } -.rounded-start { +.custom-rounded-start { background: linear-gradient(40deg, #059669 30%, #047857); } -.rounded-password { +.custom-rounded-password { background: linear-gradient(40deg, #f59e0b 30%, #b45309); } -.rounded-login, -.rounded-register { +.custom-rounded-login, +.custom-rounded-register { background: linear-gradient(40deg, #059669 30%, #047857); } -.rounded-privatelabel, -.rounded-phone, -.rounded-email, -.rounded-storage, -.rounded-service { +.custom-rounded-privatelabel, +.custom-rounded-phone, +.custom-rounded-email, +.custom-rounded-storage, +.custom-rounded-service { background: linear-gradient(40deg, #3b82f6 30%, #4f46e5); } -.rounded-split { +.custom-rounded-split { background: linear-gradient(40deg, #3b82f6, #4f46e5); } -.rounded-texts, -.rounded-help, -.rounded-architecture { +.custom-rounded-texts, +.custom-rounded-help, +.custom-rounded-architecture { background: linear-gradient(40deg, #dc2626 30%, #db2777); } -.rounded-system, -.rounded-apis, -.rounded-policy, -.rounded-instance { +.custom-rounded-system, +.custom-rounded-apis, +.custom-rounded-policy, +.custom-rounded-instance { background: linear-gradient(40deg, #1f2937, #111827); } @@ -483,7 +487,7 @@ table th { } a { - transition: all 1s ease; + transition: all 0.2s ease; } .alert { diff --git a/docs/src/css/environment.module.css b/docs/src/css/environment.module.css new file mode 100644 index 0000000000..fb131d5250 --- /dev/null +++ b/docs/src/css/environment.module.css @@ -0,0 +1,42 @@ +.inputwrapper { + display: flex; + flex-direction: column; +} + +.label { + font-size: 14px; + margin-bottom: 2px; +} + +.input { + box-sizing: border-box; + padding-inline-start: 10px; + outline: none; + display: inline-block; + text-align: start; + cursor: text; + transform: all 0.2 linear; + font-size: 1rem; + border: none; + border: 1px solid var(--input-border); + background-color: var(--input-background); + border-radius: 4px; + height: 40px; + padding: 10px; + max-width: 400px; + transition: border-color 0.15s ease-in-out, + background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), + color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; + color: var(--ifm-font-color-base); + margin-bottom: 2px; +} + +input:hover { + border-color: var(--input-hover-border); +} + +input:active, +input:focus { + border-color: var(--ifm-color-primary); +} diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index a32fcdda9d..74b64e62fb 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -60,7 +60,7 @@ const features = [ { return ( - -
-
- -
ZITADEL Cloud OUT NOW! 🚀
-
+
+
+ +
ZITADEL Cloud OUT NOW! 🚀
- +
); }; @@ -270,9 +268,7 @@ export default function Home() { const context = useDocusaurusContext(); const { siteConfig = {} } = context; return ( - +

{siteConfig.title}

diff --git a/docs/src/theme/Footer/index.js b/docs/src/theme/Footer/index.js new file mode 100644 index 0000000000..ef40e88e32 --- /dev/null +++ b/docs/src/theme/Footer/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import Footer from "@theme-original/Footer"; + +export default function FooterWrapper(props) { + return ( + <> +