Merge pull request #498 from permitio/filipermit/access-request-tutor…

…ial-docs

Filipermit/access request tutorial docs

docs/overview/access-requests-and-approvals.mdx

@@ -0,0 +1,136 @@
+---
+sidebar_position: 9
+title: Access Requests & Approvals
+---
+
+In this tutorial, you will learn how to integrate an access request and approval system into your app using Permit.io. We’ll
+cover how users can **[request access](/embeddable-uis/element/access-request)** to specific areas of your
+application, while admins **review, [approve](/embeddable-uis/element/operation-approval) or deny** those requests effortlessly.
+
+<br />
+
+---
+
+import TimelineStep from "../../src/components/timeline/TimelineStep";
+import TimelineWrapper from "../../src/components/timeline/TimelineWrapper";
+import Video from "../../src/components/video/Video";
+
+## What are Permit Elements?
+
+In this tutorial, we’ll explore **[Permit Elements](/embeddable-uis/overview)** — secure, embeddable UI
+components that revolutionize access management for modern applications. These components empower your users to handle **[access
+requests](/embeddable-uis/element/access-request)** and approvals directly within your app, delivering a
+seamless and user-friendly experience without compromising on security.
+
+With Permit Elements, you can effortlessly integrate permission management into your app, enabling you to streamline workflows
+and maintain robust control over access policies.
+
+### A demo of Permit Elements
+
+<br />
+
+<Video src={"https://www.youtube.com/watch?v=3g20HqYmGDs"} controls />
+
+<br />
+<br />
+
+---
+
+<br />
+<br />
+
+<TimelineWrapper>
+<TimelineStep>
+
+## Configuring your JWKS
+
+In this section, we’ll explore **[JSON Web Key Sets](/embeddable-uis/embedding-elements#configuring-jwks-for-your-environment)** (JWKS) —
+a critical component for ensuring the integrity of your JSON Web Tokens (JWTs). JWKS is essentially a collection of public keys
+that your application uses to validate incoming tokens, confirming they are legitimate and originate from a trusted source.
+
+By configuring JWKS in your app, you enable it to automatically fetch the public keys needed for secure token verification.
+This adds an **essential layer of security** to your authentication process, ensuring that only properly authenticated users can
+access your resources.
+
+<br />
+
+<Video src={"https://www.youtube.com/watch?v=dtJ_R2L8W5A"} controls />
+
+</TimelineStep>
+<TimelineStep>
+
+## Setting up Permit and Elements
+
+Now that you’re familiar with the basics, it’s time to dive into integrating Permit into your app. In this section, we’ll
+guide you through the essential steps, including installing dependencies, setting up the **[Policy Decision Point](/overview/glossary/#pdp)** (PDP), and
+configuring your app for a seamless integration. By the end, you’ll have a **fully operational access control system**, ready to
+manage permissions efficiently and securely.
+
+<br />
+
+<Video src={"https://www.youtube.com/watch?v=-seLiGBx7Ek"} controls />
+
+</TimelineStep>
+<TimelineStep>
+
+## Building the Authorization Policy
+
+This is where the real magic of **authorization** happens—deciding exactly what your users can do within your app. In this
+section, we’ll guide you through **creating resources, defining roles, and specifying actions** users can take on those resources.
+Once everything is set up, you’ll **assign these roles and permissions** to your users, ensuring everyone has the right level of
+access for their needs.
+
+<br />
+
+<Video src={"https://www.youtube.com/watch?v=Z49Rpj4ygzk"} controls />
+
+</TimelineStep>
+<TimelineStep>
+
+## Configuring Elements
+
+In this section, we’ll explore how to customize **[Permit Elements](/embeddable-uis/overview)** to fit
+perfectly within your app’s design and workflows. Permit Elements are built with flexibility in mind, allowing you to tweak
+both their behavior and appearance to match your app’s unique style.
+
+We’ll walk through the key customization options step by step—covering how to adjust workflows, modify visual elements, and
+ensure everything blends seamlessly with your app’s user interface. By the end, you’ll have a polished, secure, and fully
+integrated solution that enhances both functionality and design.
+
+<Video src={"https://www.youtube.com/watch?v=YROeDW0bBzo"} controls />
+
+</TimelineStep>
+<TimelineStep>
+
+## Embedding the Elements in our App
+
+In this section, we’re diving into the technical side by **embedding the Permit Elements** directly into your app. First, we’ll take
+the generated **[iframe](/embeddable-uis/element/access-request#creating-an-iframe)** snippet and
+seamlessly integrate it into your app’s codebase.
+
+Next, we’ll cover how to log users into the element, ensuring everything works together smoothly.
+
+<Video src={"https://www.youtube.com/watch?v=h1kB_8ZKSmE"} controls />
+
+</TimelineStep>
+</TimelineWrapper>
+
+With these steps completed, you’ve successfully **installed the dependencies**, set up the **Policy Decision Point** (PDP),
+and **configured [Permit](https://app.permit.io) for your app**.
+
+You’re now ready to embed Permit Elements, giving your users the ability to handle access
+requests and approvals seamlessly. With everything in place, your app is equipped for **secure, efficient access management**.
+
+## What did you learn?
+
+You should have learned how to:
+
+- Integrate **access requests and approvals** into your app with **Permit Elements**.
+- Configure key components like **JWKS** and the **Policy Decision Point** for secure workflows.
+- **Customize** and **embed Permit Elements** to match your app’s design and functionality.
+
+:::tip FUN FACT
+The concept of access requests and approvals dates back to ancient Egypt! In the time of the pharaohs, scribes used clay seals
+as "approvals" to access royal documents or treasure rooms. These seals acted as both a request and an authorization tool, much
+like modern-day digital workflows.
+:::

sidebars.js

@@ -92,6 +92,7 @@ const sidebars = {
             // "overview/setup-relationship-based-access-control",
             // "overview/sync-application-data-into-permit",
             // "overview/perform-a-local-policy-check",
+            "overview/access-requests-and-approvals",
             {
               type: "category",
               label: "Manage Your Account",
@@ -126,7 +127,12 @@ const sidebars = {
             type: "doc",
             id: "overview/best-practices",
           },
-          items: ["how-to/ownership", "overview/how-does-it-work", "concepts/multitenancy", "how-to/build-policies/abac/time-based-role"],
+          items: [
+            "how-to/ownership",
+            "overview/how-does-it-work",
+            "concepts/multitenancy",
+            "how-to/build-policies/abac/time-based-role",
+          ],
         },
       ],
     },
@@ -366,13 +372,10 @@ const sidebars = {
           ],
         },
         {
-            type: "category",
-            label: "Policy Guard",
-            items: [
-              "how-to/policy-guard/policy_guard",
-                "how-to/policy-guard/policy_guard_api",
-              ],
-        }
+          type: "category",
+          label: "Policy Guard",
+          items: ["how-to/policy-guard/policy_guard", "how-to/policy-guard/policy_guard_api"],
+        },
       ],
     },
     {

src/components/video/Video.js

@@ -5,9 +5,37 @@ const VideoPlayer = ({
   autoPlay = true,
   loop = true,
   controls = true,
-  className = "w-full h-auto block",
+  className = "w-full h-full block",
   ...props
 }) => {
+  const isYouTubeLink = (url) => {
+    try {
+      const parsedUrl = new URL(url);
+      return parsedUrl.hostname.includes("youtube.com") || parsedUrl.hostname.includes("youtu.be");
+    } catch (e) {
+      return false;
+    }
+  };
+
+  if (isYouTubeLink(src)) {
+    const embedUrl = src.includes("youtube.com")
+      ? src.replace("watch?v=", "embed/")
+      : src.replace("youtu.be/", "youtube.com/embed/");
+
+    return (
+      <div className={`relative ${className}`} style={{ paddingTop: "56.25%" }}>
+        <iframe
+          src={embedUrl}
+          title="YouTube video"
+          className="absolute top-0 left-0 w-full h-full"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          {...props}
+        ></iframe>
+      </div>
+    );
+  }
+
   return (
     <video controls={controls} autoPlay={autoPlay} loop={loop} className={className} {...props}>
       <source src={src} type="video/mp4" />