Add legacy application token section

.changeset/ninety-feet-flow.md

@@ -0,0 +1,6 @@
+---
+"@wso2is/admin.applications.v1": patch
+"@wso2is/i18n": patch
+---
+
+Introduce UI for legacy app token section.

features/admin.applications.v1/components/forms/inbound-oidc-form.tsx

@@ -16,6 +16,8 @@
  * under the License.
  */
 
+import Alert from "@oxygen-ui/react/Alert";
+import AlertTitle from "@oxygen-ui/react/AlertTitle";
 import Box from "@oxygen-ui/react/Box";
 import Chip from "@oxygen-ui/react/Chip";
 import { AppState, ConfigReducerStateInterface } from "@wso2is/admin.core.v1";
@@ -215,6 +217,9 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
  const { isOrganizationManagementEnabled } = useGlobalVariables();
  const [ isEncryptionEnabled, setEncryptionEnable ] = useState(false);
  const [ isPublicClient, setPublicClient ] = useState<boolean>(false);
+ const useClientIdAsSubClaimForAppTokens: boolean = initialValues.useClientIdAsSubClaimForAppTokens;
+ const omitUsernameInIntrospectionRespForAppTokens: boolean
+ = initialValues.omitUsernameInIntrospectionRespForAppTokens;
  const [ callBackUrls, setCallBackUrls ] = useState("");
  const [ audienceUrls, setAudienceUrls ] = useState("");
  const [ showURLError, setShowURLError ] = useState(false);
@@ -290,6 +295,8 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
  const requestObjectEncryptionMethod: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
  const subjectToken: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
  const applicationSubjectTokenExpiryInSeconds: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
+ const useClientIdAsSubClaimForAppTokensElement: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
+ const omitUsernameInIntrospectionRespForAppTokensElement: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
 
  const [ isSPAApplication, setSPAApplication ] = useState<boolean>(false);
  const [ isOIDCWebApplication, setOIDCWebApplication ] = useState<boolean>(false);
@@ -1353,6 +1360,8 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
  }
  inboundConfigFormValues = {
  ...inboundConfigFormValues,
+ omitUsernameInIntrospectionRespForAppTokens:
+ values.get("omitUsernameInIntrospectionRespForAppTokens")?.length > 0,
  pushAuthorizationRequest: {
  requirePushAuthorizationRequest: values.get("requirePushAuthorizationRequest")?.length > 0
  },
@@ -1366,7 +1375,8 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
  subject: {
  sectorIdentifierUri: initialValues?.subject?.sectorIdentifierUri,
  subjectType: initialValues?.subject?.subjectType
- }
+ },
+ useClientIdAsSubClaimForAppTokens: values.get("useClientIdAsSubClaimForAppTokens")?.length > 0
  };
 
  // If the app is not a newly created, add `clientId` & `clientSecret`.
@@ -2566,6 +2576,130 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
  </>
  ) }
 
+ { /* Legacy Application Tokens */ }
+ {
+ (!omitUsernameInIntrospectionRespForAppTokens
+ || !useClientIdAsSubClaimForAppTokens)
+ && (
+ <Grid.Row columns={ 2 }>
+ <Grid.Column mobile={ 16 } tablet={ 16 } computer={ 16 }>
+ <Divider />
+ <Divider hidden />
+ </Grid.Column>
+ <Grid.Column mobile={ 16 } tablet={ 16 } computer={ 16 }>
+ <Heading as="h4">
+ { t("applications:forms.inboundOIDC.sections" +
+ ".legacyApplicationTokens.heading") }
+ </Heading>
+ <Divider hidden />
+ {
+ (
+ <Alert severity="warning">
+ <AlertTitle
+ className="alert-title">
+ <Trans components={ { strong: <strong/> } } >Note:</Trans>
+ </AlertTitle>
+ <Trans
+ i18nKey={ t("actions:fields.authentication.info.message") }
+ >
+ You are currently using an outdated behavior for application tokens.
+ Please follow the below guideline before migrating to the new behavior.
+ <ol>
+ <li>
+ <strong>Client Application Changes:</strong>
+ <p>Update your client application to no longer use the&nbsp;
+ <code>sub</code> attribute to refer to the application
+ owner&apos;s user ID in the application token.</p>
+ </li>
+ <li>
+ <strong>Introspection Response Updates:</strong>
+ <p>Modify your application to stop relying on the&nbsp;
+ <code>username</code> field in the introspection endpoint
+ response for application tokens, as this claim will no
+ longer be included.</p>
+ </li>
+ </ol>
+ </Trans>
+ </Alert>
+ )
+ }
+ {
+ !useClientIdAsSubClaimForAppTokens && (
+ <>
+ <Field
+ ref={ useClientIdAsSubClaimForAppTokensElement }
+ name="useClientIdAsSubClaimForAppTokens"
+ required={ false }
+ type="checkbox"
+ disabled={ false }
+ value={
+ initialValues?.useClientIdAsSubClaimForAppTokens ?
+ [ "useClientIdAsSubClaimForAppTokens" ]
+ : [] }
+ readOnly={ readOnly }
+ data-componentId={
+ `${ componentId }-use-client-id-as-sub-claim-for-app-tokens` }
+ children={ [
+ {
+ label: t("applications:forms.inboundOIDC.sections."
+ + "legacyApplicationTokens.fields"
+ + ".useClientIdAsSubClaimForAppTokens.label"),
+ value: "useClientIdAsSubClaimForAppTokens"
+ }
+ ] }
+ />
+ <Hint>
+ { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
+ + "fields.useClientIdAsSubClaimForAppTokens.hint") }
+ </Hint>
+ </>
+ )
+ }
+ {
+ (!omitUsernameInIntrospectionRespForAppTokens
+ && !useClientIdAsSubClaimForAppTokens) &&
+ (
+ <Divider hidden />
+ )
+ }
+ {
+ (!omitUsernameInIntrospectionRespForAppTokens) &&
+ (
+ <>
+ <Field
+ ref={ omitUsernameInIntrospectionRespForAppTokensElement }
+ name="omitUsernameInIntrospectionRespForAppTokens"
+ required={ false }
+ type="checkbox"
+ disabled={ false }
+ value={
+ initialValues?.omitUsernameInIntrospectionRespForAppTokens ?
+ [ "omitUsernameInIntrospectionRespForAppTokens" ]
+ : [] }
+ readOnly={ readOnly }
+ data-componentId={
+ `${ componentId }-omit-username-in-introspection-resp-for-app-tokens` }
+ children={ [
+ {
+ label: t("applications:forms.inboundOIDC.sections"
+ + ".legacyApplicationTokens.fields."
+ + "omitUsernameInIntrospectionRespForAppTokens.label"),
+ value: "omitUsernameInIntrospectionRespForAppTokens"
+ }
+ ] }
+ />
+ <Hint>
+ { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
+ + "fields.omitUsernameInIntrospectionRespForAppTokens.hint") }
+ </Hint>
+ </>
+ )
+ }
+ </Grid.Column>
+ </Grid.Row>
+ )
+ }
+
  { /* Access Token */ }
  {
  !isSystemApplication
@@ -4377,6 +4511,7 @@ InboundOIDCForm.defaultProps = {
  },
  idToken: undefined,
  logout: undefined,
+ omitUsernameInIntrospectionRespForAppTokens: undefined,
  pkce: {
  mandatory: false,
  supportPlainTransformAlgorithm: false
@@ -4386,6 +4521,7 @@ InboundOIDCForm.defaultProps = {
  scopeValidators: [],
  state: undefined,
  subjectToken: undefined,
+ useClientIdAsSubClaimForAppTokens: undefined,
  validateRequestObjectSignature: undefined
  }
 };

features/admin.applications.v1/components/settings/attribute-management/advance-attribute-settings.test.tsx

@@ -127,6 +127,7 @@ describe("Advance attribute settings in the attributes tab of Application Edit v
  },
  isFAPIApplication: false,
  logout: {},
+ omitUsernameInIntrospectionRespForAppTokens: false,
  pkce: { mandatory: true, supportPlainTransformAlgorithm: false },
  publicClient: true,
  pushAuthorizationRequest: { requirePushAuthorizationRequest: false },
@@ -139,6 +140,7 @@ describe("Advance attribute settings in the attributes tab of Application Edit v
  applicationSubjectTokenExpiryInSeconds: 180,
  enable: false
  },
+ useClientIdAsSubClaimForAppTokens: false,
  validateRequestObjectSignature: false
  } }
  data-testid={ "advanced-attribute-settings-form" }

features/admin.applications.v1/models/application-inbound.ts

@@ -193,6 +193,8 @@ export interface OIDCDataInterface {
  subject?: SubjectConfigInterface;
  isFAPIApplication?: boolean;
  hybridFlow?: HybridFlowConfigurationInterface;
+ useClientIdAsSubClaimForAppTokens?: boolean;
+ omitUsernameInIntrospectionRespForAppTokens?: boolean;
 }
 
 /**

features/admin.applications.v1/pages/application-edit.scss

@@ -19,3 +19,19 @@
 .application-branding-link {
  cursor: pointer;
 }
+
+.ignore-once-button {
+ color: #788997;
+}
+
+.banner-detail-card {
+ border: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ background: #fff;
+}
+
+.application-outdated-alert-expanded-view {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}