docs(oidc-playground): update scopes and default instance domain (#9995)

# Which Problems Are Solved

This PR resolves #4845 by enhancing the OIDC Playground:
* set default instance domain to `http://localhost:8080`
* openid checkbox is now disabled
* add explanation texts for custom zitadel scopes

# How the Problems Are Solved

* The checkbox for the `openid` scope is set to `disabled`
* The default value for the instance domain is update by using
`setInstance`
* A new map with explanation texts for the custom scopes is introduced.
During the rendering process of the scope checkboxes the value from this
map is displayed, if the scope exists as key.

# Additional Changes

During the local setup of the documentation webapp I got some react
errors on the authrequest page. This issue has ben solved by refactoring
the usage of an `useEffect` block.

# Additional Context

- Closes #4845

PS. 
I did not found any scripts for linting/formatting (e.g. eslint,
prettier) for the docs project. This is a bit annoying because when I
use my local configurations of eslint/prettier the whole file get's
refactored with unnecessary changes (change of import order, indention
etc.). It would be great to add some custom configurations to to make
the development process easier and enforce a consistent coding style :)

Co-authored-by: Markus Heinemann <markus@trustify.ch>
Co-authored-by: Tim Möhlmann <tim+github@zitadel.com>

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 () => {
+  useEffect(() => {
-    setCodeChallenge(await encodeCodeChallenge(codeVerifier));
+    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"