feat: frontend for pkce (#11005)

frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx

@@ -36,6 +36,7 @@ const initialState = {
     secret: '',
     acrValues: '',
     idTokenSigningAlgorithm: 'RS256',
+    enablePkce: false,
 };
 
 type State = typeof initialState & {
@@ -47,6 +48,7 @@ export const OidcAuth = () => {
     const { setToastData, setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
     const { oidcConfiguredThroughEnv } = uiConfig;
+    const oidcPkceSupport = Boolean(uiConfig.flags?.oidcPkceSupport);
     const [data, setData] = useState<State>(initialState);
     const { config } = useAuthSettings('oidc');
     const { updateSettings, errors, loading } = useAuthSettingsApi('oidc');
@@ -253,6 +255,44 @@ export const OidcAuth = () => {
                         />
                     </Grid>
                 </Grid>
+                <ConditionallyRender
+                    condition={oidcPkceSupport}
+                    show={
+                        <Grid container spacing={3} mb={2}>
+                            <Grid item md={5}>
+                                <strong>Enable PKCE</strong>
+                                <p>
+                                    Require Proof Key for Code Exchange (PKCE)
+                                    to add an extra layer of security for the
+                                    authorization code flow.
+                                </p>
+                            </Grid>
+                            <Grid item md={6} style={{ padding: '20px' }}>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            onChange={(event) =>
+                                                setValue(
+                                                    'enablePkce',
+                                                    event.target.checked,
+                                                )
+                                            }
+                                            name='enablePkce'
+                                            checked={Boolean(data.enablePkce)}
+                                            disabled={
+                                                !data.enabled ||
+                                                oidcConfiguredThroughEnv
+                                            }
+                                        />
+                                    }
+                                    label={
+                                        data.enablePkce ? 'Enabled' : 'Disabled'
+                                    }
+                                />
+                            </Grid>
+                        </Grid>
+                    }
+                />
                 <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>ACR Values</strong>

frontend/src/interfaces/uiConfig.ts

@@ -90,6 +90,7 @@ export type UiFlags = {
     milestoneProgression?: boolean;
     featureReleasePlans?: boolean;
     safeguards?: boolean;
+    oidcPkceSupport?: boolean;
     extendedUsageMetrics?: boolean;
 };
 

frontend/src/openapi/models/oidcSettingsResponseSchema.ts

@@ -34,6 +34,8 @@ export interface OidcSettingsResponseSchema {
     enableGroupSyncing?: boolean;
     /** Support Single sign out when user clicks logout in Unleash. If `true` user is signed out of all OpenID Connect sessions against the clientId they may have active */
     enableSingleSignOut?: boolean;
+    /** Enable Proof Key for Code Exchange (PKCE) when performing the OIDC authorization code flow. */
+    enablePkce?: boolean;
     /** Specifies the path in the OIDC token response to read which groups the user belongs to from. */
     groupJsonPath?: string;
     /** The signing algorithm used to sign our token. Refer to the [JWT signatures](https://jwt.io/introduction) documentation for more information. */

frontend/src/openapi/models/oidcSettingsSchemaOneOf.ts

@@ -31,6 +31,8 @@ export type OidcSettingsSchemaOneOf = {
     enableGroupSyncing?: boolean;
     /** Support Single sign out when user clicks logout in Unleash. If `true` user is signed out of all OpenID Connect sessions against the clientId they may have active */
     enableSingleSignOut?: boolean;
+    /** Enable Proof Key for Code Exchange (PKCE) when performing the OIDC authorization code flow. */
+    enablePkce?: boolean;
     /** Specifies the path in the OIDC token response to read which groups the user belongs to from. */
     groupJsonPath?: string;
     /** The signing algorithm used to sign our token. Refer to the [JWT signatures](https://jwt.io/introduction) documentation for more information. */

frontend/src/openapi/models/oidcSettingsSchemaOneOfFour.ts

@@ -31,6 +31,8 @@ export type OidcSettingsSchemaOneOfFour = {
     enableGroupSyncing?: boolean;
     /** Support Single sign out when user clicks logout in Unleash. If `true` user is signed out of all OpenID Connect sessions against the clientId they may have active */
     enableSingleSignOut?: boolean;
+    /** Enable Proof Key for Code Exchange (PKCE) when performing the OIDC authorization code flow. */
+    enablePkce?: boolean;
     /** Specifies the path in the OIDC token response to read which groups the user belongs to from. */
     groupJsonPath?: string;
     /** The signing algorithm used to sign our token. Refer to the [JWT signatures](https://jwt.io/introduction) documentation for more information. */

src/lib/types/experimental.ts

@@ -64,7 +64,8 @@ export type IFlagKey =
     | 'milestoneProgression'
     | 'featureReleasePlans'
     | 'plausibleMetrics'
-    | 'safeguards';
+    | 'safeguards'
+    | 'oidcPkceSupport';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -285,6 +286,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_SAFEGUARDS,
         false,
     ),
+    oidcPkceSupport: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_OIDC_PKCE_SUPPORT,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {