Client:OAuth2: add allow pkce option

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BasicBlock.tsx

@@ -9,6 +9,7 @@ import BlockHeader from "./BlockHeader";
 import InputGroup from "./InputGroup";
 import TextAreaGroup from "./TextAreaGroup";
 import SelectGroup from "./SelectGroup";
+import Checkbox from "@docspace/components/checkbox";
 
 interface BasicBlockProps {
   t: any;
@@ -17,9 +18,9 @@ interface BasicBlockProps {
   websiteUrlValue: string;
   logoValue: string;
   descriptionValue: string;
-  authMethodValue: AuthenticationMethod;
+  allowPkce: boolean;
 
-  changeValue: (name: string, value: string) => void;
+  changeValue: (name: string, value: string | boolean) => void;
 
   isEdit: boolean;
   errorFields: string[];
@@ -66,7 +67,7 @@ const BasicBlock = ({
   websiteUrlValue,
   logoValue,
   descriptionValue,
-  authMethodValue,
+  allowPkce,
   changeValue,
 
   isEdit,
@@ -124,21 +125,6 @@ const BasicBlock = ({
     }
   };
 
-  const getAuthMethodOptions = () => {
-    const noneOption = {
-      key: AuthenticationMethod.none,
-      label: "none",
-    };
-
-    const clientSecretPostOption = {
-      key: AuthenticationMethod.client_secret_post,
-      label: "client_secret_post",
-    };
-    return [noneOption, clientSecretPostOption];
-  };
-
-  const options = getAuthMethodOptions();
-
   return (
     <StyledBlock>
       <BlockHeader header={"Basic info"} />
@@ -178,24 +164,13 @@ const BasicBlock = ({
           value={descriptionValue}
           onChange={onChange}
         />
-        <InputGroup
-          label={"Authentication method"}
-          name={"authentication_method"}
-          value=""
-          placeholder=""
-          error=""
-          onChange={() => {}}
-        >
-          <ComboBox
-            options={options}
-            selectedOption={options.find((o) => o.key === authMethodValue)}
-            displaySelectedOption
-            scaledOptions
-            onSelect={({ key }: { key: string }) => {
-              changeValue("authentication_method", key);
-            }}
-          />
-        </InputGroup>
+        <Checkbox
+          label={"Allow pkce"}
+          isChecked={allowPkce}
+          onChange={() => {
+            changeValue("allow_pkce", !allowPkce);
+          }}
+        />
       </StyledInputBlock>
     </StyledBlock>
   );

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx

@@ -69,7 +69,7 @@ const ClientForm = ({
     terms_url: "",
     policy_url: "",
 
-    authentication_method: AuthenticationMethod.client_secret_post,
+    allow_pkce: false,
 
     scopes: [],
   });
@@ -115,12 +115,14 @@ const ClientForm = ({
     setClientSecret(newSecret);
   }, [clientId, regenerateSecret]);
 
-  const onChangeForm = (name: string, value: string) => {
+  const onChangeForm = (name: string, value: string | boolean) => {
     setForm((val) => {
       const newVal = { ...val };
 
       if (newVal[name as keyof IClientReqDTO] instanceof Array) {
+        //@ts-ignore
         if (newVal[name as keyof IClientReqDTO].includes(value)) {
+          //@ts-ignore
           newVal[name as keyof IClientReqDTO] = newVal[
             name as keyof IClientReqDTO
             //@ts-ignore
@@ -169,10 +171,12 @@ const ClientForm = ({
           terms_url: fetchedClient?.termsUrl || client?.termsUrl || "",
           policy_url: fetchedClient?.policyUrl || client?.policyUrl || "",
 
-          authentication_method:
-            fetchedClient?.authenticationMethod ||
-            client?.authenticationMethod ||
-            AuthenticationMethod.client_secret_post,
+          allow_pkce:
+            fetchedClient?.authenticationMethods.includes(
+              AuthenticationMethod.none
+            ) ||
+            client?.authenticationMethods.includes(AuthenticationMethod.none) ||
+            false,
 
           scopes: fetchedClient?.scopes || client?.scopes || [],
         });
@@ -249,7 +253,10 @@ const ClientForm = ({
         (form.name !== initialClient.name ||
           form.logo !== initialClient.logo ||
           form.description !== initialClient.description ||
-          form.authentication_method !== initialClient.authenticationMethod)
+          form.allow_pkce !==
+            initialClient.authenticationMethods.includes(
+              AuthenticationMethod.none
+            ))
       );
     }
 
@@ -428,7 +435,7 @@ const ClientForm = ({
             websiteUrlValue={form.website_url}
             descriptionValue={form.description}
             logoValue={form.logo}
-            authMethodValue={form.authentication_method}
+            allowPkce={form.allow_pkce}
             changeValue={onChangeForm}
             isEdit={isEdit}
             errorFields={errorFields}

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx

@@ -175,8 +175,9 @@ const PreviewDialog = ({
 
   const scopesString = client?.scopes.join(" ");
 
-  const isClientSecretPost =
-    client?.authenticationMethod === AuthenticationMethod.client_secret_post;
+  const isClientSecretPost = !client?.authenticationMethods.includes(
+    AuthenticationMethod.none
+  );
 
   const encodingScopes = encodeURI(scopesString || "");
 

packages/common/utils/oauth/index.ts

@@ -1,7 +1,7 @@
 import crypto from "crypto-js";
 import sha256 from "crypto-js/sha256";
 
-import { ScopeGroup, ScopeType } from "./enums";
+import { AuthenticationMethod, ScopeGroup, ScopeType } from "./enums";
 import {
   IClientResDTO,
   IClientReqDTO,
@@ -20,7 +20,7 @@ export const transformToClientProps = (
     terms_url,
     policy_url,
     logo,
-    authentication_method,
+    authentication_methods,
     redirect_uris,
     logout_redirect_uri,
     scopes,
@@ -45,7 +45,7 @@ export const transformToClientProps = (
     termsUrl: terms_url,
     policyUrl: policy_url,
     logo,
-    authenticationMethod: authentication_method,
+    authenticationMethods: authentication_methods,
     redirectUris: redirect_uris,
     logoutRedirectUri: logout_redirect_uri,
     scopes,
@@ -75,7 +75,7 @@ export const transformToClientReqDTO = (
     termsUrl: terms_url,
     policyUrl: policy_url,
     logo,
-    authenticationMethod,
+    authenticationMethods,
     redirectUris: redirect_uris,
     logoutRedirectUri: logout_redirect_uri,
     scopes,
@@ -93,7 +93,7 @@ export const transformToClientReqDTO = (
     policy_url,
 
     scopes,
-    authentication_method: authenticationMethod,
+    allow_pkce: authenticationMethods.includes(AuthenticationMethod.none),
     website_url: websiteUrl,
     allowed_origins: allowedOrigins,
   };

packages/common/utils/oauth/interfaces.ts

@@ -33,7 +33,7 @@ export interface IClientProps {
   policyUrl: string;
   termsUrl: string;
   logo: string;
-  authenticationMethod: AuthenticationMethod;
+  authenticationMethods: AuthenticationMethod[];
   tenant: number;
   redirectUris: string[];
   logoutRedirectUri: string;
@@ -55,7 +55,7 @@ export interface IClientReqDTO {
   name: string;
   description: string;
   logo: string;
-  authentication_method: AuthenticationMethod;
+  allow_pkce: boolean;
   terms_url: string;
   policy_url: string;
   redirect_uris: string[];
@@ -79,7 +79,7 @@ export interface IClientResDTO {
   policy_url: string;
   logout_redirect_uri: string;
 
-  authentication_method: AuthenticationMethod;
+  authentication_methods: AuthenticationMethod[];
 
   scopes: string[];