mirror of
https://github.com/zitadel/zitadel.git
synced 2025-01-06 13:07:52 +00:00
docs: modify docs to comply with Google style guide for docs. (#5911)
* Modifying docs to comply with Google style guide for docs. * Removed typo. --------- Co-authored-by: Dakshitha Ratnayake <dakshitharatnayake@Dakshithas-MacBook-Pro-2.local>
This commit is contained in:
parent
747f1b3d6d
commit
e9a9d11926
@ -7,7 +7,7 @@ Our examples cover a range of programming languages and frameworks, so no matter
|
||||
|
||||
## Frontend
|
||||
|
||||
### Single Page Application
|
||||
### Single page application
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
@ -46,7 +46,7 @@ Our examples cover a range of programming languages and frameworks, so no matter
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Native / Mobile App
|
||||
### Native/mobile app
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
@ -67,7 +67,7 @@ Our examples cover a range of programming languages and frameworks, so no matter
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Regular Web App
|
||||
### Regular web app
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
|
@ -2,50 +2,51 @@
|
||||
title: Angular
|
||||
---
|
||||
|
||||
This integration guide shows you the recommended way to integrate ZITADEL into your Angular application.
|
||||
It shows how to add user login to your application and fetch some data from the user info endpoint.
|
||||
This integration guide demonstrates the recommended way to incorporate ZITADEL into your Angular application.
|
||||
It explains how to enable user login in your application and how to fetch data from the user info endpoint.
|
||||
|
||||
At the end of the guide, your application has login functionality and has access to the current user's profile.
|
||||
By the end of this guide, your application will have login functionality and will be able to access the current user's profile.
|
||||
|
||||
> This documentation refers to our [example](https://github.com/zitadel/zitadel-angular) in GitHub. Note that we've written ZITADEL Console in Angular, so you can also use that as a reference.
|
||||
> This documentation references our [example](https://github.com/zitadel/zitadel-angular) on GitHub. Please note that we wrote the ZITADEL Console in Angular, so you can also use that as a reference.
|
||||
|
||||
## Setup Application and Get Keys
|
||||
## Set up application and obtain keys
|
||||
|
||||
Before we can start building our application, we have to do a few configuration steps in ZITADEL Console.
|
||||
You will need to provide some information about your app. We recommend creating a new app to start from scratch. Navigate to your Project, then add a new application at the top of the page.
|
||||
Select **User Agent** application type and continue.
|
||||
We recommend you use [Proof Key for Code Exchange (PKCE)](/apis/openidoauth/grant-types#proof-key-for-code-exchange) for all SPA applications.
|
||||
Before we begin developing our application, we need to perform a few configuration steps in the ZITADEL Console.
|
||||
You'll need to provide some information about your app. We recommend creating a new app to start from scratch. Navigate to your Project, then add a new application at the top of the page.
|
||||
Select the **User Agent** application type and continue.
|
||||
We recommend that you use [Proof Key for Code Exchange (PKCE)](/apis/openidoauth/grant-types#proof-key-for-code-exchange) for all SPA applications.
|
||||
|
||||
![Create app in console](/img/angular/app-create.png)
|
||||
|
||||
|
||||
### Redirect URIs
|
||||
|
||||
With the Redirect URIs field, you tell ZITADEL where it is allowed to redirect users to after authentication. For development, you can set dev mode to `true` to enable insecure HTTP and redirect to a `localhost` URI.
|
||||
The Post logout redirect send the users back to a route on your application after they have logged out.
|
||||
The Redirect URIs field tells ZITADEL where it's allowed to redirect users after authentication. For development, you can set dev mode to `true` to enable insecure HTTP and redirect to a `localhost` URI.
|
||||
The Post-logout redirect send the users back to a route on your application after they have logged out.
|
||||
|
||||
> If you are following along with the [example](https://github.com/zitadel/zitadel-angular), set dev mode to `true`, the Redirect URIs to <http://localhost:4200/auth/callback> and Post redirect URI to <http://localhost:4200/signedout>.
|
||||
> If you are following along with the [example](https://github.com/zitadel/zitadel-angular), set the dev mode to `true`, the Redirect URIs to <http://localhost:4200/auth/callback> and Post redirect URI to <http://localhost:4200/signedout>.
|
||||
|
||||
Continue and create the application.
|
||||
|
||||
### Client ID
|
||||
|
||||
After successful app creation, a pop-up will appear, showing the app's client ID. Copy the client ID, as you will need it to configure your Angular client.
|
||||
After successful creation of the app, a pop-up will appear displaying the app's client ID. Copy the client ID, as you will need it to configure your Angular client.
|
||||
|
||||
## Angular Setup
|
||||
## Angular setup
|
||||
|
||||
Now that you have your web application configured on the ZITADEL side, you can go ahead and integrate your Angular client.
|
||||
Now that you have configured your web application on the ZITADEL side, you can proceed with the integration of your Angular client.
|
||||
|
||||
### Install Angular Dependencies
|
||||
### Install Angular dependencies
|
||||
|
||||
You need to install an OAuth / OIDC client to connect with ZITADEL. Run the following command:
|
||||
To connect with ZITADEL, you need to install an OAuth/OIDC client. Run the following command:
|
||||
|
||||
```bash
|
||||
npm install angular-oauth2-oidc
|
||||
```
|
||||
|
||||
### Create and Configure Auth Module
|
||||
### Create and configure the auth module
|
||||
|
||||
Add _OAuthModule_ to your Angular imports in _AppModule_ and provide the _AuthConfig_ in the providers' section. Also, ensure you import the _HTTPClientModule_.
|
||||
Add _OAuthModule_ to your Angular imports in _AppModule_ and provide the _AuthConfig_ in the providers' section. Also, ensure that you import the _HTTPClientModule_.
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app.module.ts
|
||||
@ -59,20 +60,18 @@ You can use Angular’s schematics to do so:
|
||||
ng g service services/authentication
|
||||
```
|
||||
|
||||
Copy the following code to your service. This code provides a function `authenticate()` which redirects the user to ZITADEL. After successful login, ZITADEL redirects the user back to the redirect URI configured in _AuthModule_ and ZITADEL Console. Make sure both correspond, otherwise ZITADEL throws an error.
|
||||
Copy the following code to your service. This code provides a function `authenticate()`, which redirects the user to ZITADEL. After a successful login, ZITADEL redirects the user back to the redirect URI configured in _AuthModule_ and ZITADEL Console. Ensure that both correspond, otherwise ZITADEL will throw an error.
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-angular/blob/main/src/app/services/authentication.service.ts
|
||||
```
|
||||
|
||||
Our example includes a _StatehandlerService_ to redirect the user back to the route where he initially came from.
|
||||
If you don't need such behavior, you can omit the following line from the `authenticate()` method above.
|
||||
Our example includes a _StatehandlerService_ that redirects the user back to the route from which they initially came.If you don't need such behavior, you can omit the following line from the `authenticate()` method above.
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-angular/blob/main/src/app/services/authentication.service.ts#L45
|
||||
```
|
||||
|
||||
If you decide to use the _StatehandlerService_, provide it in the `app.module`. Make sure it gets initialized first using Angular’s `APP_INITIALIZER`. You find the service implementation in the [example](https://github.com/zitadel/zitadel-angular).
|
||||
If you decide to use the _StatehandlerService_, include it in the `app.module`. Ensure it gets initialized first using Angular’s `APP_INITIALIZER`. You can find the service implementation in the [example](https://github.com/zitadel/zitadel-angular).
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app.module.ts#L26-L30
|
||||
@ -82,15 +81,14 @@ https://github.com/zitadel/zitadel-angular/blob/main/src/app/app.module.ts#L26-L
|
||||
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app.module.ts#L55-L78
|
||||
```
|
||||
|
||||
### Add Login to Your Application
|
||||
### Add login to your application
|
||||
|
||||
To log a user in, you need a component or a guard.
|
||||
To log in a user, you need a component or a guard.
|
||||
|
||||
- A component could provide a button, starting the login flow on click.
|
||||
- A component could provide a button that initiates the login flow when clicked.
|
||||
- A guard initiates a login flow when a user without a stored valid access token attempts to access a protected route.
|
||||
|
||||
- A guard that starts a login flow once a user without a stored valid access token tries to access a protected route.
|
||||
|
||||
Using these components heavily depends on your application. In most cases, you need both.
|
||||
The use of these components depends heavily on your application. In most cases, you need both.
|
||||
|
||||
Generate a component like this:
|
||||
|
||||
@ -100,8 +98,7 @@ ng g component components/login
|
||||
|
||||
Inject the _AuthenticationService_ and call `authenticate()` on some click event.
|
||||
|
||||
Same for the guard:
|
||||
|
||||
Do the same for the guard:
|
||||
```bash
|
||||
ng g guard guards/auth
|
||||
```
|
||||
@ -118,23 +115,23 @@ Add the guard to your _RouterModule_ similar to this:
|
||||
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app-routing.module.ts#L9-L31
|
||||
```
|
||||
|
||||
> Note: Make sure you redirect the user from your callback URL to a guarded page, so `authenticate()` is called again and the access token is stored.
|
||||
> Note: Make sure you redirect the user from your callback URL to a guarded page, so the `authenticate()` method is called again, and the access token is stored.
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app-routing.module.ts#L19-L21
|
||||
```
|
||||
|
||||
### Add Logout to Your Application
|
||||
### Add logout to your application
|
||||
|
||||
Call `auth.signout()` for logging the current user out. Note that you can also configure a logout redirect URI if you want your users to be redirected after logout.
|
||||
Call `auth.signout()` to log out the current user. Keep in mind that you can also configure a logout redirect URI if you want your users to be redirected after logout.
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-angular/blob/main/src/app/components/user/user.component.ts#L20-L22
|
||||
```
|
||||
|
||||
### Show User Information
|
||||
### Display user information
|
||||
|
||||
To fetch user data, ZITADEL's user info endpoint has to be called. This data contains sensitive information and artifacts related to the current user's identity and the scopes you defined in your _AuthConfig_.
|
||||
To fetch user data, you need to call the ZITADEL's user info endpoint. This data contains sensitive information and artifacts related to the current user's identity and the scopes you defined in your _AuthConfig_.
|
||||
Our _AuthenticationService_ already includes a method called _getOIDCUser()_. You can call it wherever you need this information.
|
||||
|
||||
```ts reference
|
||||
@ -149,25 +146,26 @@ https://github.com/zitadel/zitadel-angular/blob/main/src/app/components/user/use
|
||||
|
||||
### Refresh token
|
||||
|
||||
If you want to add a refresh token to your application you have to navigate to the console application and tick the checkbox in the configuration section.
|
||||
Then add `offline_access` to the scopes and add the line
|
||||
If you want to add a refresh token to your application, navigate to the console application and check the box in the configuration section.
|
||||
Then add `offline_access` to the scopes and add the following line:
|
||||
|
||||
```
|
||||
this.oauthService.setupAutomaticSilentRefresh();
|
||||
```
|
||||
|
||||
this will automatically refresh a token before it expires.
|
||||
This line automatically refreshes a token before it expires.
|
||||
|
||||
|
||||
## Completion
|
||||
|
||||
You have successfully integrated your Angular application with ZITADEL!
|
||||
Congratulations! You have successfully integrated your Angular application with ZITADEL!
|
||||
|
||||
If you get stuck, consider checking out our [example](https://github.com/zitadel/zitadel-angular) application. It includes all the mentioned functionality of this quickstart. You can simply start by cloning the repository and replacing the _AuthConfig_ in the _AppModule_ by your own configuration. If you run into issues, contact us or raise an issue on [GitHub](https://github.com/zitadel/zitadel).
|
||||
If you get stuck, consider checking out our [example](https://github.com/zitadel/zitadel-angular) application. This application includes all the funcationalities mentioned in this quickstart. You can start by cloning the repository and replacing the _AuthConfig_ in the _AppModule_ with your own configuration. If you face issues, contact us or raise an issue on [GitHub](https://github.com/zitadel/zitadel).
|
||||
|
||||
![App in console](/img/angular/app-screen.png)
|
||||
|
||||
### What's next?
|
||||
|
||||
Now that you have enabled authentication, it's time to add authorization to your application using ZITADEL APIs. Refer to the [docs](/apis/introduction) or check out our ZITADEL Console code on [GitHub](https://github.com/zitadel/zitadel) which is using gRPC to access data.
|
||||
Now that you have enabled authentication, it's time for you to add authorization to your application using ZITADEL APIs. To do this, you can refer to the [docs](/apis/introduction) or check out the ZITADEL Console code on [GitHub](https://github.com/zitadel/zitadel) which uses gRPC to access data.
|
||||
|
||||
For more information about creating an Angular application, refer to [Angular](https://angular.io/start) and for more information about the OAuth/OIDC library used above, consider reading their docs at [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
||||
For more information on how to create an Angular application, you can refer to [Angular](https://angular.io/start). If you want to learn more about the OAuth/OIDC library used above, consider reading the docs at [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
@ -3,48 +3,44 @@ title: Documentation
|
||||
sidebar_label: Overview
|
||||
---
|
||||
|
||||
Most applications need to know the identity of a user for access control, to securely store their data in the cloud, and provide the same personalized experience across all of the user's devices.
|
||||
Most applications require user identity for access control, secure data storage in the cloud, and to provide a consistent, personalized experience across all of a user's devices.
|
||||
With ZITADEL, you can rely on a hardened and extensible turnkey solution to address all your authentication and authorization needs. We offer a wide range of features out of the box to accelerate your project. These features include multi-tenancy with branding customization, secure login, self-service, OpenID Connect, OAuth2.x, SAML2, Passwordless with FIDO2 (including Passkeys), OTP, U2F, and an unlimited audit trail. Execute custom code on selected events within ZITADEL to ensure compatibility with your unique and complex software landscape and data models.
|
||||
|
||||
With ZITADEL you can rely on a hardened and extensible turnkey solution to solve all of your authentication and authorization needs.
|
||||
We provide you with a wide range of out of the box features to accelerate your project. Multi-tenancy with branding customization, secure login, self-service, OpenID Connect, OAuth2.x, SAML2, Passwordless with FIDO2 (including Passkeys), OTP, U2F, and an unlimited audit trail is there for you, ready to use.
|
||||
Execute custom code on selected events within ZITADEL to ensure perfect compatibility with your unique and complex software landscape and data models.
|
||||
## Get started
|
||||
|
||||
## Get Started
|
||||
### Quick start guide
|
||||
|
||||
### Quick Start Guide
|
||||
Follow our [quick start guide](/guides/start/quickstart).
|
||||
|
||||
Follow our [Quick Start Guide](/guides/start/quickstart).
|
||||
### Cloud or self-hosting
|
||||
|
||||
### Cloud or Self-Hosting
|
||||
You can use ZITADEL in two ways:
|
||||
|
||||
ZITADEL can be used in two ways:
|
||||
- ZITADEL Cloud: This is our public cloud service. Use the free tier to start in minutes.
|
||||
- Self-hosted ZITADEL: For full control, deploy ZITADEL wherever you prefer.
|
||||
|
||||
- Use the ZITADEL Cloud, our public cloud service. Use the free tier to get started in minutes.
|
||||
- Deploy a self-hosted ZITADEL for full control, wherever you like.
|
||||
|
||||
If you are unsure, opt for the gracious free tier of [ZITADEL Cloud](./manage/cloud/overview).
|
||||
If you're unsure, consider the generous free tier of [ZITADEL Cloud](./manage/cloud/overview).
|
||||
|
||||
Choose [ZITADEL Cloud](./manage/cloud/overview) if you want:
|
||||
|
||||
- A turnkey solution that just works
|
||||
- A gracious free tier with a great pay-as-you-go option
|
||||
- Global scalability without the headache of running it yourself
|
||||
- A turnkey solution that's ready to go- A generous free tier with an excellent pay-as-you-go option
|
||||
- Global scalability without the hassle of managing it yourself
|
||||
- Data-residency compliance for your customers
|
||||
|
||||
Choose [ZITADEL Self-Hosted](/self-hosting/deploy/overview) if you want:
|
||||
Choose [ZITADEL self-hosted](/self-hosting/deploy/overview) if you want:
|
||||
|
||||
- Total control over all components and your data
|
||||
- To run ZITADEL in air-gapped or regulated environments
|
||||
- Flexibility when you deploy updates
|
||||
- Flexibility when deploying updates
|
||||
|
||||
## Get Help
|
||||
## Get help
|
||||
|
||||
Join our [Discord Chat](https://zitadel.com/chat) or open a [Discussion](https://github.com/zitadel/zitadel/discussions) on Github to get help from the community and the team behind ZITADEL.
|
||||
Join our [Discord chat](https://zitadel.com/chat) or open a [discussion](https://github.com/zitadel/zitadel/discussions) on Github to get help from the community and the ZITADEL team.
|
||||
|
||||
Cloud and Enterprise customers can additionally reach us privately via the [Support communication channels](/legal/support-services).
|
||||
Cloud and enterprise customers can additionally reach us privately via our [support communication channels](/legal/support-services).
|
||||
|
||||
## Contribute
|
||||
|
||||
ZITADEL is open source — and so is the documentation.
|
||||
|
||||
Should you happen to stumble over an incorrectness, a spelling mistake, a hard-to-understand text passage, please don’t hesitate to leave a comment or [contribute a corresponding change](https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md).
|
||||
If you find any inaccuracies, spelling mistakes, or unclear text passages, please don't hesitate to leave a comment or [contribute a corresponding change](https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md).
|
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Quick Start Guide
|
||||
title: Quick start guide
|
||||
---
|
||||
|
||||
import VSCodeFolderView from "../../../static/img/guides/quickstart/vscode1.png";
|
||||
@ -12,7 +12,7 @@ In this quick start guide, we will be learning some fundamentals on how to set u
|
||||
The sample application allows users to securely log in to ZITADEL using the OIDC Proof Key for Code Exchange (PKCE) flow. This flow ensures that the authentication process is secure by using a code verifier and a code challenge, which are sent to ZITADEL to obtain an access token. The access token is then used by the app to access the userinfo endpoint to retrieve and display information about the logged-in user. The app also has a logout feature that allows users to end their session and clear their access token. Overall, the app provides a simple and secure way for users to authenticate and access protected resources within ZITADEL.
|
||||
|
||||
|
||||
## ZITADEL Terminology: Instances, Organizations, Projects, Users, Roles, Authorizations and Apps
|
||||
## ZITADEL terminology: instances, organizations, projects, users, roles, authorizations and apps
|
||||
|
||||
In ZITADEL, instances, organizations, projects, users, roles, and apps are the main components that make up the platform.
|
||||
|
||||
@ -31,9 +31,9 @@ The order of creation for the above components would typically be as follows:
|
||||
|
||||
The order of creation for the above components may vary depending on the specific needs and requirements of the organization.
|
||||
|
||||
## Set Up and Manage ZITADEL for your Identity Projects
|
||||
## Set up and manage ZITADEL for your identity projects
|
||||
|
||||
### 1. Sign up for the ZITADEL Cloud Customer Portal and Register your Organization
|
||||
### 1. Sign up for the ZITADEL Cloud customer portal and register your organization
|
||||
|
||||
1. Go to [zitadel.com](http://zitadel.com) and click on “Start for FREE”.
|
||||
|
||||
@ -75,7 +75,7 @@ The order of creation for the above components may vary depending on the specifi
|
||||
|
||||
![Create Instance](/img/guides/quickstart/10.png)
|
||||
|
||||
### 2. Create your First Instance
|
||||
### 2. 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. 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 a pay-as-you-go instance for production purposes.
|
||||
|
||||
@ -111,7 +111,7 @@ As a user of the ZITADEL Cloud Customer Portal, you now can create multiple inst
|
||||
|
||||
![Access Instance](/img/guides/quickstart/v2_7.png)
|
||||
|
||||
### 3. Create your First Project
|
||||
### 3. Create your first project
|
||||
|
||||
1. To create a project in the instance you just created, click on “Create Project”.
|
||||
|
||||
@ -125,7 +125,7 @@ As a user of the ZITADEL Cloud Customer Portal, you now can create multiple inst
|
||||
|
||||
![Project Created](/img/guides/quickstart/21.png)
|
||||
|
||||
### 4. Add Users (optional)
|
||||
### 4. Add users (optional)
|
||||
|
||||
[Skip optional steps](quickstart/#7-create-an-application-in-your-project) and jump directly to the create application step.
|
||||
|
||||
@ -145,7 +145,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)
|
||||
### 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.
|
||||
|
||||
@ -163,7 +163,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
|
||||
### 6. Add authorizations to your project
|
||||
|
||||
1. Click on “Authorizations” on the top menu.
|
||||
|
||||
@ -193,7 +193,7 @@ 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
|
||||
### 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.
|
||||
|
||||
@ -241,7 +241,7 @@ We will now create an application in the project, which will allow our React cli
|
||||
|
||||
![Add Application](/img/guides/quickstart/50.png)
|
||||
|
||||
### 8. Obtaining ClientId and OIDC Endpoints for your Application {#referred1}
|
||||
### 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.
|
||||
|
||||
The authorization endpoint is used to initiate the authorization process, the token endpoint is used to exchange authorization codes for access tokens, and the userinfo endpoint is used to retrieve information about the user. You need an access token to access the userinfo endpoint and other protected resources.
|
||||
@ -256,9 +256,9 @@ The authorization endpoint is used to initiate the authorization process, the to
|
||||
|
||||
And with that, configuring ZITADEL for our application is complete. Now we can move on to building our React application. Let's get coding!
|
||||
|
||||
## Create Your React Application with ZITADEL OIDC PKCE Authentication
|
||||
## Create your React application with ZITADEL OIDC PKCE authentication
|
||||
|
||||
### 1. Functional Requirements of the Application
|
||||
### 1. Functional requirements of the application
|
||||
|
||||
1. The user navigates to the React app (client) and clicks the "login" button.
|
||||
2. The app initiates the authorization process by redirecting the user’s browser to the authorization endpoint of the ZITADEL instance, along with the PKCE parameters (code challenge, and code challenge method).
|
||||
@ -298,7 +298,7 @@ To install Visual Studio Code, go to their [website](https://code.visualstudio.c
|
||||
|
||||
|
||||
### 3. Development
|
||||
#### 1. Create Project
|
||||
#### 1. Create project
|
||||
1. Open a new terminal window in Visual Studio Code.
|
||||
2. Navigate to the folder where you want to create the React app.
|
||||
3. Run the following command to create a new React app named "react-oidc-zitadel":
|
||||
@ -318,7 +318,7 @@ This will create the following files in your project:
|
||||
``` npm install react-router-dom oidc-client-ts ```
|
||||
|
||||
|
||||
#### 2. Add Source Files
|
||||
#### 2. Add source files
|
||||
|
||||
The code needed to run this project can be found [here](https://github.com/zitadel/react-user-authentication).
|
||||
|
||||
@ -595,7 +595,7 @@ root.render(
|
||||
reportWebVitals();
|
||||
```
|
||||
|
||||
### 4. Running the Application
|
||||
### 4. Running the application
|
||||
|
||||
1. Run ```npm start``` to start the development server.
|
||||
2. Open your browser and navigate to ```http://localhost:3000/``` to view the app.
|
||||
|
@ -33,7 +33,7 @@ module.exports = {
|
||||
"examples/sdks",
|
||||
{
|
||||
type: "category",
|
||||
label: "Example Applications",
|
||||
label: "Example applications",
|
||||
items: [
|
||||
"examples/introduction",
|
||||
{
|
||||
@ -142,7 +142,7 @@ module.exports = {
|
||||
items: [
|
||||
{
|
||||
type: "category",
|
||||
label: "Authenticate Users",
|
||||
label: "Authenticate users",
|
||||
collapsed: true,
|
||||
items: [
|
||||
"guides/integrate/login-users",
|
||||
@ -152,7 +152,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Configure Identity Providers",
|
||||
label: "Configure identity providers",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "Let users login with their preferred identity provider",
|
||||
@ -180,7 +180,7 @@ module.exports = {
|
||||
items: [
|
||||
{
|
||||
type: "category",
|
||||
label: "Authenticate Service Users",
|
||||
label: "Authenticate service users",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "Authenticate Service Users",
|
||||
@ -200,7 +200,7 @@ module.exports = {
|
||||
"guides/integrate/event-api",
|
||||
{
|
||||
type: "category",
|
||||
label: "Example Code",
|
||||
label: "Example code",
|
||||
items: [
|
||||
"examples/call-zitadel-api/go",
|
||||
"examples/call-zitadel-api/dot-net",
|
||||
@ -253,13 +253,13 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Solution Scenarios",
|
||||
label: "Solution scenarios",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "Solution Scenarios",
|
||||
title: "Solution scenarios",
|
||||
slug: "guides/solution-scenarios/introduction",
|
||||
description:
|
||||
"Customers of an SaaS Identity and Access Management System usually have all distinct use cases and requirements. This guide attempts to explain real-world implementations and break them down into Solution Scenarios which aim to help you getting started with ZITADEL.",
|
||||
"Customers of an SaaS Identity and access management system usually have all distinct use cases and requirements. This guide attempts to explain real-world implementations and break them down into solution scenarios which aim to help you getting started with ZITADEL.",
|
||||
},
|
||||
collapsed: true,
|
||||
items: [
|
||||
@ -326,7 +326,7 @@ module.exports = {
|
||||
"support/troubleshooting",
|
||||
{
|
||||
type: 'category',
|
||||
label: "Technical Advisory",
|
||||
label: "Technical advisory",
|
||||
link: {
|
||||
type: 'doc',
|
||||
id: 'support/technical_advisory',
|
||||
@ -362,7 +362,7 @@ module.exports = {
|
||||
items: [
|
||||
{
|
||||
type: "category",
|
||||
label: "Authenticated User",
|
||||
label: "Authenticated user",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "Auth API",
|
||||
@ -375,7 +375,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Organization Objects",
|
||||
label: "Organization objects",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "Management API",
|
||||
@ -387,7 +387,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Instance Objects",
|
||||
label: "Instance objects",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "Admin API",
|
||||
@ -399,7 +399,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Instance Lifecycle",
|
||||
label: "Instance lifecycle",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "System API",
|
||||
@ -413,10 +413,10 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "User Lifecycle (Alpha)",
|
||||
label: "User lifecycle (alpha)",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "User Service API (Alpha)",
|
||||
title: "User service API (Alpha)",
|
||||
slug: "/apis/resources/user_service",
|
||||
description:
|
||||
"This API is intended to manage users in a ZITADEL instance.\n"+
|
||||
@ -427,10 +427,10 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Session Lifecycle (Alpha)",
|
||||
label: "Session lifecycle (Alpha)",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "Session Service API (Alpha)",
|
||||
title: "Session service API (Alpha)",
|
||||
slug: "/apis/resources/session_service",
|
||||
description:
|
||||
"This API is intended to manage sessions in a ZITADEL instance.\n"+
|
||||
@ -441,15 +441,15 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Settings Lifecycle (Alpha)",
|
||||
label: "Settings lifecycle (alpha)",
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "Settings Service API (Alpha)",
|
||||
title: "Settings service API (Alpha)",
|
||||
slug: "/apis/resources/settings_service",
|
||||
description:
|
||||
"This API is intended to manage settings in a ZITADEL instance.\n"+
|
||||
"\n"+
|
||||
"This project is in alpha state. It can AND will continue breaking until the services provide the same functionality as the current login.",
|
||||
"This project is in alpha state. It can AND will continue to break until the services provide the same functionality as the current login.",
|
||||
},
|
||||
items: require("./docs/apis/resources/settings_service/sidebar.js"),
|
||||
},
|
||||
@ -502,7 +502,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "doc",
|
||||
label: "gRPC Status Codes",
|
||||
label: "gRPC status codes",
|
||||
id: "apis/statuscodes"
|
||||
},
|
||||
{
|
||||
@ -513,7 +513,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Rate Limits (Cloud)', // The link label
|
||||
label: 'Rate limits (cloud)', // The link label
|
||||
href: '/legal/rate-limit-policy', // The internal path
|
||||
},
|
||||
],
|
||||
@ -553,11 +553,11 @@ module.exports = {
|
||||
legal: [
|
||||
{
|
||||
type: "category",
|
||||
label: "Legal Agreements",
|
||||
label: "Legal agreements",
|
||||
collapsed: false,
|
||||
link: {
|
||||
type: "generated-index",
|
||||
title: "Legal Agreements",
|
||||
title: "Legal agreements",
|
||||
slug: "legal",
|
||||
description:
|
||||
"This section contains important agreements, policies and appendices relevant for users of our websites and services. All documents will be provided in English language.",
|
||||
@ -567,7 +567,7 @@ module.exports = {
|
||||
"legal/data-processing-agreement",
|
||||
{
|
||||
type: "category",
|
||||
label: "Service Description",
|
||||
label: "Service description",
|
||||
collapsed: false,
|
||||
items: [
|
||||
"legal/cloud-service-description",
|
||||
@ -577,7 +577,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Support Program",
|
||||
label: "Support program",
|
||||
collapsed: true,
|
||||
items: [
|
||||
"legal/terms-support-service",
|
||||
|
Loading…
x
Reference in New Issue
Block a user