mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-25 08:42:16 +00:00
fix: Separate Example Applications and SDKs/Integrations more clearly (#11569)
# Which Problems Are Solved The distinction between Example Applications and SDKs has not been clear. In the SDKs section a lot of Example applications where listed. Also In the SDKs it was not really clear what the SDKs actually are. Also some examples and skds are outdated and not well maintained anymore. # How the Problems Are Solved - Moved all example app guides to the Example Applications Section - Restructured SDKs Nav --> SDKs & Integrations: Frontend & Mobile, Backend & API, Management API Clients - Removed unnecessary / outdated guides - Remove ids in framework.json for frameworks which shouldn't be rendered in console ## Todos: - Update SDKs Introduction page - Add links to common oidc libs for most used frameworks --------- Co-authored-by: Mridang Agarwalla <[email protected]>
This commit is contained in:
Fabienne Bühler
co-authored by
Mridang Agarwalla
Mridang Agarwalla
parent
d5f35fbd54
commit
574e23e834
@@ -0,0 +1,25 @@
|
||||
| Framework | Recommended OIDC Library | Example Documentation Link |
|
||||
|---|---|---|
|
||||
| Angular | [@edgeflare/ngx-oidc](https://www.npmjs.com/package/@edgeflare/ngx-oidc) | [Integration Example](/sdk-examples/angular) |
|
||||
| Astro | [@auth/core](https://www.npmjs.com/package/@auth/core) | [Integration Example](/sdk-examples/astro) |
|
||||
| Django | [Authlib](https://authlib.org) | [Integration Example](/sdk-examples/django) |
|
||||
| Express.js | [@auth/express](https://www.npmjs.com/package/@auth/express) | [Integration Example](/sdk-examples/expressjs) |
|
||||
| FastAPI | [Authlib](https://authlib.org) | [Integration Example](/sdk-examples/fastapi) |
|
||||
| Fastify | [@auth/core](https://www.npmjs.com/package/@auth/core) | [Integration Example](/sdk-examples/fastify) |
|
||||
| Flask | [Authlib](https://authlib.org) | [Integration Example](/sdk-examples/flask) |
|
||||
| Hono | [Auth.js](https://authjs.dev) | [Integration Example](/sdk-examples/hono) |
|
||||
| Laravel | [Laravel Socialite](https://laravel.com/docs/socialite) | [Integration Example](/sdk-examples/laravel) |
|
||||
| Nest.js | [@auth/core](https://www.npmjs.com/package/@auth/core) | [Integration Example](/sdk-examples/nestjs) |
|
||||
| Next.js | [next-auth](https://next-auth.js.org) | [Integration Example](/sdk-examples/nextjs) |
|
||||
| Nuxt.js | [next-auth](https://next-auth.js.org) | [Integration Example](/sdk-examples/nuxtjs) |
|
||||
| Qwik | [@auth/core](https://www.npmjs.com/package/@auth/core) | [Integration Example](/sdk-examples/qwik) |
|
||||
| SolidStart | [@auth/solid-start](https://www.npmjs.com/package/@auth/solid-start) |[Integration Example](/sdk-examples/solidstart) |
|
||||
| Svelte | [@auth/sveltekit](https://www.npmjs.com/package/@auth/sveltekit) | [Integration Example](/sdk-examples/svelte) |
|
||||
| Symfony | [Symfony Security](https://symfony.com/doc/current/security.html) | [Integration Example](/sdk-examples/symfony) |
|
||||
|
||||
|
||||
You might want to check out the following links to find another 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/)
|
||||
@@ -1,68 +0,0 @@
|
||||
---
|
||||
title: Flutter
|
||||
description: "Integrate ZITADEL authentication into Flutter applications using the Flutter SDK and OIDC PKCE."
|
||||
sidebar_label: Flutter
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/flutter.svg" alt="flutter logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://flutter.dev/" target="_blank">Flutter</a> 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 <a href="https://github.com/zitadel/zitadel_flutter" target="_blank">zitadel-flutter</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Resources
|
||||
- [Flutter Example Application Repository](https://github.com/zitadel/zitadel_flutter)
|
||||
- [Step-By-Step Guide](/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](/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 Account
|
||||
- Generated gRPC Clients for integrating ZITADEL API
|
||||
- User, Organization, Project, etc. Management
|
||||
|
||||
<Callout>
|
||||
This library is built by our community.
|
||||
</Callout>
|
||||
|
||||
### Example Application
|
||||
|
||||
The [zitadel-flutter](https://github.com/zitadel/zitadel_flutter) repository includes an Example Application ready to start and show how a 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](/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
|
||||
|
||||
<div style={{display: 'grid', 'gridColumnGap': '1rem', 'gridTemplateColumns': '1fr 1fr', 'maxWidth': '500px', 'margin': '0 auto'}}>
|
||||
<img src="/docs/img/flutter/not-authed.png" alt="Unauthenticated" height="500px" />
|
||||
<img src="/docs/img/flutter/authed.png" alt="Flutter Authenticated" height="500px" />
|
||||
</div>
|
||||
|
||||
<div style={{display: 'grid', 'gridColumnGap': '1rem', 'gridTemplateColumns': '1fr 1fr', 'maxWidth': '800px', 'margin': '0 auto'}}>
|
||||
<img src="/docs/img/flutter/web-not-authed.png" alt="Unauthenticated" height="500px" />
|
||||
<img src="/docs/img/flutter/web-authed.png" alt="Flutter Authenticated" height="500px" />
|
||||
</div>
|
||||
@@ -3,7 +3,7 @@ title: Hono
|
||||
description: "Implement secure authentication in Hono applications with ZITADEL and Auth.js using the OAuth 2.0 PKCE flow."
|
||||
sidebar_label: Hono
|
||||
framework_url: https://hono.dev
|
||||
auth_library: "@auth/core"
|
||||
auth_library: "Auth.js"
|
||||
auth_library_url: https://authjs.dev
|
||||
example_repo: https://github.com/zitadel/example-auth-hono
|
||||
auth_flow: pkce
|
||||
|
||||
@@ -5,6 +5,7 @@ sidebar_label: Introduction
|
||||
---
|
||||
|
||||
import { Frameworks } from "@/components/frameworks";
|
||||
import OIDCLibrariesTable from './_oidc-libraries-table.mdx'
|
||||
|
||||
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.
|
||||
@@ -19,24 +20,19 @@ If you encounter issues with a community-contributed example, please contact the
|
||||
We provide this list for informational purposes and to foster community engagement, but we do not assume responsibility for these external implementations.
|
||||
</Callout>
|
||||
|
||||
## Clients
|
||||
## Management Clients
|
||||
|
||||
Automate and manage your ZITADEL instance programmatically. These clients are built for Machine-to-Machine (M2M) communication, allowing your backend services to perform administrative tasks without human intervention.
|
||||
|
||||
<Frameworks filter={(framework) => framework.client === true } />
|
||||
|
||||
## SDKs
|
||||
## ZITADEL SDKs
|
||||
|
||||
ZITADEL SDKs are purpose-built to provide a deep, idiomatic integration into your specific framework.
|
||||
While standard OIDC libraries handle basic authentication, Zitadel SDKs act as a powerful abstraction layer, streamlining complex identity tasks and providing direct access to the ZITADEL core platform.
|
||||
|
||||
<Frameworks filter={(framework) => framework.sdk === true } />
|
||||
|
||||
## Resources
|
||||
|
||||
<Frameworks filter={(framework) => framework.client === false || framework.client == null} />
|
||||
|
||||
To further streamline your setup, simply visit the management console in Zitadel where you can select one of the languages or frameworks. This will allow you to instantly set up the settings for that specific sample in Zitadel, ensuring you have everything you need to get started right away.
|
||||
|
||||
|
||||
|
||||
To begin configuring login for any of these samples, start [here](/guides/manage/console/console-overview).
|
||||
|
||||
## 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.
|
||||
@@ -45,22 +41,18 @@ 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/)
|
||||
<OIDCLibrariesTable />
|
||||
|
||||
## Other example applications
|
||||
## Example Applications
|
||||
|
||||
- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment. Uses Next.js 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 account
|
||||
- [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
|
||||
## Missing Management Client
|
||||
|
||||
Is your language/framework missing? Fear not, you can generate your gRPC API Client with ease.
|
||||
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Integrating ZITADEL with Standard OIDC & OAuth2 Libraries
|
||||
description: Integrate ZITADEL with any standards-compliant OpenID Connect (OIDC) or OAuth2 library.
|
||||
---
|
||||
|
||||
import OIDCLibrariesTable from './_oidc-libraries-table.mdx'
|
||||
|
||||
Since ZITADEL is a certified provider, you can use industry-standard tools to handle authentication and API protection in any language or framework without vendor lock-in.
|
||||
|
||||
<OIDCLibrariesTable />
|
||||
@@ -3,7 +3,7 @@ title: SolidStart
|
||||
description: "Integrate ZITADEL authentication into SolidStart applications using the OAuth 2.0 PKCE flow."
|
||||
sidebar_label: SolidStart
|
||||
framework_url: https://start.solidjs.com
|
||||
auth_library: "@auth/core"
|
||||
auth_library: "@auth/solid-start"
|
||||
auth_library_url: https://www.npmjs.com/package/@auth/core
|
||||
example_repo: https://github.com/zitadel/example-auth-solidstart
|
||||
auth_flow: pkce
|
||||
|
||||
@@ -3,8 +3,8 @@ title: SvelteKit
|
||||
description: "Integrate ZITADEL authentication into SvelteKit applications using the OAuth 2.0 PKCE flow."
|
||||
sidebar_label: SvelteKit
|
||||
framework_url: https://kit.svelte.dev
|
||||
auth_library: "@auth/core"
|
||||
auth_library_url: https://www.npmjs.com/package/@auth/core
|
||||
auth_library: "@auth/sveltekit"
|
||||
auth_library_url: https://www.npmjs.com/package/@auth/sveltekit
|
||||
example_repo: https://github.com/zitadel/example-auth-sveltekit
|
||||
auth_flow: pkce
|
||||
status: stable
|
||||
|
||||
Reference in New Issue
Block a user