docs: add tailwindcss for styles, oidc authorize endpoint playground (#4707)

* variable parser

* rm plugin

* set fcn

* env

* EnvCode component

* cleanup env demo

* env

* rm remark plugin

* auth request context

* auth req component

* authorize endpoint construction

* rev react page

* fix endpoint

* styling

* query params with anchor

* desc

* tailwind coexistence

* fix styles

* add login_hint, organizationId scope

* auth request without prompt

* show login_hint

* sync displayed url with actual href

* fix fcn

* coloring

* Update docs/src/components/authrequest.jsx

Co-authored-by: mffap <mpa@zitadel.com>

* Update docs/src/components/authrequest.jsx

Co-authored-by: mffap <mpa@zitadel.com>

* Update docs/src/components/authrequest.jsx

Co-authored-by: mffap <mpa@zitadel.com>

* Update docs/src/components/authrequest.jsx

Co-authored-by: mffap <mpa@zitadel.com>

* Update docs/src/components/authrequest.jsx

Co-authored-by: mffap <mpa@zitadel.com>

* Update docs/src/components/authrequest.jsx

Co-authored-by: mffap <mpa@zitadel.com>

* add plausible, header

* add pkce

* move

* adds pkce code challenge

* replace cboa

* reaname and move to required

* fall back to cboa due to webpack error

* trailing slash

* reorder org_id

* remove resourceowner

* texts

* update references

* buffer, fix some react dom components

* Apply suggestions from code review

Co-authored-by: Florian Forster <florian@zitadel.com>

* standard scopes

Co-authored-by: mffap <mpa@zitadel.com>
Co-authored-by: Florian Forster <florian@zitadel.com>

docs/src/utils/authrequest.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from "react";
+
+export const AuthRequestContext = React.createContext(null);
+
+export default ({ children }) => {
+  const [instance, setInstance] = useState("your-instance");
+  const [clientId, setClientId] = useState("your-client-id");
+  const [redirectUri, setRedirectUri] = useState("your-redirect-uri");
+  const [responseType, setResponseType] = useState("your-response-type");
+  const [scope, setScope] = useState("your-scope");
+
+  const [prompt, setPrompt] = useState("your-prompt");
+  const [authMethod, setAuthMethod] = useState("your-auth-method");
+  const [codeChallenge, setCodeChallenge] = useState("your-code-challenge");
+  const [codeVerifier, setCodeVerifier] = useState("your-code-verifier");
+  const [loginHint, setLoginHint] = useState("your-login-hint");
+  const [idTokenHint, setIdTokenHint] = useState("your-id-token-hint");
+  const [organizationId, setOrganizationId] = useState("your-organization-id");
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+
+    const instance_param = params.get("instance");
+    const client_id = params.get("client_id");
+    const redirect_uri = params.get("redirect_uri");
+    const response_type = params.get("response_type");
+    const scope_param = params.get("scope");
+
+    // optional parameters
+    const prompt_param = params.get("prompt");
+    const auth_method_param = params.get("auth_method");
+    const code_verifier_param = params.get("code_verifier");
+    const login_hint = params.get("login_hint");
+    const id_token_hint = params.get("id_token_hint");
+    const organization_id = params.get("organization_id");
+
+    setInstance(instance_param ?? "https://mydomain-xyza.zitadel.cloud/");
+    setClientId(client_id ?? "170086824411201793@yourapp");
+    setRedirectUri(
+      redirect_uri ?? "http://localhost:8080/api/auth/callback/zitadel"
+    );
+    setResponseType(response_type ?? "code");
+    setScope(scope_param ?? "openid email profile");
+    setPrompt(prompt_param ?? "");
+    setAuthMethod(auth_method_param ?? "(none) PKCE");
+    setCodeVerifier(code_verifier_param ?? "random-string");
+    // optional parameters
+    setLoginHint(login_hint ?? "johndoe@example.zitadel.cloud");
+    setIdTokenHint(id_token_hint ?? "[your-id-token]");
+    setOrganizationId(organization_id ?? "168811945419506433");
+
+    if (
+      instance_param ||
+      client_id ||
+      redirect_uri ||
+      response_type ||
+      scope_param ||
+      prompt_param ||
+      organization_id ||
+      login_hint ||
+      id_token_hint
+    ) {
+      const example = document.getElementById("example");
+      if (example) {
+        example.scrollIntoView();
+      }
+    }
+  }, []);
+
+  const authRequest = {
+    instance: [instance, setInstance],
+    clientId: [clientId, setClientId],
+    redirectUri: [redirectUri, setRedirectUri],
+    responseType: [responseType, setResponseType],
+    scope: [scope, setScope],
+    prompt: [prompt, setPrompt],
+    authMethod: [authMethod, setAuthMethod],
+    codeChallenge: [codeChallenge, setCodeChallenge],
+    codeVerifier: [codeVerifier, setCodeVerifier],
+    loginHint: [loginHint, setLoginHint],
+    idTokenHint: [idTokenHint, setIdTokenHint],
+    organizationId: [organizationId, setOrganizationId],
+  };
+
+  return (
+    <AuthRequestContext.Provider value={authRequest}>
+      {children}
+    </AuthRequestContext.Provider>
+  );
+};

docs/src/utils/environment.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from "react";
+
+export const EnvironmentContext = React.createContext(null);
+
+export default ({ children }) => {
+  const [instance, setInstance] = useState("your-instance");
+  const [clientId, setClientId] = useState("your-client-id");
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search); // id=123
+    const clientId = params.get("clientId");
+    const instance = params.get("instance");
+
+    const localClientId = localStorage.getItem("clientId");
+    const localInstance = localStorage.getItem("instance");
+
+    setClientId(clientId ?? localClientId ?? "");
+    setInstance(instance ?? localInstance ?? "");
+  }, []);
+
+  const environment = {
+    instance: [instance, setInstance],
+    clientId: [clientId, setClientId],
+  };
+
+  return (
+    <EnvironmentContext.Provider value={environment}>
+      {children}
+    </EnvironmentContext.Provider>
+  );
+};