diff --git a/README.md b/README.md index 0efd6d697..ea4a57d5c 100644 --- a/README.md +++ b/README.md @@ -83,11 +83,11 @@ Learn more about the [pay-as-you-go pricing](https://zitadel.com/pricing). ### Example applications -Clone one of our [example applications](https://zitadel.com/docs/examples/introduction#clone-a-sample-project) or deploy them directly to Vercel. +Clone one of our [example applications](https://zitadel.com/docs/sdk-examples/introduction) or deploy them directly to Vercel. ### SDKs -Use our [SDKs](https://zitadel.com/docs/examples/sdks) for your favorite language and framework. +Use our [SDKs](https://zitadel.com/docs/sdk-examples/introduction) for your favorite language and framework. ## Why choose ZITADEL diff --git a/console/src/app/pages/home/home.component.html b/console/src/app/pages/home/home.component.html index 207251c40..58fdbbd65 100644 --- a/console/src/app/pages/home/home.component.html +++ b/console/src/app/pages/home/home.component.html @@ -56,7 +56,7 @@ {{ 'HOME.GETSTARTED.TITLE' | translate }} - +
- angular - - Angular - - Guide - - - - - react - - React - - Guide - - - - - vue - - Vue - - Guide - SDK - - - -### Native/mobile app - - - - - - - - - - - - - - - - -
LanguageExampleQuickstartSDK
- flutter - FlutterGuide
- -### Regular web app - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
LanguageExampleQuickstartSDK
- nextjs - NextJSGuideNextAuth Provider
- golang - Go WebGuideSDK
- java - Java Spring Boot WebGuide
- php - Symfony PHP FrameworkGuide
- python - Python Flask Web
- python - Python Django WebGuide
- dotnet - ASP.NET Core MVC WebGuideSDK
- -## Backend - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
LanguageExampleQuickstartSDK
- golang - GolangGuideSDK
- phyton - Python FlaskGuide
- phyton - Python DjangoGuide
- dotnet - ASP.NET Core WebAPIGuideSDK
- node - Node.js NestJS APIGuide
- php - PHP API
- java - Java Spring Boot APIGuide
- -## Other example applications - -- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment. Uses NextJS Framework. -- [Frontend with backend API](https://github.com/zitadel/example-quote-generator-app): A simple web application using a React front-end and a Python back-end API, both secured using ZITADEL -- [Introspection](https://github.com/zitadel/examples-api-access-and-token-introspection): Python examples for securing an API and invoking it as a service user -- [Fine-grained authorization](https://github.com/zitadel/example-fine-grained-authorization): Leverage actions, custom metadata, and claims for attribute-based access control - -Search for the "example" tag in our repository to [explore all examples](https://github.com/search?q=topic%3Aexamples+org%3Azitadel&type=repositories). diff --git a/docs/docs/examples/login/django.mdx b/docs/docs/examples/login/python-django.mdx similarity index 100% rename from docs/docs/examples/login/django.mdx rename to docs/docs/examples/login/python-django.mdx diff --git a/docs/docs/examples/login/vue.md b/docs/docs/examples/login/vue.mdx similarity index 100% rename from docs/docs/examples/login/vue.md rename to docs/docs/examples/login/vue.mdx diff --git a/docs/docs/examples/sdks.md b/docs/docs/examples/sdks.md deleted file mode 100644 index 90d307bbe..000000000 --- a/docs/docs/examples/sdks.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: ZITADEL SDKs -sidebar_label: SDKs ---- - -On this page you find our official SDKs, links to supporting frameworks and providers, and resources to help with SDKs. -The SDKs wrap either our [gRPC or REST APIs](/docs/apis/introduction) to provide the client with User Authentication and -Management for resources. - -## ZITADEL SDKs - -| Language / Framework | Link Github | User Authentication | Manage resources | Notes | -| -------------------- | ------------------------------------------------------------- | --------------------------------------------------------- | ---------------- | ----------- | -| Go | [zitadel-go](https://github.com/zitadel/zitadel-go) | 🚧 [WIP](https://github.com/zitadel/zitadel-go/tree/next) | ✔️ | `official` | -| Vue | [zitadel-vue](https://github.com/zitadel/zitadel-vue) | ✔️ | ❌ | `official` | -| React | [zitadel-react](https://github.com/zitadel/zitadel-react) | ✔️ | ❌ | `official` | -| .NET | [zitadel-net](https://github.com/smartive/zitadel-net) | ✔️ | ✔️ | `community` | -| Elixir | [zitadel_api](https://github.com/jshmrtn/zitadel_api) | ✔️ | ✔️ | `community` | -| NodeJS | [@zitadel/node](https://www.npmjs.com/package/@zitadel/node) | ❌ | ✔️ | `community` | -| Dart | [zitadel-dart](https://github.com/smartive/zitadel-dart) | ❌ | ✔️ | `community` | -| Rust | [zitadel-rust](https://github.com/smartive/zitadel-rust) | ✔️ | ✔️ | `community` | -| JVM | 🚧 [WIP](https://github.com/zitadel/zitadel/discussions/3650) | ❓ | ❓ | TBD | -| Python | 🚧 [WIP](https://github.com/zitadel/zitadel/issues/3675) | ❓ | ❓ | TBD | - -## Missing SDK - -Is your language/framework missing? Fear not, you can generate your gRPC API Client with ease. - -1. Make sure to install [buf](https://buf.build/docs/installation/) -2. Create a `buf.gen.yaml` and configure the [plugins](https://buf.build/plugins) you need -3. Run `buf generate https://github.com/zitadel/zitadel#format=git,tag=v2.23.1` (change the versions to your needs) - -Let us make an example with Ruby. Any other supported language by buf will work as well. Consult -the [buf plugin registry](https://buf.build/plugins) for more ideas. - -### Example with Ruby - -With gRPC we usually need to generate the client stub and the messages/types. This is why we need two plugins. -The plugin `grpc/ruby` generates the client stub and the plugin `protocolbuffers/ruby` takes care of the messages/types. - -```yaml -version: v1 -plugins: - - plugin: buf.build/grpc/ruby - out: gen - - plugin: buf.build/protocolbuffers/ruby - out: gen -``` - -If you now run `buf generate https://github.com/zitadel/zitadel#format=git,tag=v2.23.1` in the folder where -your `buf.gen.yaml` is located you should see the folder `gen` appear. - -If you run `ls -la gen/zitadel/` you should see something like this: - -```bash -ffo@ffo-pc:~/git/zitadel/ruby$ ls -la gen/zitadel/ -total 704 -drwxr-xr-x 2 ffo ffo 4096 Apr 11 16:49 . -drwxr-xr-x 3 ffo ffo 4096 Apr 11 16:49 .. --rw-r--r-- 1 ffo ffo 4397 Apr 11 16:49 action_pb.rb --rw-r--r-- 1 ffo ffo 141097 Apr 11 16:49 admin_pb.rb --rw-r--r-- 1 ffo ffo 25151 Apr 11 16:49 admin_services_pb.rb --rw-r--r-- 1 ffo ffo 6537 Apr 11 16:49 app_pb.rb --rw-r--r-- 1 ffo ffo 1134 Apr 11 16:49 auth_n_key_pb.rb --rw-r--r-- 1 ffo ffo 32881 Apr 11 16:49 auth_pb.rb --rw-r--r-- 1 ffo ffo 6896 Apr 11 16:49 auth_services_pb.rb --rw-r--r-- 1 ffo ffo 1571 Apr 11 16:49 change_pb.rb --rw-r--r-- 1 ffo ffo 2488 Apr 11 16:49 event_pb.rb --rw-r--r-- 1 ffo ffo 14782 Apr 11 16:49 idp_pb.rb --rw-r--r-- 1 ffo ffo 5031 Apr 11 16:49 instance_pb.rb --rw-r--r-- 1 ffo ffo 223348 Apr 11 16:49 management_pb.rb --rw-r--r-- 1 ffo ffo 44402 Apr 11 16:49 management_services_pb.rb --rw-r--r-- 1 ffo ffo 3020 Apr 11 16:49 member_pb.rb --rw-r--r-- 1 ffo ffo 855 Apr 11 16:49 message_pb.rb --rw-r--r-- 1 ffo ffo 1445 Apr 11 16:49 metadata_pb.rb --rw-r--r-- 1 ffo ffo 2370 Apr 11 16:49 object_pb.rb --rw-r--r-- 1 ffo ffo 621 Apr 11 16:49 options_pb.rb --rw-r--r-- 1 ffo ffo 4425 Apr 11 16:49 org_pb.rb --rw-r--r-- 1 ffo ffo 8538 Apr 11 16:49 policy_pb.rb --rw-r--r-- 1 ffo ffo 8223 Apr 11 16:49 project_pb.rb --rw-r--r-- 1 ffo ffo 1022 Apr 11 16:49 quota_pb.rb --rw-r--r-- 1 ffo ffo 5872 Apr 11 16:49 settings_pb.rb --rw-r--r-- 1 ffo ffo 20985 Apr 11 16:49 system_pb.rb --rw-r--r-- 1 ffo ffo 4784 Apr 11 16:49 system_services_pb.rb --rw-r--r-- 1 ffo ffo 28759 Apr 11 16:49 text_pb.rb --rw-r--r-- 1 ffo ffo 24170 Apr 11 16:49 user_pb.rb --rw-r--r-- 1 ffo ffo 13568 Apr 11 16:49 v1_pb.rb -``` - -Import these files into your project to start interacting with ZITADEL's APIs. - -## More - -While we are not actively maintaining the following projects, it is worth checking out if you're interested in exploring -ZITADEL in different programming languages or frameworks. - -- [NodeJS passport](https://github.com/buehler/node-passport-zitadel) authentication helper -- [NextAuth Provider for ZITADEL](https://next-auth.js.org/providers/zitadel) - -If we do not provide an example, SDK or guide, we strongly recommend using existing authentication libraries for your -language or framework instead of building your own. -Certified libraries have undergone rigorous testing and validation to ensure high security and reliability. -There are many recommended libraries available, this saves time and ensures that users' data is well-protected. - -You might want to check out the following links to find a good library: - -- [awesome-auth](https://github.com/casbin/awesome-auth) -- [OpenID General References](https://openid.net/developers/libraries/) -- [OpenID certified developer tools](https://openid.net/certified-open-id-developer-tools/) diff --git a/docs/docs/examples/secure-api/nodejs-nestjs.md b/docs/docs/examples/secure-api/nodejs-nestjs.md index 498419310..13c219114 100644 --- a/docs/docs/examples/secure-api/nodejs-nestjs.md +++ b/docs/docs/examples/secure-api/nodejs-nestjs.md @@ -1,6 +1,6 @@ --- title: ZITADEL with Node.js -sidebar_label: Node.js +sidebar_label: NestJS --- # ZITADEL with Node.js (NestJS) diff --git a/docs/docs/examples/secure-api/django.mdx b/docs/docs/examples/secure-api/python-django.mdx similarity index 100% rename from docs/docs/examples/secure-api/django.mdx rename to docs/docs/examples/secure-api/python-django.mdx diff --git a/docs/docs/guides/manage/customize/user-metadata.md b/docs/docs/guides/manage/customize/user-metadata.md index b4aff8fcb..cc051a1c5 100644 --- a/docs/docs/guides/manage/customize/user-metadata.md +++ b/docs/docs/guides/manage/customize/user-metadata.md @@ -24,7 +24,7 @@ You can do so by using [Console](../console/users) or [setting user metadata](/d Most of the methods below require you to login with the correct user while setting some scopes. Make sure you pick the right user when logging into the test application. -Use the [OIDC authentication request playground](/docs/apis/openidoauth/authrequest) or the configuration of an [example client](/docs/examples/introduction) to set the required scopes and receive a valid access token. +Use the [OIDC authentication request playground](/docs/apis/openidoauth/authrequest) or the configuration of an [example client](/docs/sdk-examples/introduction) to set the required scopes and receive a valid access token. :::info Getting a token In case you want to test out different settings configure an application with code flow (PKCE). @@ -157,7 +157,7 @@ You can use the authentication service to request and search for the user's meta The introspection endpoint and the token endpoint in the examples above do not require a special scope to access. Yet when accessing the authentication service, you need to pass the [reserved scope](/docs/apis/openidoauth/scopes#reserved-scopes) `urn:zitadel:iam:org:project:id:zitadel:aud` along with the authentication request. This scope allows the user to access ZITADEL's APIs, specifically the authentication API that we need for this method. -Use the [OIDC authentication request playground](/docs/apis/openidoauth/authrequest) or the configuration of an [example client](/docs/examples/introduction) to set the required scopes and receive a valid access token. +Use the [OIDC authentication request playground](/docs/apis/openidoauth/authrequest) or the configuration of an [example client](/docs/sdk-examples/introduction) to set the required scopes and receive a valid access token. :::note Invalid audience If you get the error "invalid audience (APP-Zxfako)", then you need to add the reserved scope `urn:zitadel:iam:org:project:id:zitadel:aud` to your authentication request. diff --git a/docs/docs/sdk-examples/angular.mdx b/docs/docs/sdk-examples/angular.mdx new file mode 100644 index 000000000..5211a8494 --- /dev/null +++ b/docs/docs/sdk-examples/angular.mdx @@ -0,0 +1,51 @@ +--- +title: Angular +sidebar_label: Angular +--- + + + + + + +
+ angular logo + + Angular is a popular JavaScript framework for building single-page applications (SPAs) that is known for its two-way data binding, dependency injection, and modular architecture. + Integrate authentication to your Angular application easily by using the zitadel-angular Example. +
+ +### Resources +- [Angular Example Application with ZITADEL Login](https://github.com/zitadel/zitadel-angular) +- [Step-By-Step Guide](/docs/examples/login/angular) +- [ZITADEL Console](https://github.com/zitadel/zitadel/tree/main/console) is built with Angular and can also be used as a reference + + +### Angular SDK + +ZITADEL does not provide an Angular specific SDK. +But you can integrate ZITADEL to your application by using any OIDC Library such as [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc). + +Check out our [Example Application](/docs/sdk-examples/angular#example-application) + +### Example Application + +The [zitadel-angular](https://github.com/zitadel/zitadel-angular) repository includes an Example Application ready to start and show how an Angular application looks like with integrated ZITADEL Login. + +What does the Example include: +- Home Page with Login Button +- Authenticating user with OIDC PKCE Flow +- Private Page: Shows user information of authenticated user, only accessible after login +- Logout + +### Step-By-Step Guide + +The [Step-By-Step Guide](/docs/examples/login/angular) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login. + +After completing the Step-By-Step Guide you will have: +1. Example Web Application with integrated ZITADEL Login +2. Example page accessible by authenticated user showing retrieved user information +3. Logout +4. Correct setup for your application in ZITADEL + +![App in console](/img/angular/app-screen.png) diff --git a/docs/docs/sdk-examples/flutter.mdx b/docs/docs/sdk-examples/flutter.mdx new file mode 100644 index 000000000..c0b19429a --- /dev/null +++ b/docs/docs/sdk-examples/flutter.mdx @@ -0,0 +1,67 @@ +--- +title: Flutter +sidebar_label: Flutter +--- + + + + + + +
+ flutter logo + + Flutter is a cross-platform mobile app development framework that allows developers to build native iOS and Android apps using a single codebase. + Integrate authentication to your Flutter App easily by using the zitadel-flutter Example. +
+ +### Resources +- [Flutter Example Application Repository](https://github.com/zitadel/zitadel_flutter) +- [Step-By-Step Guide](/docs/examples/login/flutter) to create your Flutter App with ZITADEL Login +- [Dart Client Library for ZITADEL](https://github.com/smartive/zitadel-dart) + +### Flutter SDK + +ZITADEL doesn't provide a specific Flutter SDK for authentication in your Web/Mobile App. +You can use any OIDC Library such as [package:oidc](https://pub.dev/packages/oidc). +For Mobile Apps we recommend [Flutter AppAuth](https://pub.dev/packages/flutter_appauth). + +Check out our [Example Application](/docs/sdk-examples/flutter#example-application). + +Additionally, you can use [smartive/zitadel-dart](https://github.com/smartive/zitadel-dart) for user and resource management. +- Manage Resources through ZITADEL APIs + - Authenticate Service User + - Generated gRPC Clients for integrating ZITADEL API + - User, Organization, Project, etc. Management + +:::note +This library is built by our community. +::: + +### Example Application + +The [zitadel-flutter](https://github.com/zitadel/zitadel_flutter) repository includes an Example Application ready to start and show how an Flutter application looks like with integrated ZITADEL Login. + +What does the Example include: +- Home Page with Login Button +- Authenticating user with OIDC PKCE Flow +- Private Page: Only accessible after login + +### Step-By-Step Guide + +The [Step-By-Step Guide](/docs/examples/login/flutter) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login. + +After completing the Step-By-Step Guide you will have: +1. Example Mobile App with integrated ZITADEL Login +2. Example page accessible by authenticated user +3. Correct setup for your application in ZITADEL + +
+ Unauthenticated + Flutter Authenticated +
+ +
+ Unauthenticated + Flutter Authenticated +
diff --git a/docs/docs/sdk-examples/go.mdx b/docs/docs/sdk-examples/go.mdx new file mode 100644 index 000000000..77e11f37d --- /dev/null +++ b/docs/docs/sdk-examples/go.mdx @@ -0,0 +1,105 @@ +--- +title: Go +sidebar_label: Go +--- + + + + + + +
+ go logo + + Go is an open-source, compiled programming language that is known for its simplicity, efficiency, and concurrency capabilities. + Get started integrating authentication to your Go Application by checking out our zitadel-go SDK. +
+ + +### Resources +- [Example App Repository](https://github.com/zitadel/zitadel-go) +- [Go SDK](https://github.com/zitadel/zitadel-go) +- [Web APP Step-By-Step Guide](/docs/examples/login/go) +- [API APP Step-By-Step Guide](/docs/examples/secure-api/go) +- [Go OIDC Library](https://github.com/zitadel/oidc) + +### Go SDK + +The [zitadel-go](https://github.com/zitadel/zitadel-go) SDK is a wrapper around the [zitadel/oidc](https://github.com/zitadel/oidc) to integrate Login into your Web App and abstracts the handling of specific configurations for ZITADEL. +Additionally secure your business APIs and handle permission checks for your users. +Last part is the integration of the ZITADEL APIs to handle user and resource management. + +The following features are covered by the SDK: +- Authentication in your Web App + - Authenticate your user with ZITADEL using OIDC + - Requesting ZITADEL userinfo endpoint to get user data + - Refresh Token + - Requesting User Roles from userinfo + - Check if user has specified role + - Logout +- Secure your APIs + - Authorization Check using OAuth2 Introspection + - Check User Roles on Endpoint +- Manage Resources through ZITADEL APIs + - Authenticate Service User + - Generated gRPC Clients for integrating ZITADEL API + - User, Organization, Project, etc. Management + +The goal is to extend the SDK over the time with the following features: +- Build your own login UI using our Session API + +### Go Examples + +You can find different examples for building your Go application in the following package of the repository: +[zitadel-go/example](https://github.com/zitadel/zitadel-go/tree/next/example) + +#### Web Application Example + +What does the Web Application Example include: +- Home Page with Login Button +- Authenticating user with OIDC PKCE Flow +- Public Page: Accessible without authentication +- Private Page: Shows user information of authenticated user, only accessible after login +- Logout + +[Example Web App](https://github.com/zitadel/zitadel-go/tree/next/example/app) + +#### API Application Example + +What does the API Application Example include: +- REST API Application secured with Spring Security and OAuth2 +- Public Endpoint: Accessible without authentication +- Private Endpoint: Accessible with a token +- Administrator Endpoint: Accessible with a token of a user with admin role + +[Example API App](https://github.com/zitadel/zitadel-go/tree/next/example/api/http) + +### Step-By-Step Guide + +For Go we do have two different Step-By-Step Guides. +One to create your web application with integrated login and one to create your API with permission checks for calling users. +The guides lead you through the whole process from configuring the right application in ZITADEL to a ready application with integrated login or authentication checks. + +#### Web Application Guide + +After completing the Step-By-Step Guide you will have: +1. Example Web Application with integrated ZITADEL Login +2. Example page accessible by authenticated user showing retrieved user information +4. Logout +5. Correct setup for your application in ZITADEL + +[Web APP Step-By-Step Guide](/docs/examples/login/go) + +![Home Page](/img/go/app-home.png) +![Profile Page](/img/go/app-profile.png) + +#### API Application Guide + +After completing the Step-By-Step Guide you will have: +1. Example REST API checking tokens against ZITADEL with OAuth2 +2. Public Endpoint accessible by any user +3. Private Endpoint accessible by authenticated user +4. Private Endpoint accessible by user with role 'admin' +5. Correct setup for your application in ZITADEL + +[API APP Step-By-Step Guide](/docs/examples/secure-api/go) diff --git a/docs/docs/sdk-examples/introduction.mdx b/docs/docs/sdk-examples/introduction.mdx new file mode 100644 index 000000000..5ee006c6c --- /dev/null +++ b/docs/docs/sdk-examples/introduction.mdx @@ -0,0 +1,187 @@ +--- +title: Introduction +sidebar_label: Introduction +--- + +You can integrate ZITADEL quickly into your application and be up and running within minutes. +To achieve your goals as fast as possible, we provide you with SDKs, Example Repositories and Guides. + +The SDKs and Integration depend on the framework and language you are using. + +import { Tile } from "../../src/components/tile"; + +### Resources + +
+ + + + + + + + + + + + + + + + + + + +
+ +### OIDC Libraries + +OIDC is a standard for authentication and most languages and frameworks do provide a OIDC library which can be easily integrated to your application. +If we do not provide an specific example, SDK or guide, we strongly recommend using existing authentication libraries for your +language or framework instead of building your own. +Certified libraries have undergone rigorous testing and validation to ensure high security and reliability. +There are many recommended libraries available, this saves time and ensures that users' data is well-protected. + +You might want to check out the following links to find a good library: + +- [awesome-auth](https://github.com/casbin/awesome-auth) +- [OpenID General References](https://openid.net/developers/libraries/) +- [OpenID certified developer tools](https://openid.net/certified-open-id-developer-tools/) + +### Other example applications + +- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment. Uses NextJS Framework. +- [Frontend with backend API](https://github.com/zitadel/example-quote-generator-app): A simple web application using a React front-end and a Python back-end API, both secured using ZITADEL +- [Introspection](https://github.com/zitadel/examples-api-access-and-token-introspection): Python examples for securing an API and invoking it as a service user +- [Fine-grained authorization](https://github.com/zitadel/example-fine-grained-authorization): Leverage actions, custom metadata, and claims for attribute-based access control + +Search for the "example" tag in our repository to [explore all examples](https://github.com/search?q=topic%3Aexamples+org%3Azitadel&type=repositories). + +### Missing SDK + +Is your language/framework missing? Fear not, you can generate your gRPC API Client with ease. + +1. Make sure to install [buf](https://buf.build/docs/installation/) +2. Create a `buf.gen.yaml` and configure the [plugins](https://buf.build/plugins) you need +3. Run `buf generate https://github.com/zitadel/zitadel#format=git,tag=v2.23.1` (change the versions to your needs) + +Let us make an example with Ruby. Any other supported language by buf will work as well. Consult +the [buf plugin registry](https://buf.build/plugins) for more ideas. + +#### Example with Ruby + +With gRPC we usually need to generate the client stub and the messages/types. This is why we need two plugins. +The plugin `grpc/ruby` generates the client stub and the plugin `protocolbuffers/ruby` takes care of the messages/types. + +```yaml +version: v1 +plugins: + - plugin: buf.build/grpc/ruby + out: gen + - plugin: buf.build/protocolbuffers/ruby + out: gen +``` + +If you now run `buf generate https://github.com/zitadel/zitadel#format=git,tag=v2.23.1` in the folder where +your `buf.gen.yaml` is located you should see the folder `gen` appear. + +If you run `ls -la gen/zitadel/` you should see something like this: + +```bash +ffo@ffo-pc:~/git/zitadel/ruby$ ls -la gen/zitadel/ +total 704 +drwxr-xr-x 2 ffo ffo 4096 Apr 11 16:49 . +drwxr-xr-x 3 ffo ffo 4096 Apr 11 16:49 .. +-rw-r--r-- 1 ffo ffo 4397 Apr 11 16:49 action_pb.rb +-rw-r--r-- 1 ffo ffo 141097 Apr 11 16:49 admin_pb.rb +-rw-r--r-- 1 ffo ffo 25151 Apr 11 16:49 admin_services_pb.rb +-rw-r--r-- 1 ffo ffo 6537 Apr 11 16:49 app_pb.rb +-rw-r--r-- 1 ffo ffo 1134 Apr 11 16:49 auth_n_key_pb.rb +-rw-r--r-- 1 ffo ffo 32881 Apr 11 16:49 auth_pb.rb +-rw-r--r-- 1 ffo ffo 6896 Apr 11 16:49 auth_services_pb.rb +-rw-r--r-- 1 ffo ffo 1571 Apr 11 16:49 change_pb.rb +-rw-r--r-- 1 ffo ffo 2488 Apr 11 16:49 event_pb.rb +-rw-r--r-- 1 ffo ffo 14782 Apr 11 16:49 idp_pb.rb +-rw-r--r-- 1 ffo ffo 5031 Apr 11 16:49 instance_pb.rb +-rw-r--r-- 1 ffo ffo 223348 Apr 11 16:49 management_pb.rb +-rw-r--r-- 1 ffo ffo 44402 Apr 11 16:49 management_services_pb.rb +-rw-r--r-- 1 ffo ffo 3020 Apr 11 16:49 member_pb.rb +-rw-r--r-- 1 ffo ffo 855 Apr 11 16:49 message_pb.rb +-rw-r--r-- 1 ffo ffo 1445 Apr 11 16:49 metadata_pb.rb +-rw-r--r-- 1 ffo ffo 2370 Apr 11 16:49 object_pb.rb +-rw-r--r-- 1 ffo ffo 621 Apr 11 16:49 options_pb.rb +-rw-r--r-- 1 ffo ffo 4425 Apr 11 16:49 org_pb.rb +-rw-r--r-- 1 ffo ffo 8538 Apr 11 16:49 policy_pb.rb +-rw-r--r-- 1 ffo ffo 8223 Apr 11 16:49 project_pb.rb +-rw-r--r-- 1 ffo ffo 1022 Apr 11 16:49 quota_pb.rb +-rw-r--r-- 1 ffo ffo 5872 Apr 11 16:49 settings_pb.rb +-rw-r--r-- 1 ffo ffo 20985 Apr 11 16:49 system_pb.rb +-rw-r--r-- 1 ffo ffo 4784 Apr 11 16:49 system_services_pb.rb +-rw-r--r-- 1 ffo ffo 28759 Apr 11 16:49 text_pb.rb +-rw-r--r-- 1 ffo ffo 24170 Apr 11 16:49 user_pb.rb +-rw-r--r-- 1 ffo ffo 13568 Apr 11 16:49 v1_pb.rb +``` + +Import these files into your project to start interacting with ZITADEL's APIs. diff --git a/docs/docs/sdk-examples/java.mdx b/docs/docs/sdk-examples/java.mdx new file mode 100644 index 000000000..e7afb5188 --- /dev/null +++ b/docs/docs/sdk-examples/java.mdx @@ -0,0 +1,101 @@ +--- +title: Java Spring Boot +sidebar_label: Java Spring Boot +--- + + + + + + +
+ java logo + + Java is a general-purpose programming language designed for object-oriented programming. + Spring Security is used to protect your applications from unauthorized access, protect sensitive data, and enforce access control policies. + Get started integrating authentication to your Java Web App or API by checking out our zitadel-java Example +
+ + +### Resources +- [Example App Repository with Spring Security](https://github.com/zitadel/zitadel-java) +- [Example Web App with Spring Security](https://github.com/zitadel/zitadel-java/tree/main/web) +- [Example API App with Spring Security](https://github.com/zitadel/zitadel-java/tree/main/api) +- [Web APP Step-By-Step Guide](/docs/examples/login/java-spring) +- [API APP Step-By-Step Guide](/docs/examples/secure-api/java-spring) + +### Java SDK + +Java Spring Security is a widely used and common framework to integrate Authentication and Authorization into your Applications. +As of this at the moment there is no specific ZITADEL SDK, but we do show you how to integrate ZITADEL with Java Spring Security. +You can use this for both your Web as for your API Applications. + +The following features are covered by Java Spring Security: +- Authenticate your user using OIDC +- Requesting ZITADEL userinfo endpoint to get user data +- Refresh Token +- Requesting User Roles from userinfo +- Check if user has specified role +- Logout + +The goal is to have a ZITADEL Java SDK in the future which will cover the following: +- Wrapper around Java Spring Security +- Authentication with OIDC +- Authorization and checking Rolls +- Integrate ZITADEL APIs to read and manage resources +- Integrate ZITADEL Session API to create your own login UI + +### Java Examples + +#### Web Application Example + +What does the Web Application Example include: +- Home Page with Login Button +- Authenticating user with OIDC PKCE Flow +- Public Page: Accessible without authentication +- Private Page: Shows user information of authenticated user, only accessible after login +- Task Page: Only accessible after login and uses the API example. Requires the admin role for the application for some interaction. +- Logout + +[Example Web App with Spring Security](https://github.com/zitadel/zitadel-java/web) + +#### API Application Example + +What does the API Application Example include: +- REST API Application secured with Spring Security and OAuth2 +- Public Endpoint: Accessible without authentication +- Private Endpoint: Accessible with a token +- Administrator Endpoint: Accessible with a token of a user with admin role + +[Example API App with Spring Security](https://github.com/zitadel/zitadel-java/api) + +### Step-By-Step Guide + +For Java Spring we do have two different Step-By-Step Guides. +One to create your web application with integrated login and one to create your API with permission checks for calling users. +The guides lead you through the whole process from configuring the right application in ZITADEL to a ready application with integrated login or authentication checks. + +#### Web Application Guide + +After completing the Step-By-Step Guide you will have: +1. Example Web Application with integrated ZITADEL Login +2. Example page accessible by authenticated user showing retrieved user information +3. Example page accessible by authenticated user showing task list + - Task list can be read by authenticated user + - New tasks can be created by user with admin role +4. Logout +5. Correct setup for your application in ZITADEL + +[Web APP Step-By-Step Guide](/docs/examples/login/java-spring) +![Profile Page](/img/java-spring/app-profile.png) + +#### API Application Guide + +After completing the Step-By-Step Guide you will have: +1. Example REST API checking tokens against ZITADEL with OAuth2 +2. Public Endpoint accessible by any user +3. Private Endpoint accessible by authenticated user +4. Private Endpoint accessible by user with role 'admin' +5. Correct setup for your application in ZITADEL + +[API APP Step-By-Step Guide](/docs/examples/secure-api/java-spring) diff --git a/docs/docs/sdk-examples/nestjs.mdx b/docs/docs/sdk-examples/nestjs.mdx new file mode 100644 index 000000000..9238d823f --- /dev/null +++ b/docs/docs/sdk-examples/nestjs.mdx @@ -0,0 +1,56 @@ +--- +title: NestJS +sidebar_label: NestJS +--- + + + + + + +
+ nest js logo + + NestJS is a comprehensive and well-maintained TypeScript-based framework for building large-scale, scalable, and maintainable Node.js applications. + Get started integrating ZITADEL to your NestJS API by checking out the zitadel-nodejs-nestjs Example. +
+ + +### Resources +- [Example App Repository](https://github.com/ehwplus/zitadel-nodejs-nestjs) +- [Step-By-Step Guide](/docs/examples/secure-api/nodejs-nestjs) +- [Passport.js](https://github.com/buehler/node-passport-zitadel) for integrating authentication +- [Node.js gRPC Client Library](https://www.npmjs.com/package/@zitadel/node) for user and resource management + +### SDK + +ZITADEL doesn't provide a specific Nestjs SDK. You can use [passport-zitadel](https://github.com/buehler/node-passport-zitadel) for the authentication part. + +Check out the [Example Application](/docs/sdk-examples/nestjs#example-application). + +Additionally, you can use [@zitadel/node](https://www.npmjs.com/package/@zitadel/node) for user and resource management. +- Manage Resources through ZITADEL APIs +- Authenticate Service User +- Generated gRPC Clients for integrating ZITADEL API +- User, Organization, Project, etc. Management + +:::note +This library is built by our community. +::: + +### Example Application + +What does the API Application Example include: +- REST API Application secured with Spring Security and OAuth2 +- Private Endpoint: Accessible with a token + +[Example API Application](https://github.com/ehwplus/zitadel-nodejs-nestjs) + +### Step-By-Step Guide + +After completing the Step-By-Step Guide you will have: +1. Example REST API checking tokens against ZITADEL with OAuth2 +2. Private Endpoint accessible by authenticated user +3. Correct setup for your application in ZITADEL + +[API APP Step-By-Step Guide](/docs/examples/secure-api/nodejs-nestjs) \ No newline at end of file diff --git a/docs/docs/sdk-examples/nextjs.mdx b/docs/docs/sdk-examples/nextjs.mdx new file mode 100644 index 000000000..8aebbc33f --- /dev/null +++ b/docs/docs/sdk-examples/nextjs.mdx @@ -0,0 +1,54 @@ +--- +title: Next.js +sidebar_label: Next.js +--- + + + + + + +
+ next js logo + next js logo + + Next.js is a React-based framework that provides a powerful and flexible set of tools for building high-performance, SEO-friendly web applications. + Get started integrating authentication to your Next.js Application by checking out our zitadel-nextjs Example. +
+ + +### Resources +- [Example App Repository](https://github.com/zitadel/zitadel-nextjs) +- [Step-By-Step Guide](/docs/examples/login/nextjs) +- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment built with Next.js + +### SDK + +ZITADEL does not provide a Next.js specific SDK. +However, for integrating authentication into your Next.js Application you can use [NextAuth ZITADEL Provider](https://next-auth.js.org/providers/zitadel) + +Check out our [Example Application](/docs/sdk-examples/nextjs#example-application) + + +### Example Application + +The [zitadel-nextjs](https://github.com/zitadel/zitadel-nextjs) repository includes an Example Application ready to start and show how a Next.js application looks like with integrated ZITADEL Login. + +What does the Example include: +TODO: ?? Update with correct infos +- Home Page with Login Button +- Authenticating user with OIDC PKCE Flow +- Private Page: Shows user information of authenticated user, only accessible after login +- Logout + +### Step-By-Step Guide + +The [Step-By-Step Guide](/docs/examples/login/nextjs) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login. + +After completing the Step-By-Step Guide you will have: +TODO: ?? Updated with correct infos +1. Example Web Application with integrated ZITADEL Login +2. Example page accessible by authenticated user showing retrieved user information +3. Logout +4. Correct setup for your application in ZITADEL + diff --git a/docs/docs/sdk-examples/python-django.mdx b/docs/docs/sdk-examples/python-django.mdx new file mode 100644 index 000000000..8c7b3a889 --- /dev/null +++ b/docs/docs/sdk-examples/python-django.mdx @@ -0,0 +1,71 @@ +--- +title: Python Django +sidebar_label: Python Django +--- + + + + + + +
+ phyton logo + + Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. + Get started integrating authentication to your Django API Application by checking out our example-python-django-oauth or your Django Web application by checking out our example-python-django-oidc Example. +
+ + +### Resources +- [Example API App Repository](https://github.com/zitadel/example-python-django-oauth) +- [API App Step-By-Step Guide](/docs/examples/secure-api/python-django) +- [Example Web App Repository](https://github.com/zitadel/example-python-django-oidc) +- [Web App Step-By-Step Guide](/docs/examples/login/python-django) + +### Django SDK + +ZITADEL does not provide a Python Django specific SDK. +But you can integrate ZITADEL to your application by using any OIDC Library such as [mozilla-django-oidc](https://github.com/mozilla/mozilla-django-oidc) or [authlib](https://github.com/lepture/authlib). + +### Examples Application + +What does the API Application Example include: +- REST API Application secured with OAuth2 +- Public Endpoint: Accessible without authentication +- Private Endpoint: Accessible with a token +- Administrator Endpoint: Accessible with a token of a user with admin role + +[Example API App](https://github.com/zitadel/example-python-django-oauth) + +What does the Web Application Example include: +1. Example Web Application with integrated ZITADEL Login +2. Example page accessible by authenticated user showing retrieved user information +3. Example page accessible by authenticated user showing polls + - Votes for polls can only be done if authenticated + - New polls can be created by user with admin role +4. Logout +5. Correct setup for your application in ZITADEL + +[Example Web App](https://github.com/zitadel/example-python-django-oidc) + +### Step-By-Step Guide + +After completing the Step-By-Step Guide for an API you will have: +1. Example REST API checking tokens against ZITADEL with OAuth2 +2. Public Endpoint accessible by any user +3. Private Endpoint accessible by authenticated user +4. Private Endpoint accessible by user with role 'admin' +5. Correct setup for your application in ZITADEL + +[API App Step-By-Step Guide](/docs/examples/secure-api/python-django) + +After completing the Step-By-Step Guide for an Web application you will have: +1. Example Web Application with integrated ZITADEL Login +2. Example page accessible by authenticated user showing retrieved user information +3. Example page accessible by authenticated user showing polls + - Votes for polls can only be done if authenticated + - New polls can be created by user with admin role +4. Logout +5. Correct setup for your application in ZITADEL + +[Web App Step-By-Step Guide](/docs/examples/login/python-django) \ No newline at end of file diff --git a/docs/docs/sdk-examples/python-flask.mdx b/docs/docs/sdk-examples/python-flask.mdx new file mode 100644 index 000000000..d443d0b26 --- /dev/null +++ b/docs/docs/sdk-examples/python-flask.mdx @@ -0,0 +1,53 @@ +--- +title: Python Flask +sidebar_label: Python Flask +--- + + + + + + +
+ phyton logo + phyton logo + + Flask is a lightweight and easy-to-use microframework for Python web development. + Get started integrating authentication to your Flask API Application by checking out our example-api-python3-flask Example. +
+ + +### Resources +- [Example App Repository](https://github.com/zitadel/example-api-python3-flask) +- [API APP Step-By-Step Guide](/docs/examples/secure-api/python-flask) +- [Frontend with backend API](https://github.com/zitadel/example-quote-generator-app): A simple web application using a React front-end and a Python back-end API, both secured using ZITADEL +- [Fine-grained authorization](https://github.com/zitadel/example-fine-grained-authorization): Leverage actions, custom metadata, and claims for attribute-based access control + +### Flask SDK + +ZITADEL does not provide a Python Flask specific SDK. +But you can integrate ZITADEL to your application by using any OIDC Library such as [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc). + +Check out our [Example Application](/docs/sdk-examples/angular#example-application) + + +### Examples Application + +What does the API Application Example include: +- REST API Application secured with OAuth2 +- Public Endpoint: Accessible without authentication +- Private Endpoint: Accessible with a token +- Administrator Endpoint: Accessible with a token of a user with admin role + +[Example API App](https://github.com/zitadel/example-api-python3-flask) + +### Step-By-Step Guide + +After completing the Step-By-Step Guide you will have: +1. Example REST API checking tokens against ZITADEL with OAuth2 +2. Public Endpoint accessible by any user +3. Private Endpoint accessible by authenticated user +4. Private Endpoint accessible by user with role 'admin' +5. Correct setup for your application in ZITADEL + +[API APP Step-By-Step Guide](/docs/examples/secure-api/python-flask) \ No newline at end of file diff --git a/docs/docs/sdk-examples/react.mdx b/docs/docs/sdk-examples/react.mdx new file mode 100644 index 000000000..edbd20bc9 --- /dev/null +++ b/docs/docs/sdk-examples/react.mdx @@ -0,0 +1,72 @@ +--- +title: React +sidebar_label: React +--- + + + + + + +
+ react + + + React + {" "} + is a declarative, component-based JavaScript library for building user + interfaces. Integrate authentication to your React application easily by + using the{" "} + + zitadel-react + {" "} + SDK. +
+ +### Resources + +- [SDK with Example App](https://github.com/zitadel/zitadel-react) +- [Step-By-Step Guide](/docs/examples/login/react) + +### React SDK + +The [zitadel-react](https://github.com/zitadel/zitadel-react) SDK is a wrapper around the [oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts) and abstracts the handling of specific configurations for ZITADEL. + +The following features are covered by the SDK: + +- Authenticate your user with ZITADEL using OIDC +- Requesting ZITADEL userinfo endpoint to get user data +- Refresh Token +- Requesting User Roles from userinfo +- Check if user has specified role +- Logout + +The goal is to extend the SDK over the time with the following features: + +- Integrate ZITADEL APIs to read and manage resources +- Build your own login UI using our Session API + +### Example Application + +The [zitadel-react](https://github.com/zitadel/zitadel-react) repository also includes an Example Application ready to start and show how a React application looks like with integrated ZITADEL Login. + +What does the Example include: + +- Home Page with Login Button +- Authenticating user with OIDC PKCE Flow +- Public Page: Accessible without authentication +- Private Page: Shows user information of authenticated user, only accessible after login +- Administrator Page: Only accessible after login and with specific administrator role for the application +- Logout + +### Step-By-Step Guide + +The [Step-By-Step Guide](/docs/examples/login/react) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login. + +After completing the Step-By-Step Guide you will have: + +1. Example Web Application with integrated ZITADEL Login +2. Example page accessible by authenticated user showing retrieved user information +3. Example administrator page accessible by user with administrator role +4. Logout +5. Correct setup for your application in ZITADEL diff --git a/docs/docs/sdk-examples/symfony.mdx b/docs/docs/sdk-examples/symfony.mdx new file mode 100644 index 000000000..297f75748 --- /dev/null +++ b/docs/docs/sdk-examples/symfony.mdx @@ -0,0 +1,53 @@ +--- +title: Symfony PHP Framework +sidebar_label: Symfony PHP +--- + + + + + + +
+ php logo + + Symfony is a high-performance PHP framework that provides a solid foundation for building scalable and maintainable web applications. + Integrate authentication to your Symfony application easily by using the example-symfony-oidc Example. +
+ +### Resources +- [Example Web App with ZITADEL Login](https://github.com/zitadel/example-symfony-oidc) +- [Step-By-Step Guide](/docs/examples/login/symfony) + +### PHP SDK + +ZITADEL does not provide a Symfony specific SDK. +But you can integrate ZITADEL to your application by using any OIDC Library such as [symfony-oidc](https://github.com/Drenso/symfony-oidc). + +Check out our [Example Application](/docs/sdk-examples/symfony#example-application) + +### Example Application + +The [example-symfony-oidc](https://github.com/zitadel/example-symfony-oidc) repository includes an Example Application ready to start and show how a Symfony application looks like with integrated ZITADEL Login. + +What does the Example include: +- OIDC Code flow with User Info call after authentication. +- Fully integrated with Symfony security and firewall. +- User Role mapping +- Persistent user data using local sqlite file. See DATABASE_URL in .env. +- Public page at / +- Authenticated /profile page for all users. +- Authenticated /admin page for admin role users. +- Logout + +### Step-By-Step Guide + +The [Step-By-Step Guide](/docs/examples/login/symfony) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login. + +After completing the Step-By-Step Guide you will have: +1. Example Web Application with integrated ZITADEL Login +2. Example page accessible without authentication +3. Example page accessible by authenticated user showing retrieved user information +4. Example administrator page accessible by user with administrator role +5. Logout +6. Correct setup for your application in ZITADEL diff --git a/docs/docs/sdk-examples/vue.mdx b/docs/docs/sdk-examples/vue.mdx new file mode 100644 index 000000000..237b4c64a --- /dev/null +++ b/docs/docs/sdk-examples/vue.mdx @@ -0,0 +1,62 @@ +--- +title: Vue.js +sidebar_label: Vue.js +--- + + + + + + +
+ vue + + Vue.js is a JavaScript framework for building user interfaces that is simple, flexible, and versatile. + Integrate authentication to your Vue.js application easily by using the zitadel-vue SDK +
+ +### Resources +- [SDK with Example App](https://github.com/zitadel/zitadel-vue) +- [Step-By-Step Guide](/docs/examples/login/vue) + +### Vue SDK + +The [zitadel-vue](https://github.com/zitadel/zitadel-vue) SDK is a wrapper around the [vue-oidc-client](https://github.com/soukoku/vue-oidc-client) and abstracts the handling of specific configurations for ZITADEL. + +The following features are covered by the SDK: +- Authenticate your user with ZITADEL using OIDC +- Requesting ZITADEL userinfo endpoint to get user data +- Refresh Token +- Requesting User Roles from userinfo +- Check if user has specified role +- Logout + +The goal is to extend the SDK over the time with the following features: +- Integrate ZITADEL APIs to read and manage resources +- Build your own login UI using our Session API + +### Example Application + +The [zitadel-vue](https://github.com/zitadel/zitadel-vue) repository also includes an Example Application ready to start and show how a Vue application looks like with integrated ZITADEL Login. + +What does the Example include: +- Home Page with Login Button +- Authenticating user with OIDC PKCE Flow +- Public Page: Accessible without authentication +- Private Page: Shows user information of authenticated user, only accessible after login +- Administrator Page: Only accessible after login and with specific administrator role for the application +- Logout + +### Step-By-Step Guide + +The [Step-By-Step Guide](/docs/examples/login/vue) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login. + +After completing the Step-By-Step Guide you will have: +1. Example Web Application with integrated ZITADEL Login +2. Example page accessible by authenticated user showing retrieved user information +3. Example administrator page accessible by user with administrator role +4. Logout +5. Correct setup for your application in ZITADEL + +![View Example App](/img/vue/app-screen.png) + diff --git a/docs/sidebars.js b/docs/sidebars.js index 9f1220f7c..da50f8bc7 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -11,14 +11,15 @@ module.exports = { type: "category", label: "Frontend", items: [ - "examples/login/react", - "examples/login/vue", "examples/login/angular", "examples/login/flutter", - "examples/login/nextjs", "examples/login/go", - "examples/login/symfony", "examples/login/java-spring", + "examples/login/nextjs", + "examples/login/python-django", + "examples/login/react", + "examples/login/symfony", + "examples/login/vue", { type: "link", label: ".Net", @@ -32,37 +33,72 @@ module.exports = { label: "Backend", items: [ "examples/secure-api/go", + "examples/secure-api/java-spring", + "examples/secure-api/python-django", "examples/secure-api/python-flask", + "examples/secure-api/nodejs-nestjs", { type: "link", label: ".Net", href: "https://github.com/smartive/zitadel-net", }, - "examples/secure-api/nodejs-nestjs", - "examples/secure-api/java-spring", ], collapsed: true, }, ], }, - "examples/sdks", { type: "category", - label: "Example Applications", + label: "Examples & SDKs", items: [ - "examples/introduction", + "sdk-examples/introduction", + "sdk-examples/angular", + "sdk-examples/flutter", + "sdk-examples/go", + "sdk-examples/java", + "sdk-examples/nestjs", + "sdk-examples/nextjs", + "sdk-examples/python-flask", + "sdk-examples/python-django", + "sdk-examples/react", + "sdk-examples/symfony", + "sdk-examples/vue", { type: "link", - label: "Frontend", // The link label - href: "/examples/introduction#frontend", // The internal path + label: "Dart", + href: "https://github.com/smartive/zitadel-dart", }, { type: "link", - label: "Backend", // The link label - href: "/examples/introduction#backend", // The internal path + label: "Elixir", + href: "https://github.com/maennchen/zitadel_api", + }, + { + type: "link", + label: "NextAuth", + href: "https://next-auth.js.org/providers/zitadel", + }, + { + type: "link", + label: "Node.js", + href: "https://www.npmjs.com/package/@zitadel/node", + }, + { + type: "link", + label: ".Net", + href: "https://github.com/smartive/zitadel-net", + }, + { + type: "link", + label: "Passport.js", + href: "https://github.com/buehler/node-passport-zitadel", + }, + { + type: "link", + label: "Rust", + href: "https://github.com/smartive/zitadel-rust", }, ], - collapsed: true, }, { type: "category", diff --git a/docs/src/components/tile.jsx b/docs/src/components/tile.jsx new file mode 100644 index 000000000..e1066325c --- /dev/null +++ b/docs/src/components/tile.jsx @@ -0,0 +1,35 @@ +import React from "react"; +import styles from "../css/tile.module.css"; + +export function Tile({ title, imageSource, imageSourceLight, link, external }) { + return ( + +

{title}

+ {title} + {imageSourceLight && ( + {title} + )} + {external && ( +
+ +
+ )} + + ); +} diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 5cb0c80ec..38ac4bba8 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -127,12 +127,20 @@ --gigibannerforeground: black; --footer-border: rgba(0, 0, 0, 0.12); --card-border: rgba(135, 149, 161, 0.2); + --card-border-hover: #6c8eef; --ifm-pagination-nav-color-hover: #000000; --input-border: #1a191954; --input-hover-border: #000000; --input-background: #00000004; } +.tile-wrapper { + margin: 0 -8px; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + pre code { font-size: 14px !important; } @@ -232,11 +240,22 @@ pre code { } h1 { - font-size: 2.2rem; + font-size: 3rem; } h2 { - font-size: 1.8rem; + font-size: 2.5rem; + margin-top: 2.5rem; +} + +h3 { + font-size: 2rem; + margin-top: 2.5rem; +} + +h4 { + font-size: 1.5rem; + margin-top: 2.5rem; } .navbar__brand { @@ -305,6 +324,7 @@ h2 { --gigibannerforeground: white; --footer-border: rgba(255, 255, 255, 0.12); --card-border: rgba(135, 149, 161, 0.2); + --card-border-hover: #ffffff; --ifm-pagination-nav-color-hover: #ffffff; --input-border: #f9f7f775; --input-hover-border: #ffffff; @@ -563,4 +583,20 @@ p strong { background-color: var(--ifm-color-secondary-contrast-background); color: var(--ifm-color-secondary-contrast-foreground); border-color: var(--ifm-color-secondary-dark); -} \ No newline at end of file +} + +.hideondark { + display: block !important; +} + +:root[data-theme="dark"] .hideondark { + display: none !important; +} + +.hideonlight { + display: none !important; +} + +:root[data-theme="dark"] .hideonlight { + display: block !important; +} diff --git a/docs/src/css/tile.module.css b/docs/src/css/tile.module.css new file mode 100644 index 000000000..c2f2ff2eb --- /dev/null +++ b/docs/src/css/tile.module.css @@ -0,0 +1,69 @@ +.tile { + position: relative; + margin: 0.5rem; + border-radius: 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + min-width: 230px; + background: var(--card-background); + padding: 0.1rem; + text-align: center; + text-decoration: none; + transition: all 0.2s ease-in-out; + border: 1px solid var(--card-border); + overflow: hidden; + text-decoration: none; +} + +.tile h4 { + margin-top: 0.5rem; + margin-bottom: 0; + text-decoration: none; +} + +.tile:hover { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + cursor: pointer; + text-decoration: none !important; + border-color: var(--card-border-hover); +} + +.tile p { + font-size: 14px; + margin: 0; + color: var(--ifm-font-color-base); +} + +.tile img { + display: block; + width: auto; + height: 60px; + background-size: cover; + object-fit: contain; + background-position: center; + pointer-events: none; + box-shadow: none !important; + margin: 0 auto; +} + +.external { + position: absolute; + top: -1rem; + right: -1rem; + border-radius: 50vw; + padding: 1rem; + height: 4rem; + width: 4rem; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--card-border); + background: #ffffff20; +} + +.external i { + margin-bottom: -0.5rem; + margin-left: -0.5rem; +} diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 0e88b075a..630a7d4fb 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -38,13 +38,13 @@ const features = [ description="" /> Learn how to integrate your applications and build secure workflows and @@ -133,7 +133,7 @@ const features = [ description="" /> \ No newline at end of file diff --git a/docs/static/img/tech/flask.svg b/docs/static/img/tech/flask.svg new file mode 100644 index 000000000..b8f398052 --- /dev/null +++ b/docs/static/img/tech/flask.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/tech/flasklight.svg b/docs/static/img/tech/flasklight.svg new file mode 100644 index 000000000..d26a6e44e --- /dev/null +++ b/docs/static/img/tech/flasklight.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/tech/nestjs.svg b/docs/static/img/tech/nestjs.svg new file mode 100644 index 000000000..69830240c --- /dev/null +++ b/docs/static/img/tech/nestjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/tech/nextjs.svg b/docs/static/img/tech/nextjs.svg index 312dc61b9..803afe1d4 100644 --- a/docs/static/img/tech/nextjs.svg +++ b/docs/static/img/tech/nextjs.svg @@ -5,7 +5,7 @@ Created with Sketch. - + diff --git a/docs/static/img/tech/nextjslight.svg b/docs/static/img/tech/nextjslight.svg index 803afe1d4..312dc61b9 100644 --- a/docs/static/img/tech/nextjslight.svg +++ b/docs/static/img/tech/nextjslight.svg @@ -5,7 +5,7 @@ Created with Sketch. - + diff --git a/docs/static/img/tech/passportjs.svg b/docs/static/img/tech/passportjs.svg new file mode 100644 index 000000000..daf12a04f --- /dev/null +++ b/docs/static/img/tech/passportjs.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/static/img/tech/rust.svg b/docs/static/img/tech/rust.svg new file mode 100644 index 000000000..62424d8ff --- /dev/null +++ b/docs/static/img/tech/rust.svg @@ -0,0 +1,61 @@ + + + diff --git a/docs/static/img/tech/rustlight.svg b/docs/static/img/tech/rustlight.svg new file mode 100644 index 000000000..e53b4e738 --- /dev/null +++ b/docs/static/img/tech/rustlight.svg @@ -0,0 +1,61 @@ + + +