diff --git a/docs/docs/guides/basics/applications.mdx b/docs/docs/guides/basics/applications.mdx
new file mode 100644
index 0000000000..3e5f21c06e
--- /dev/null
+++ b/docs/docs/guides/basics/applications.mdx
@@ -0,0 +1,103 @@
+---
+title: Applications
+---
+
+import ThemedImage from '@theme/ThemedImage';
+
+import AuthType from '../integrations/application/auth-type.mdx';
+import RedirectURIs from '../integrations/application/redirect-uris.mdx';
+import GenerateKey from '../integrations/application/generate-key.mdx';
+import ReviewConfig from '../integrations/application/review-config.mdx';
+
+
+
+
+ | Description |
+ Learn what applications are and how to use. |
+
+
+ | Learning Outcomes |
+
+ In this module you will:
+
+ - Get an overview of application types
+ - Learn which application type allows which authentication types
+ - Learn why Redirect URIs make login processes more secure
+
+ |
+
+
+ | Prerequisites |
+
+
+ |
+
+
+
+
+## What is an application?
+
+Applications are the entry point to your project. Users either login into one of your clients and interact with them directly or use one of your API, maybe without even knowing. All applications share the roles and authorizations of their project.
+
+
+
+## Application types
+
+If you create a new application in ZITADEL Console you have to choose the type of your application. But which one do you have to choose?
+
+Detailed information about authentication types can be found [here](../authentication/login-users#create-application).
+
+
+
+### Web
+
+Server side rendered applications users interact with. For example if you develop an application using Thymeleaf in Java or Razor in .NET or want to enable SSO in Gitlab.
+
+Following authentication types can be used:
+
+
+
+### Native
+
+Applications installed on a thin client. For example on a smartphone or computer.
+
+These applications uses the Key file generated by ZITADEL to authenticate.
+
+
+
+### User Agent
+
+Applications that are executed in a web browser, for example single page applications executed in the browser developed with JavaScript frameworks like [Angular](../../quickstarts/login/angular) or [React](../../quickstarts/login/react)
+
+Following authentication types can be used:
+
+
+
+### API
+
+Applications without human interaction. These applications are accessed by other applications, so called machine to machine communication.
+
+Following authentication types can be used:
+
+
+
+## Redirect URIs
+
+
+
+## Review Configuration
+
+
+
+## Generate key for private key JWT
+
+
\ No newline at end of file
diff --git a/docs/docs/guides/integrations/application/application.mdx b/docs/docs/guides/integrations/application/application.mdx
new file mode 100644
index 0000000000..00cbbc75a7
--- /dev/null
+++ b/docs/docs/guides/integrations/application/application.mdx
@@ -0,0 +1,38 @@
+import ThemedImage from '@theme/ThemedImage';
+import AuthType from './auth-type.mdx';
+import RedirectURIs from './redirect-uris.mdx';
+import GenerateKey from './generate-key.mdx';
+import ReviewConfig from './review-config.mdx';
+
+export default function CreateApp(props) {
+ return (
+
+
Create the {props.appName ? props.appName + " app" : "application"}
+
Go to the detail page of your project and click the "+"-button in the application-section. This will lead you to the the creation wizard.
+
+
Create the app by setting a name and select the application type "Web"
+
+
Select the authentication method
+
The authentication method defines the communication flow during a login
+
+ Redirect URIs
+
+ Review your configuration
+
+ Create key for private key JWT
+
+
+ {defaultAuthTypes(props.appType, props.authType)}
+
+ );
+}
+
+export function defaultAuthTypes(appType, authType) {
+ let rows;
+ switch (appType) {
+ case 'web':
+ rows = web(authType);
+ break;
+ case 'user-agent':
+ rows = userAgent(authType);
+ break;
+ break;
+ case 'api':
+ rows = api(authType);
+ break;
+ break;
+ case 'native':
+ rows = native();
+ break;
+ default:
+ return null
+ break;
+ }
+ return (
+
+
+ {rows.map((fn) => fn())}
+
+
+ );
+}
+
+export const web = (typ) => {
+ switch (typ) {
+ case 'pkce':
+ return [pkce];
+ case 'code':
+ return [code];
+ case 'jwt':
+ return [jwt];
+ case 'post':
+ return [post];
+ }
+ return [pkce, code, jwt, post]
+}
+
+export const userAgent = (typ) => {
+ switch (typ) {
+ case 'pkce':
+ return [pkce];
+ case 'implicit':
+ return [implicit];
+ }
+ return [pkce, implicit]
+}
+
+export const api = (typ) => {
+ switch (typ) {
+ case 'jwt':
+ return [jwt];
+ case 'basic':
+ return [basic];
+ }
+ return [jwt, basic]
+}
+
+export const native = () => {
+ return [() =>
+ |
+ Native only supports code authentication type, that's why you don't have to select any
+ |
+
]
+}
+
+export const pkce = () =>
+ |
+
+ |
+
+ PKCE
+ Recommended because it's the most secure.
+ |
+
+
+export const code = () =>
+ |
+
+ |
+
+ Code
+ Use if your application needs client id and client secret
+ |
+
+
+export const jwt = () =>
+ |
+
+ |
+
+ (Private Key) JWT
+ Key file to authorize your application. You can create keys after created the application see below
+ |
+
+
+export const post = () =>
+ |
+
+ |
+
+ Post
+ Only use if you have no other possibilities. Client id and client secret in request body
+ |
+
+
+export const implicit = () =>
+ |
+
+ |
+
+ Implicit
+ Only use if you have no other possibilities. The flow is objective to be removed.
+ |
+
+
+export const basic = () =>
+ |
+
+ |
+
+ Basic
+ The application sends username and password
+ |
+
\ No newline at end of file
diff --git a/docs/docs/guides/integrations/application/generate-key.mdx b/docs/docs/guides/integrations/application/generate-key.mdx
new file mode 100644
index 0000000000..a2439f0135
--- /dev/null
+++ b/docs/docs/guides/integrations/application/generate-key.mdx
@@ -0,0 +1,18 @@
+import ThemedImage from '@theme/ThemedImage';
+
+export default function GenerateKey(props) {
+ return (props.appType == 'api' || props.authType == 'jwt') ? (
+
+
+ After you successfully created your application with authentication type JWT your can create keys in the "KEYS" section of the app details like following video shows:
+
+
+
+
+ During the login flow the application defines where a user is redirected to after login or logout.
+
+ ZITADEL verifies if the URL the user gets redirected to is valid by checking if one of the redirect URIs match.
+
+
+ - Redirect URIs are verified during the login process.
+ {
+ props.redirectURI ?
+ - The default redirect uri of your app is
{props.redirectURI}
+ : null
+ }
+ - Post Logout URIs are verified during the logout process.
+ {
+ props.postLogoutURI ?
+ - The default post logout uri of your app is
{props.postLogoutURI}
+ : null
+ }
+
+
+ The default redirect uri of your app is {props.redirectURI}
+
+
+
+
This page shows what will be created. After you have reviewed the configuration you can create the application.
+
Client information
+
Please make sure to safe the client {clientObjects.join(' and ')} for later user in the application.
+
+