diff --git a/docs/docs/guides/start/quickstart.mdx b/docs/docs/guides/start/quickstart.mdx
index 0995afe2e..e0805a4a0 100644
--- a/docs/docs/guides/start/quickstart.mdx
+++ b/docs/docs/guides/start/quickstart.mdx
@@ -3,10 +3,12 @@ title: The ZITADEL Quick Start Guide
sidebar_label: Quick Start Guide
---
-## Introduction
+import { ResponsivePlayer } from "../../../src/components/player";
In this quick start guide, we will be learning some fundamentals on how to set up ZITADEL for user management and application security. Thereafter, we will secure a React-based Single Page Application (SPA) using ZITADEL.
+
+
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
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 692a480f4..93f557792 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -65,6 +65,12 @@ module.exports = {
target: "_blank",
},
items: [
+ {
+ type: "doc",
+ label: "🚀 Quick Start",
+ docId: "guides/start/quickstart",
+ position: "left",
+ },
{
type: "doc",
label: "Documentation",
diff --git a/docs/package.json b/docs/package.json
index ea2baa9b0..6dbca3a60 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -38,6 +38,7 @@
"react": "17.0.2",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "17.0.2",
+ "react-player": "^2.15.1",
"sitemap": "7.1.1",
"swc-loader": "^0.2.3",
"wait-on": "6.0.1"
diff --git a/docs/src/components/player.jsx b/docs/src/components/player.jsx
new file mode 100644
index 000000000..2c1b4b73b
--- /dev/null
+++ b/docs/src/components/player.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import ReactPlayer from 'react-player'
+
+export function ResponsivePlayer({ url, ...props }) {
+
+return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 38ac4bba8..5083c842e 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -600,3 +600,16 @@ p strong {
:root[data-theme="dark"] .hideonlight {
display: block !important;
}
+
+
+.player-wrapper {
+ position: relative;
+ padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
+ margin-bottom: 2rem;
+}
+
+.react-player {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
\ No newline at end of file
diff --git a/docs/yarn.lock b/docs/yarn.lock
index e935d3adf..a42d5b908 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -4630,6 +4630,11 @@ deep-extend@^0.6.0:
resolved "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz"
integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
+deepmerge@^4.0.0:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+ integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
deepmerge@^4.2.2:
version "4.2.2"
resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
@@ -6643,6 +6648,11 @@ liquid-json@0.3.1:
resolved "https://registry.npmjs.org/liquid-json/-/liquid-json-0.3.1.tgz"
integrity sha512-wUayTU8MS827Dam6MxgD72Ui+KOSF+u/eIqpatOtjnvgJ0+mnDq33uC2M7J0tPK+upe/DpUAuK4JUU89iBoNKQ==
+load-script@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+ integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
loader-runner@^4.2.0:
version "4.3.0"
resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz"
@@ -6896,6 +6906,11 @@ memfs@^3.1.2, memfs@^3.4.1:
dependencies:
fs-monkey "^1.0.4"
+memoize-one@^5.1.1:
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+ integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
merge-descriptors@1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
@@ -8464,6 +8479,11 @@ react-error-overlay@^6.0.11:
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
+react-fast-compare@^3.0.1:
+ version "3.2.2"
+ resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+ integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
react-fast-compare@^3.2.0:
version "3.2.0"
resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
@@ -8562,6 +8582,17 @@ react-modal@^3.15.1:
react-lifecycles-compat "^3.0.0"
warning "^4.0.3"
+react-player@^2.15.1:
+ version "2.15.1"
+ resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.15.1.tgz#a5905126a6c5ba2667391a0d72da9f3a1ab57d54"
+ integrity sha512-ni1XFuYZuhIKKdeFII+KRLmIPcvCYlyXvtSMhNOgssdfnSovmakBtBTW2bxowPvmpKy5BTR4jC4CF79ucgHT+g==
+ dependencies:
+ deepmerge "^4.0.0"
+ load-script "^1.0.0"
+ memoize-one "^5.1.1"
+ prop-types "^15.7.2"
+ react-fast-compare "^3.0.1"
+
react-redux@^7.2.0:
version "7.2.9"
resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"