docs: fix get started guide (#5141)

* docs: fix file ending

* docs: skip optional steps
This commit is contained in:
Fabi 2023-02-01 14:43:41 +07:00 committed by GitHub
parent e2fdd3f077
commit 5ca7e83f0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -133,7 +133,9 @@ As a user of the ZITADEL Cloud Customer Portal, you now have the ability to crea
![Project Created](/img/guides/quickstart/21.png)
### 4. Add Users
### 4. Add Users (optional)
[Skip optional steps](quickstart/#7-create-an-application-in-your-project) and jump directly to the create application step.
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.
@ -151,35 +153,35 @@ As a user of the ZITADEL Cloud Customer Portal, you now have the ability to crea
![User Info](/img/guides/quickstart/29.png)
### 5. Add Roles to your Project
### 5. 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.
1. To add roles to your project, click on “Roles” on the left as shown below. Next, click on the “New” button.
![Add Roles](/img/guides/quickstart/22.png)
2. Lets create the role “manager” as shown below. Add “Manager” and “Group1” as display name and group respectively.
2. Lets create the role “manager” as shown below. Add “Manager” and “Group1” as display name and group respectively.
![Add Role](/img/guides/quickstart/23.png)
3. You can also add other roles in this step by clicking on “Add additional role”. Lets go ahead and add two more as shown below. Click “Save” when you are done.
3. You can also add other roles in this step by clicking on “Add additional role”. Lets go ahead and add two more as shown below. Click “Save” when you are done.
![Add Role](/img/guides/quickstart/24.png)
4. Now you can view a list of all the roles you just created.
4. Now you can view a list of all the roles you just created.
![Add Role](/img/guides/quickstart/25.png)
### 6. Add Authorizations to your Project
1. Click on “Authorizations” on the top menu.
1. Click on “Authorizations” on the top menu.
![Add Authorization](/img/guides/quickstart/30.png)
2. Select users for the authorization. You can select 1 or more users for a single authorization grant. Lets select all the users for this grant.
2. Select users for the authorization. You can select 1 or more users for a single authorization grant. Lets select all the users for this grant.
![Add Authorization](/img/guides/quickstart/31.png)
3. Next, select a project. Since we created only “Project1” so far, you will see just that. Go ahead and select it.
3. Next, select a project. Since we created only “Project1” so far, you will see just that. Go ahead and select it.
![Add Authorization](/img/guides/quickstart/32.png)
@ -187,15 +189,15 @@ As a user of the ZITADEL Cloud Customer Portal, you now have the ability to crea
![Add Authorization](/img/guides/quickstart/33.png)
5. Now you will see the users with their designated roles.
5. Now you will see the users with their designated roles.
![Add Authorization](/img/guides/quickstart/34.png)
6. To assign additional roles to a user, you can click on the user's name and select the desired roles from the list. This will grant the user additional permissions within the project. Click on “Change”.
6. To assign additional roles to a user, you can click on the user's name and select the desired roles from the list. This will grant the user additional permissions within the project. Click on “Change”.
![Add Authorization](/img/guides/quickstart/35.png)
7. You can see that additional roles have been assigned to the users in this updated authorization list and this should now give you an indication of how authorizations work in ZITADEL.
7. You can see that additional roles have been assigned to the users in this updated authorization list and this should now give you an indication of how authorizations work in ZITADEL.
![Add Authorization](/img/guides/quickstart/37.png)
@ -577,9 +579,9 @@ In the PKCE flow, the code verifier is a random string generated by the client a
```
7. Go to index.js and replace ```import './index.css';``` with ```import './style.css'```. Your index.css file should look like this:
7. Go to index.js and replace ```import './index.css';``` with ```import './style.css'```. Your index.js file should look like this:
[src/index.css](https://github.com/zitadel/react-user-authentication/blob/main/src/index.js)
[src/index.js](https://github.com/zitadel/react-user-authentication/blob/main/src/index.js)
```
import React from 'react';