diff --git a/docs/docs/guides/manage/cloud/billing.md b/docs/docs/guides/manage/cloud/billing.md index 561986530c..0804d7a943 100644 --- a/docs/docs/guides/manage/cloud/billing.md +++ b/docs/docs/guides/manage/cloud/billing.md @@ -1,14 +1,7 @@ --- -title: Settings / Billing +title: Billing --- -## General - -In the general settings you can change your team name, notification settings and delete your team. - -![Customer Portal Settings General](/img/manuals/portal/customer_portal_settings_general.png) - - ## Billing In the billing page shows your configured payment methods and the invoice diff --git a/docs/docs/guides/manage/cloud/instances.md b/docs/docs/guides/manage/cloud/instances.md index 7bb3f16640..9fbc740521 100644 --- a/docs/docs/guides/manage/cloud/instances.md +++ b/docs/docs/guides/manage/cloud/instances.md @@ -54,9 +54,8 @@ To upgrade you must enter your billing information. If you hit a limit from the free tier you will automatically be asked to add your credit card information and to subscribe to the pro tier. You can also upgrade manually at any time. -1. Go to the settings tab -2. You can now see your Plan: "FREE" -3. Click "Upgrade" +1. Click the "Upgrade to PRO" button in the menu or go to the billing menu +2. If you choose the billing menu, you can now see your Free plan, click "Upgrade to Pro" 4. Add the missing data - Payment method: Credit Card Information - Customer: At least you have to fill the country @@ -70,7 +69,7 @@ We recommend register a custom domain to access your ZITADEL instance. The primary custom domain of your ZITADEL instance will be the issuer of the instance. All other custom domains can be used to access the instance itself 1. Browse to the "Custom Domains" Tab -2. Click **Add** +2. Click **Add domain** 3. Enter the domain you want and select the instance where the domain should belong to 4. In the next screen you will get all the information you will have to add to your DNS provider to verify your domain diff --git a/docs/docs/guides/manage/cloud/settings.md b/docs/docs/guides/manage/cloud/settings.md index 5b646db3e1..fe0ee9e752 100644 --- a/docs/docs/guides/manage/cloud/settings.md +++ b/docs/docs/guides/manage/cloud/settings.md @@ -2,7 +2,10 @@ title: Settings --- -Manage your team, email subscriptions, and billing information on the [Settings](https://zitadel.com/admin/settings) page. + +In the settings you can change your team name, notification settings and delete your team. + +![Customer Portal Settings General](/img/manuals/portal/customer_portal_settings_general.png) ## Team name diff --git a/docs/docs/guides/start/quickstart.mdx b/docs/docs/guides/start/quickstart.mdx index b5c3ff5d6d..30818a75b5 100644 --- a/docs/docs/guides/start/quickstart.mdx +++ b/docs/docs/guides/start/quickstart.mdx @@ -103,25 +103,35 @@ The order of creation for the above components may vary depending on the specifi ![Login](/img/guides/quickstart/v3_8.png) -### 2. Create your first instance +### 2. Complete onboarding questions -As a user of the ZITADEL Cloud Customer Portal, you now can create multiple instances to suit your specific needs. This includes instances for development, production, or user acceptance testing, as well as instances for different clients or applications. For example, you might create an instance for each product in a B2C scenario, or an instance for each tenant or customer in a B2B scenario. The possibilities are endless. You can create your first instance for free. +To begin, we'll ask you a few questions. +These will help us understand your needs and personalize your ZITADEL experience, ensuring you get the most out of it. -1. Let’s create an instance. Click on “Create new instance”. +![Onboarding Questions](/img/guides/quickstart/onboarding_questions.png) -![2-factor Authentication](/img/guides/quickstart/v3_9.png) +### 3. Create your first instance + +As a user of the ZITADEL Cloud Customer Portal, you now can create multiple instances to suit your specific needs. +This includes instances for development, production, or user acceptance testing, as well as instances for different clients or applications. +The possibilities are endless. You can create your first instance for free. + +1. Create an instance. +by clicking on “Create Instance”. + +![Create Instance](/img/guides/quickstart/create_instance.png) 2. Provide a name for your instance and click on the “Continue” button at the bottom of this screen. -![Select Tier](/img/guides/quickstart/v3_10.png) +![Create Instance Name](/img/guides/quickstart/create_instance_name.png) -3. Next, you should see the following screen. Add a username and password for the instance manager and click "Create". +3. Next, you should see the following screen. Add a username and password for the instance administrator and click "Create". -![Instance Details](/img/guides/quickstart/v3_11.png) +![Create Instance Admin](/img/guides/quickstart/create_instance_admin.png) -3. Now you will see the details of your first instance. You can click on "Visit" at the top right to go to your instance. +3. After creating your first instance, you're ready to configure user authentication. To access the management console, click the 'Sign in to your instance' button. -![Instance Details](/img/guides/quickstart/v3_12.png) +![Sign In Instance](/img/guides/quickstart/sign_in_instance.png) 6. To log in to your instance, provide the username and password you set in the instance creation, and click “next”. @@ -129,23 +139,33 @@ As a user of the ZITADEL Cloud Customer Portal, you now can create multiple inst 8. And there you go! You now have access to your instance. -![Instance Details](/img/guides/quickstart/v3_16.png) +![Instance Details](/img/guides/quickstart/instance_dashboard.png) -### 3. Create your first project +### 4. Create your first project and app -1. To create a project in the instance you just created, click on "Projects" in the navigation and then “Create a project”. +Because applications are always associated with a project, we'll guide you through setting up both in the following steps. -2. Insert “Project1” (or any name of your choice) as the project’s name and click the “Continue” button. +1. Click the "Create Application" button or the Framework/Language of your choice on the right side -![Project Name](/img/guides/quickstart/20.png) +2. Insert “Project1” (or any name of your choice) as the project’s name and select the framework/language of your choice in our case "React" and click the “Continue” button. (If you can't find your framework/languages select "Other") -3. Now you will be taken to the screen below. “Project1” has been created. +![Project Name and Framework/Language](/img/guides/quickstart/create_project_react.png) -![Project Created](/img/guides/quickstart/21.png) +3. An overview of the configuration for the framework you have selected is shown -### 4. Add users (optional) +![Project Configuration Overview - React App](/img/guides/quickstart/project_config_overview_react.png) -[Skip optional steps](quickstart/#7-create-an-application-in-your-project) and jump directly to the create application step. +What the configuration does: +- We recommend using the [Authentication Code Flow](/docs/apis/openidoauth/grant-types#authorization-code) with [Proof Key for Code Exchange (PKCE)](/docs/apis/openidoauth/grant-types#authorization-code) for secure OIDC configuration. This setup includes specific App, Grant, and Response Types, as well as an Authentication Method. More about the different app types can be found [here](/docs/guides/integrate/login/oidc/oauth-recommended-flows#different-client-profiles). +- The redirect URI is where the ZITADEL authorization server redirects the user after they have been authenticated. The "Redirect URI" is preconfigured to [http://localhost:3000/callback](http://localhost:3000/callback) and the “Post Logout URI” to [http://localhost:3000/](http://localhost:3000/) for the React example + +4. The detailed configuration of your app will be shown + +![Project Name and Framework/Language](/img/guides/quickstart/app_detail_overview_react.png) + +### 5. Add users (optional) + +[Skip optional steps](quickstart/#7-create-an-application-in-your-project) and jump directly to the obtain ClientId and OIDC endpoints. 1. To add users, click on “Users” at the top menu. You will see that the user you already created is listed as a user here. Click on the “New” button to create a new user. @@ -163,7 +183,7 @@ As a user of the ZITADEL Cloud Customer Portal, you now can create multiple inst ![User Info](/img/guides/quickstart/29.png) -### 5. Add roles to your project (optional) +### 6. Add roles to your project (optional) 1. To add roles to your project, click on “Roles” on the left as shown below. Next, click on the “New” button. @@ -181,7 +201,7 @@ As a user of the ZITADEL Cloud Customer Portal, you now can create multiple inst ![Add Role](/img/guides/quickstart/25.png) -### 6. Add authorizations to your project (optional) +### 7. Add authorizations to your project (optional) 1. Click on “Authorizations” on the top menu. @@ -211,54 +231,6 @@ As a user of the ZITADEL Cloud Customer Portal, you now can create multiple inst ![Add Authorization](/img/guides/quickstart/37.png) -### 7. Create an application in your project - -We will now create an application in the project, which will allow our React client application to access protected resources through the use of the OpenID Connect (OIDC) protocol. - -1. Go to “Projects” and click on “Project1”. - -![Add Application](/img/guides/quickstart/38.png) - -2. Click on “New” to add a new application. - -![Add Application](/img/guides/quickstart/39.png) - -3. Provide the name of the app as “React-SPA”. Select “User Agent” and click on “Continue”. - -![Add Application](/img/guides/quickstart/41.png) - -4. Select “PKCE” because we recommend the use of [Authorization Code](/docs/apis/openidoauth/grant-types#authorization-code) in combination with [Proof Key for Code Exchange (PKCE)](/docs/apis/openidoauth/grant-types#authorization-code) for all web applications. More about the different app types can be found [here](/docs/guides/integrate/login/oidc/oauth-recommended-flows#different-client-profiles). Click on "Continue". - -![Add Application](/img/guides/quickstart/42.png) - -5. The Redirect URL in your application is where the ZITADEL authorization server redirects the user after they have been authenticated. Set your “Redirect URI” to [http://localhost:3000/callback](http://localhost:3000/callback) and “Post Logout URI” to [http://localhost:3000/](http://localhost:3000/). Click on “Continue”. - -![Add Application](/img/guides/quickstart/43.png) - -6. Now you will be presented with the details of your application for review. Click on “Create”. - -![Add Application](/img/guides/quickstart/44.png) - -7. After that, a window will appear showing you your “ClientId”. Click on “Close”. - -![Add Application](/img/guides/quickstart/45.png) - -8. On the following screen, you may notice some warnings at the top. These warnings are displayed because the URLs for our application are using unsecure HTTP instead of HTTPS. To resolve this, we will need to update our URLs, but there is a workaround to this so that we can continue using HTTP during the development phase. - -![Add Application](/img/guides/quickstart/46.png) - -9. To proceed with HTTP, go to “Redirect Settings” on the left. - -![Add Application](/img/guides/quickstart/47.png) - -10. Now activate “Development Mode” as shown below and click “Save”. - -![Add Application](/img/guides/quickstart/48.png) - -11. Now if you go to “Projects” and “Project1”, you will see the “React-SPA” app listed as an application in the project: - -![Add Application](/img/guides/quickstart/50.png) - ### 8. Obtain ClientId and OIDC endpoints for your application {#referred1} You will need the ClientId and the OIDC endpoints (issuer and userinfo) when building your React application. The issuer URL is the base URL for the OIDC provider and includes the path to the OIDC discovery document, which contains information about the OIDC provider, including the authorization and token endpoints. By providing the issuer URL, you can use the OIDC library to automatically determine the endpoints for these requests. diff --git a/docs/sidebars.js b/docs/sidebars.js index 40e0bfb088..0917d4397e 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -139,6 +139,7 @@ module.exports = { items: [ "guides/manage/cloud/start", "guides/manage/cloud/instances", + "guides/manage/cloud/settings", "guides/manage/cloud/billing", "guides/manage/cloud/users", "guides/manage/cloud/support", diff --git a/docs/static/img/guides/quickstart/20.png b/docs/static/img/guides/quickstart/20.png deleted file mode 100644 index 8ad3af1c50..0000000000 Binary files a/docs/static/img/guides/quickstart/20.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/21.png b/docs/static/img/guides/quickstart/21.png deleted file mode 100644 index b27a5d878d..0000000000 Binary files a/docs/static/img/guides/quickstart/21.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/38.png b/docs/static/img/guides/quickstart/38.png deleted file mode 100644 index 5c588a4235..0000000000 Binary files a/docs/static/img/guides/quickstart/38.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/39.png b/docs/static/img/guides/quickstart/39.png deleted file mode 100644 index 8de05371e6..0000000000 Binary files a/docs/static/img/guides/quickstart/39.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/41.png b/docs/static/img/guides/quickstart/41.png deleted file mode 100644 index 297cf57e8a..0000000000 Binary files a/docs/static/img/guides/quickstart/41.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/42.png b/docs/static/img/guides/quickstart/42.png deleted file mode 100644 index ff62d1001e..0000000000 Binary files a/docs/static/img/guides/quickstart/42.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/43.png b/docs/static/img/guides/quickstart/43.png deleted file mode 100644 index 1df261b869..0000000000 Binary files a/docs/static/img/guides/quickstart/43.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/44.png b/docs/static/img/guides/quickstart/44.png deleted file mode 100644 index 50bcb1a05e..0000000000 Binary files a/docs/static/img/guides/quickstart/44.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/45.png b/docs/static/img/guides/quickstart/45.png deleted file mode 100644 index 28ce863f0d..0000000000 Binary files a/docs/static/img/guides/quickstart/45.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/46.png b/docs/static/img/guides/quickstart/46.png deleted file mode 100644 index ca78190a75..0000000000 Binary files a/docs/static/img/guides/quickstart/46.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/47.png b/docs/static/img/guides/quickstart/47.png deleted file mode 100644 index a4ce71bde6..0000000000 Binary files a/docs/static/img/guides/quickstart/47.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/48.png b/docs/static/img/guides/quickstart/48.png deleted file mode 100644 index a9a48a496b..0000000000 Binary files a/docs/static/img/guides/quickstart/48.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/49.png b/docs/static/img/guides/quickstart/49.png deleted file mode 100644 index 05cf9af65d..0000000000 Binary files a/docs/static/img/guides/quickstart/49.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/50.png b/docs/static/img/guides/quickstart/50.png deleted file mode 100644 index 73ddb1e9ca..0000000000 Binary files a/docs/static/img/guides/quickstart/50.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/app_detail_overview_react.png b/docs/static/img/guides/quickstart/app_detail_overview_react.png new file mode 100644 index 0000000000..b529f5338c Binary files /dev/null and b/docs/static/img/guides/quickstart/app_detail_overview_react.png differ diff --git a/docs/static/img/guides/quickstart/create_instance.png b/docs/static/img/guides/quickstart/create_instance.png new file mode 100644 index 0000000000..7f7d1847e6 Binary files /dev/null and b/docs/static/img/guides/quickstart/create_instance.png differ diff --git a/docs/static/img/guides/quickstart/create_instance_admin.png b/docs/static/img/guides/quickstart/create_instance_admin.png new file mode 100644 index 0000000000..320228299b Binary files /dev/null and b/docs/static/img/guides/quickstart/create_instance_admin.png differ diff --git a/docs/static/img/guides/quickstart/create_instance_name.png b/docs/static/img/guides/quickstart/create_instance_name.png new file mode 100644 index 0000000000..b9a6c94181 Binary files /dev/null and b/docs/static/img/guides/quickstart/create_instance_name.png differ diff --git a/docs/static/img/guides/quickstart/create_project_react.png b/docs/static/img/guides/quickstart/create_project_react.png new file mode 100644 index 0000000000..afc52a9f35 Binary files /dev/null and b/docs/static/img/guides/quickstart/create_project_react.png differ diff --git a/docs/static/img/guides/quickstart/instance_dashboard.png b/docs/static/img/guides/quickstart/instance_dashboard.png new file mode 100644 index 0000000000..f57acb386d Binary files /dev/null and b/docs/static/img/guides/quickstart/instance_dashboard.png differ diff --git a/docs/static/img/guides/quickstart/onboarding_questions.png b/docs/static/img/guides/quickstart/onboarding_questions.png new file mode 100644 index 0000000000..47c7d69d64 Binary files /dev/null and b/docs/static/img/guides/quickstart/onboarding_questions.png differ diff --git a/docs/static/img/guides/quickstart/project_config_overview_react.png b/docs/static/img/guides/quickstart/project_config_overview_react.png new file mode 100644 index 0000000000..018b6e5b35 Binary files /dev/null and b/docs/static/img/guides/quickstart/project_config_overview_react.png differ diff --git a/docs/static/img/guides/quickstart/sign_in_instance.png b/docs/static/img/guides/quickstart/sign_in_instance.png new file mode 100644 index 0000000000..1ee0860957 Binary files /dev/null and b/docs/static/img/guides/quickstart/sign_in_instance.png differ diff --git a/docs/static/img/guides/quickstart/v3_10.png b/docs/static/img/guides/quickstart/v3_10.png deleted file mode 100644 index 4c05106001..0000000000 Binary files a/docs/static/img/guides/quickstart/v3_10.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/v3_11.png b/docs/static/img/guides/quickstart/v3_11.png deleted file mode 100644 index e49c81cc07..0000000000 Binary files a/docs/static/img/guides/quickstart/v3_11.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/v3_12.png b/docs/static/img/guides/quickstart/v3_12.png deleted file mode 100644 index eded356f0c..0000000000 Binary files a/docs/static/img/guides/quickstart/v3_12.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/v3_16.png b/docs/static/img/guides/quickstart/v3_16.png deleted file mode 100644 index 30be6d0635..0000000000 Binary files a/docs/static/img/guides/quickstart/v3_16.png and /dev/null differ diff --git a/docs/static/img/guides/quickstart/v3_9.png b/docs/static/img/guides/quickstart/v3_9.png deleted file mode 100644 index 7d754b2aec..0000000000 Binary files a/docs/static/img/guides/quickstart/v3_9.png and /dev/null differ diff --git a/docs/static/img/manuals/portal/customer_portal_add_admin.png b/docs/static/img/manuals/portal/customer_portal_add_admin.png index 8228810a56..cf3c497b13 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_add_admin.png and b/docs/static/img/manuals/portal/customer_portal_add_admin.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_add_domain.png b/docs/static/img/manuals/portal/customer_portal_add_domain.png index 2e83a599ca..2296cc629c 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_add_domain.png and b/docs/static/img/manuals/portal/customer_portal_add_domain.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_administrator_list.png b/docs/static/img/manuals/portal/customer_portal_administrator_list.png index e8fcc6bac8..c1aaf13a77 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_administrator_list.png and b/docs/static/img/manuals/portal/customer_portal_administrator_list.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_billing.png b/docs/static/img/manuals/portal/customer_portal_billing.png index 09f1cf9f9f..2f0e19068f 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_billing.png and b/docs/static/img/manuals/portal/customer_portal_billing.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_delete_admin.png b/docs/static/img/manuals/portal/customer_portal_delete_admin.png index cdaf75cf74..e3c6ac88a7 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_delete_admin.png and b/docs/static/img/manuals/portal/customer_portal_delete_admin.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_general_support.png b/docs/static/img/manuals/portal/customer_portal_general_support.png index c3e8241258..8aeb0a1711 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_general_support.png and b/docs/static/img/manuals/portal/customer_portal_general_support.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_instance_detail.png b/docs/static/img/manuals/portal/customer_portal_instance_detail.png index 48a9a2fd39..f33d7f26dd 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_instance_detail.png and b/docs/static/img/manuals/portal/customer_portal_instance_detail.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_instance_overview.png b/docs/static/img/manuals/portal/customer_portal_instance_overview.png index 973c6b9205..7360fadbb0 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_instance_overview.png and b/docs/static/img/manuals/portal/customer_portal_instance_overview.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_invoices.png b/docs/static/img/manuals/portal/customer_portal_invoices.png index 80942fdb24..4cb72e118d 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_invoices.png and b/docs/static/img/manuals/portal/customer_portal_invoices.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_settings_general.png b/docs/static/img/manuals/portal/customer_portal_settings_general.png index f1daa340db..a9aaf068cd 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_settings_general.png and b/docs/static/img/manuals/portal/customer_portal_settings_general.png differ diff --git a/docs/static/img/manuals/portal/customer_portal_upgrade_tier.png b/docs/static/img/manuals/portal/customer_portal_upgrade_tier.png index 8f84c79545..382a5bcbb6 100644 Binary files a/docs/static/img/manuals/portal/customer_portal_upgrade_tier.png and b/docs/static/img/manuals/portal/customer_portal_upgrade_tier.png differ