update main

docs/src/components/authrequest.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useContext, useEffect, useState } from "react";
+import { Fragment, useContext, useEffect, useState } from "react";
 import { AuthRequestContext } from "../utils/authrequest";
 import { Listbox } from "@headlessui/react";
 import { Transition } from "@headlessui/react";
@@ -115,6 +115,14 @@ export function SetAuthRequest() {
     }`,
   ];
 
+  const scopeExplanations = new Map([
+    ['urn:zitadel:iam:org:project:id:zitadel:aud', 'Requested projectid will be added to the audience of the access token.'],
+    ['urn:zitadel:iam:user:metadata', 'Metadata of the user will be included in the token. The values are base64 encoded.'],
+    [`urn:zitadel:iam:org:id:${
+      organizationId ? organizationId : "[organizationId]"
+    }`, 'Enforce that the user is a member of the selected organization.']
+  ]);
+
   const [scopeState, setScopeState] = useState(
     [true, true, true, false, false, false, false, false]
     // new Array(allScopes.length).fill(false)
@@ -161,8 +169,13 @@ export function SetAuthRequest() {
     return input;
   };
 
-  useEffect(async () => {
-    setCodeChallenge(await encodeCodeChallenge(codeVerifier));
+  useEffect(() => {
+    const updateCodeChallange = async () => {
+      const newCodeChallange = await encodeCodeChallenge(codeVerifier)
+      setCodeChallenge(newCodeChallange);
+    }
+
+    updateCodeChallange();
   }, [codeVerifier]);
 
   useEffect(() => {
@@ -559,6 +572,7 @@ export function SetAuthRequest() {
                 name="scopes"
                 value={`${scope}`}
                 checked={scopeState[scopeIndex]}
+                disabled={scope === 'openid'}
                 onChange={() => {
                   toggleScope(scopeIndex);
                 }}
@@ -571,6 +585,11 @@ export function SetAuthRequest() {
                   </strong>
                 ) : null}
               </label>
+              {scopeExplanations.has(scope) && (
+                <span className={clsx(hintClasses, 'ml-1')}>
+                  {scopeExplanations.get(scope)}
+                </span>
+              )}
             </div>
           );
         })}

docs/src/pages/index.js

@@ -4,7 +4,6 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import ThemedImage from "@theme/ThemedImage";
 import clsx from "clsx";
-import React from "react";
 
 import Column from "../components/column";
 import {

docs/src/utils/authrequest.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 export const AuthRequestContext = React.createContext(null);
 
@@ -34,7 +34,7 @@ export default ({ children }) => {
     const id_token_hint = params.get("id_token_hint");
     const organization_id = params.get("organization_id");
 
-    setInstance(instance_param ?? "https://mydomain-xyza.zitadel.cloud/");
+    setInstance(instance_param ?? "http://localhost:8080/");
     setClientId(client_id ?? "170086824411201793@yourapp");
     setRedirectUri(
       redirect_uri ?? "http://localhost:8080/api/auth/callback/zitadel"