TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-05-31 00:18:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add video to quickstart (#7512)

Browse Source
This commit is contained in:
mffap 2024-03-06 20:31:49 +02:00 committed by GitHub
parent 3af28d29d2
commit 383b68b48f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 71 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/guides/start/quickstart.mdx
View File

@ -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.
<ResponsivePlayer playing controls url='https://www.youtube.com/watch?v=5THbQljoPKg' />
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

6
docs/docusaurus.config.js
View File

@ -65,6 +65,12 @@ module.exports = {
target: "_blank",
},
items: [
{
type: "doc",
label: "🚀 Quick Start",
docId: "guides/start/quickstart",
position: "left",
},
{
type: "doc",
label: "Documentation",

1
docs/package.json
View File

@ -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"

17
docs/src/components/player.jsx Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import ReactPlayer from 'react-player'
export function ResponsivePlayer({ url, ...props }) {
return (
<div className='player-wrapper'>
<ReactPlayer
className='react-player'
url={url}
width='100%'
height='100%'
{...props}
/>
</div>
);
}

13
docs/src/css/custom.css
View File

@ -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;
}

31
docs/yarn.lock
View File

@ -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"