diff --git a/docs/docs/guides/manage/cloud/billing.md b/docs/docs/guides/manage/cloud/billing.md index 561986530..0804d7a94 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 7bb3f1664..9fbc74052 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 5b646db3e..fe0ee9e75 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 b5c3ff5d6..30818a75b 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 40e0bfb08..0917d4397 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 8ad3af1c5..000000000 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 b27a5d878..000000000 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 5c588a423..000000000 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 8de05371e..000000000 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 297cf57e8..000000000 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 ff62d1001..000000000 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 1df261b86..000000000 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 50bcb1a05..000000000 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 28ce863f0..000000000 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 ca78190a7..000000000 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 a4ce71bde..000000000 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 a9a48a496..000000000 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 05cf9af65..000000000 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 73ddb1e9c..000000000 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 000000000..b529f5338 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 000000000..7f7d1847e 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 000000000..320228299 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 000000000..b9a6c9418 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 000000000..afc52a9f3 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 000000000..f57acb386 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 000000000..47c7d69d6 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 000000000..018b6e5b3 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 000000000..1ee086095 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 4c0510600..000000000 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 e49c81cc0..000000000 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 eded356f0..000000000 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 30be6d063..000000000 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 7d754b2ae..000000000 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 8228810a5..cf3c497b1 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 2e83a599c..2296cc629 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 e8fcc6bac..c1aaf13a7 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 09f1cf9f9..2f0e19068 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 cdaf75cf7..e3c6ac88a 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 c3e824125..8aeb0a171 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 48a9a2fd3..f33d7f26d 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 973c6b920..7360fadbb 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 80942fdb2..4cb72e118 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 f1daa340d..a9aaf068c 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 8f84c7954..382a5bcbb 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