feat: make frontend aware that OIDC can be configured through env (#7597

) Co-authored-by: Nuno Góis <[email protected]>
Unleash · Jul 16, 2024 · 7ed1d77 · 7ed1d77
1 parent e43109a
commit 7ed1d77
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 12 deletions.
diff --git a/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx b/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx
@@ -23,12 +23,14 @@ interface IAutoCreateFormProps {
         value: string | boolean | number | undefined,
     ) => void;
     onUpdateRole: (role: IRole | null) => void;
+    disabled?: boolean;
 }
 
 export const AutoCreateForm = ({
     data = { enabled: false, autoCreate: false },
     setValue,
     onUpdateRole,
+    disabled = false,
 }: IAutoCreateFormProps) => {
     const { roles } = useRoles();
 
@@ -69,7 +71,7 @@ export const AutoCreateForm = ({
                                 onChange={updateAutoCreate}
                                 name='enabled'
                                 checked={data.autoCreate}
-                                disabled={!data.enabled}
+                                disabled={!data.enabled || disabled}
                             />
                         }
                         label='Auto-create users'
@@ -90,7 +92,9 @@ export const AutoCreateForm = ({
                             roles={roles}
                             value={resolveRole(data)}
                             setValue={onUpdateRole}
-                            disabled={!data.autoCreate || !data.enabled}
+                            disabled={
+                                !data.autoCreate || !data.enabled || disabled
+                            }
                             required
                             hideDescription
                         />
@@ -110,7 +114,7 @@ export const AutoCreateForm = ({
                         onChange={updateField}
                         label='Email domains'
                         name='emailDomains'
-                        disabled={!data.autoCreate || !data.enabled}
+                        disabled={!data.autoCreate || !data.enabled || disabled}
                         required={Boolean(data.autoCreate)}
                         value={data.emailDomains || ''}
                         placeholder='@company.com, @anotherCompany.com'

diff --git a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
@@ -21,6 +21,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
 import { SsoGroupSettings } from '../SsoGroupSettings';
 import type { IRole } from 'interfaces/role';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const initialState = {
     enabled: false,
@@ -45,6 +46,7 @@ type State = typeof initialState & {
 export const OidcAuth = () => {
     const { setToastData, setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
+    const { oidcConfiguredThroughEnv } = uiConfig;
     const [data, setData] = useState<State>(initialState);
     const { config } = useAuthSettings('oidc');
     const { updateSettings, errors, loading } = useAuthSettingsApi('oidc');
@@ -107,6 +109,24 @@ export const OidcAuth = () => {
         <>
             <Grid container sx={{ mb: 3 }}>
                 <Grid item md={12}>
+                    <ConditionallyRender
+                        condition={Boolean(oidcConfiguredThroughEnv)}
+                        show={
+                            <Alert sx={{ mb: 2 }} severity='warning'>
+                                OIDC setup is currently controlled via
+                                environment variables. Please see the{' '}
+                                <a
+                                    href='https://www.unleash-hosted.com/docs/enterprise-authentication'
+                                    target='_blank'
+                                    rel='noreferrer'
+                                >
+                                    documentation
+                                </a>{' '}
+                                to learn how to set the correct environment
+                                variables
+                            </Alert>
+                        }
+                    />
                     <Alert severity='info'>
                         Please read the{' '}
                         <a
@@ -140,6 +160,7 @@ export const OidcAuth = () => {
                                 />
                             }
                             label={data.enabled ? 'Enabled' : 'Disabled'}
+                            disabled={oidcConfiguredThroughEnv}
                         />
                     </Grid>
                 </Grid>
@@ -154,7 +175,7 @@ export const OidcAuth = () => {
                             label='Discover URL'
                             name='discoverUrl'
                             value={data.discoverUrl}
-                            disabled={!data.enabled}
+                            disabled={!data.enabled || oidcConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
                             size='small'
@@ -172,7 +193,7 @@ export const OidcAuth = () => {
                             label='Client ID'
                             name='clientId'
                             value={data.clientId}
-                            disabled={!data.enabled}
+                            disabled={!data.enabled || oidcConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
                             size='small'
@@ -193,7 +214,7 @@ export const OidcAuth = () => {
                             label='Client Secret'
                             name='secret'
                             value={data.secret}
-                            disabled={!data.enabled}
+                            disabled={!data.enabled || oidcConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
                             size='small'
@@ -216,7 +237,10 @@ export const OidcAuth = () => {
                                 <Switch
                                     onChange={updateSingleSignOut}
                                     value={data.enableSingleSignOut}
-                                    disabled={!data.enabled}
+                                    disabled={
+                                        !data.enabled ||
+                                        oidcConfiguredThroughEnv
+                                    }
                                     name='enableSingleSignOut'
                                     checked={data.enableSingleSignOut}
                                 />
@@ -247,7 +271,7 @@ export const OidcAuth = () => {
                             label='ACR Values'
                             name='acrValues'
                             value={data.acrValues}
-                            disabled={!data.enabled}
+                            disabled={!data.enabled || oidcConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
                             size='small'
@@ -258,12 +282,14 @@ export const OidcAuth = () => {
                     ssoType='OIDC'
                     data={data}
                     setValue={setValue}
+                    disabled={oidcConfiguredThroughEnv}
                 />
 
                 <AutoCreateForm
                     data={data}
                     setValue={setValue}
                     onUpdateRole={onUpdateRole}
+                    disabled={oidcConfiguredThroughEnv}
                 />
                 <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
@@ -292,6 +318,7 @@ export const OidcAuth = () => {
                                         e.target.value,
                                     )
                                 }
+                                disabled={oidcConfiguredThroughEnv}
                             >
                                 {/*consider these from API or constants. */}
                                 <MenuItem value='RS256'>RS256</MenuItem>
@@ -308,7 +335,7 @@ export const OidcAuth = () => {
                             variant='contained'
                             color='primary'
                             type='submit'
-                            disabled={loading}
+                            disabled={loading || oidcConfiguredThroughEnv}
                         >
                             Save
                         </Button>{' '}

diff --git a/frontend/src/component/admin/auth/SsoGroupSettings.tsx b/frontend/src/component/admin/auth/SsoGroupSettings.tsx
@@ -11,6 +11,7 @@ interface SsoGroupSettingsProps {
         addGroupsScope: boolean;
     };
     setValue: (name: string, value: string | boolean) => void;
+    disabled?: boolean;
 }
 
 export const SsoGroupSettings = ({
@@ -22,6 +23,7 @@ export const SsoGroupSettings = ({
         addGroupsScope: false,
     },
     setValue,
+    disabled = false,
 }: SsoGroupSettingsProps) => {
     const updateGroupSyncing = () => {
         setValue('enableGroupSyncing', !data.enableGroupSyncing);
@@ -53,7 +55,7 @@ export const SsoGroupSettings = ({
                                 value={data.enableGroupSyncing}
                                 name='enableGroupSyncing'
                                 checked={data.enableGroupSyncing}
-                                disabled={!data.enabled}
+                                disabled={!data.enabled || disabled}
                             />
                         }
                         label={data.enableGroupSyncing ? 'Enabled' : 'Disabled'}
@@ -74,7 +76,7 @@ export const SsoGroupSettings = ({
                         label='Group JSON Path'
                         name='groupJsonPath'
                         value={data.groupJsonPath}
-                        disabled={!data.enableGroupSyncing}
+                        disabled={!data.enableGroupSyncing || disabled}
                         style={{ width: '400px' }}
                         variant='outlined'
                         size='small'
@@ -99,7 +101,9 @@ export const SsoGroupSettings = ({
                                     <Switch
                                         onChange={updateAddGroupScope}
                                         value={data.addGroupsScope}
-                                        disabled={!data.enableGroupSyncing}
+                                        disabled={
+                                            !data.enableGroupSyncing || disabled
+                                        }
                                         name='addGroupsScope'
                                         checked={data.addGroupsScope}
                                     />

diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
@@ -30,6 +30,7 @@ export interface IUiConfig {
     strategySegmentsLimit?: number;
     frontendApiOrigins?: string[];
     resourceLimits: ResourceLimitsSchema;
+    oidcConfiguredThroughEnv?: boolean;
 }
 
 export interface IProclamationToast {