mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	feat: make frontend aware that OIDC can be configured through env (#7597)
Co-authored-by: Nuno Góis <github@nunogois.com>
This commit is contained in:
		
							parent
							
								
									e43109a2cb
								
							
						
					
					
						commit
						7ed1d770a8
					
				@ -23,12 +23,14 @@ interface IAutoCreateFormProps {
 | 
				
			|||||||
        value: string | boolean | number | undefined,
 | 
					        value: string | boolean | number | undefined,
 | 
				
			||||||
    ) => void;
 | 
					    ) => void;
 | 
				
			||||||
    onUpdateRole: (role: IRole | null) => void;
 | 
					    onUpdateRole: (role: IRole | null) => void;
 | 
				
			||||||
 | 
					    disabled?: boolean;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const AutoCreateForm = ({
 | 
					export const AutoCreateForm = ({
 | 
				
			||||||
    data = { enabled: false, autoCreate: false },
 | 
					    data = { enabled: false, autoCreate: false },
 | 
				
			||||||
    setValue,
 | 
					    setValue,
 | 
				
			||||||
    onUpdateRole,
 | 
					    onUpdateRole,
 | 
				
			||||||
 | 
					    disabled = false,
 | 
				
			||||||
}: IAutoCreateFormProps) => {
 | 
					}: IAutoCreateFormProps) => {
 | 
				
			||||||
    const { roles } = useRoles();
 | 
					    const { roles } = useRoles();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -69,7 +71,7 @@ export const AutoCreateForm = ({
 | 
				
			|||||||
                                onChange={updateAutoCreate}
 | 
					                                onChange={updateAutoCreate}
 | 
				
			||||||
                                name='enabled'
 | 
					                                name='enabled'
 | 
				
			||||||
                                checked={data.autoCreate}
 | 
					                                checked={data.autoCreate}
 | 
				
			||||||
                                disabled={!data.enabled}
 | 
					                                disabled={!data.enabled || disabled}
 | 
				
			||||||
                            />
 | 
					                            />
 | 
				
			||||||
                        }
 | 
					                        }
 | 
				
			||||||
                        label='Auto-create users'
 | 
					                        label='Auto-create users'
 | 
				
			||||||
@ -90,7 +92,9 @@ export const AutoCreateForm = ({
 | 
				
			|||||||
                            roles={roles}
 | 
					                            roles={roles}
 | 
				
			||||||
                            value={resolveRole(data)}
 | 
					                            value={resolveRole(data)}
 | 
				
			||||||
                            setValue={onUpdateRole}
 | 
					                            setValue={onUpdateRole}
 | 
				
			||||||
                            disabled={!data.autoCreate || !data.enabled}
 | 
					                            disabled={
 | 
				
			||||||
 | 
					                                !data.autoCreate || !data.enabled || disabled
 | 
				
			||||||
 | 
					                            }
 | 
				
			||||||
                            required
 | 
					                            required
 | 
				
			||||||
                            hideDescription
 | 
					                            hideDescription
 | 
				
			||||||
                        />
 | 
					                        />
 | 
				
			||||||
@ -110,7 +114,7 @@ export const AutoCreateForm = ({
 | 
				
			|||||||
                        onChange={updateField}
 | 
					                        onChange={updateField}
 | 
				
			||||||
                        label='Email domains'
 | 
					                        label='Email domains'
 | 
				
			||||||
                        name='emailDomains'
 | 
					                        name='emailDomains'
 | 
				
			||||||
                        disabled={!data.autoCreate || !data.enabled}
 | 
					                        disabled={!data.autoCreate || !data.enabled || disabled}
 | 
				
			||||||
                        required={Boolean(data.autoCreate)}
 | 
					                        required={Boolean(data.autoCreate)}
 | 
				
			||||||
                        value={data.emailDomains || ''}
 | 
					                        value={data.emailDomains || ''}
 | 
				
			||||||
                        placeholder='@company.com, @anotherCompany.com'
 | 
					                        placeholder='@company.com, @anotherCompany.com'
 | 
				
			||||||
 | 
				
			|||||||
@ -21,6 +21,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 | 
				
			|||||||
import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
 | 
					import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
 | 
				
			||||||
import { SsoGroupSettings } from '../SsoGroupSettings';
 | 
					import { SsoGroupSettings } from '../SsoGroupSettings';
 | 
				
			||||||
import type { IRole } from 'interfaces/role';
 | 
					import type { IRole } from 'interfaces/role';
 | 
				
			||||||
 | 
					import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const initialState = {
 | 
					const initialState = {
 | 
				
			||||||
    enabled: false,
 | 
					    enabled: false,
 | 
				
			||||||
@ -45,6 +46,7 @@ type State = typeof initialState & {
 | 
				
			|||||||
export const OidcAuth = () => {
 | 
					export const OidcAuth = () => {
 | 
				
			||||||
    const { setToastData, setToastApiError } = useToast();
 | 
					    const { setToastData, setToastApiError } = useToast();
 | 
				
			||||||
    const { uiConfig } = useUiConfig();
 | 
					    const { uiConfig } = useUiConfig();
 | 
				
			||||||
 | 
					    const { oidcConfiguredThroughEnv } = uiConfig;
 | 
				
			||||||
    const [data, setData] = useState<State>(initialState);
 | 
					    const [data, setData] = useState<State>(initialState);
 | 
				
			||||||
    const { config } = useAuthSettings('oidc');
 | 
					    const { config } = useAuthSettings('oidc');
 | 
				
			||||||
    const { updateSettings, errors, loading } = useAuthSettingsApi('oidc');
 | 
					    const { updateSettings, errors, loading } = useAuthSettingsApi('oidc');
 | 
				
			||||||
@ -107,6 +109,24 @@ export const OidcAuth = () => {
 | 
				
			|||||||
        <>
 | 
					        <>
 | 
				
			||||||
            <Grid container sx={{ mb: 3 }}>
 | 
					            <Grid container sx={{ mb: 3 }}>
 | 
				
			||||||
                <Grid item md={12}>
 | 
					                <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'>
 | 
					                    <Alert severity='info'>
 | 
				
			||||||
                        Please read the{' '}
 | 
					                        Please read the{' '}
 | 
				
			||||||
                        <a
 | 
					                        <a
 | 
				
			||||||
@ -140,6 +160,7 @@ export const OidcAuth = () => {
 | 
				
			|||||||
                                />
 | 
					                                />
 | 
				
			||||||
                            }
 | 
					                            }
 | 
				
			||||||
                            label={data.enabled ? 'Enabled' : 'Disabled'}
 | 
					                            label={data.enabled ? 'Enabled' : 'Disabled'}
 | 
				
			||||||
 | 
					                            disabled={oidcConfiguredThroughEnv}
 | 
				
			||||||
                        />
 | 
					                        />
 | 
				
			||||||
                    </Grid>
 | 
					                    </Grid>
 | 
				
			||||||
                </Grid>
 | 
					                </Grid>
 | 
				
			||||||
@ -154,7 +175,7 @@ export const OidcAuth = () => {
 | 
				
			|||||||
                            label='Discover URL'
 | 
					                            label='Discover URL'
 | 
				
			||||||
                            name='discoverUrl'
 | 
					                            name='discoverUrl'
 | 
				
			||||||
                            value={data.discoverUrl}
 | 
					                            value={data.discoverUrl}
 | 
				
			||||||
                            disabled={!data.enabled}
 | 
					                            disabled={!data.enabled || oidcConfiguredThroughEnv}
 | 
				
			||||||
                            style={{ width: '400px' }}
 | 
					                            style={{ width: '400px' }}
 | 
				
			||||||
                            variant='outlined'
 | 
					                            variant='outlined'
 | 
				
			||||||
                            size='small'
 | 
					                            size='small'
 | 
				
			||||||
@ -172,7 +193,7 @@ export const OidcAuth = () => {
 | 
				
			|||||||
                            label='Client ID'
 | 
					                            label='Client ID'
 | 
				
			||||||
                            name='clientId'
 | 
					                            name='clientId'
 | 
				
			||||||
                            value={data.clientId}
 | 
					                            value={data.clientId}
 | 
				
			||||||
                            disabled={!data.enabled}
 | 
					                            disabled={!data.enabled || oidcConfiguredThroughEnv}
 | 
				
			||||||
                            style={{ width: '400px' }}
 | 
					                            style={{ width: '400px' }}
 | 
				
			||||||
                            variant='outlined'
 | 
					                            variant='outlined'
 | 
				
			||||||
                            size='small'
 | 
					                            size='small'
 | 
				
			||||||
@ -193,7 +214,7 @@ export const OidcAuth = () => {
 | 
				
			|||||||
                            label='Client Secret'
 | 
					                            label='Client Secret'
 | 
				
			||||||
                            name='secret'
 | 
					                            name='secret'
 | 
				
			||||||
                            value={data.secret}
 | 
					                            value={data.secret}
 | 
				
			||||||
                            disabled={!data.enabled}
 | 
					                            disabled={!data.enabled || oidcConfiguredThroughEnv}
 | 
				
			||||||
                            style={{ width: '400px' }}
 | 
					                            style={{ width: '400px' }}
 | 
				
			||||||
                            variant='outlined'
 | 
					                            variant='outlined'
 | 
				
			||||||
                            size='small'
 | 
					                            size='small'
 | 
				
			||||||
@ -216,7 +237,10 @@ export const OidcAuth = () => {
 | 
				
			|||||||
                                <Switch
 | 
					                                <Switch
 | 
				
			||||||
                                    onChange={updateSingleSignOut}
 | 
					                                    onChange={updateSingleSignOut}
 | 
				
			||||||
                                    value={data.enableSingleSignOut}
 | 
					                                    value={data.enableSingleSignOut}
 | 
				
			||||||
                                    disabled={!data.enabled}
 | 
					                                    disabled={
 | 
				
			||||||
 | 
					                                        !data.enabled ||
 | 
				
			||||||
 | 
					                                        oidcConfiguredThroughEnv
 | 
				
			||||||
 | 
					                                    }
 | 
				
			||||||
                                    name='enableSingleSignOut'
 | 
					                                    name='enableSingleSignOut'
 | 
				
			||||||
                                    checked={data.enableSingleSignOut}
 | 
					                                    checked={data.enableSingleSignOut}
 | 
				
			||||||
                                />
 | 
					                                />
 | 
				
			||||||
@ -247,7 +271,7 @@ export const OidcAuth = () => {
 | 
				
			|||||||
                            label='ACR Values'
 | 
					                            label='ACR Values'
 | 
				
			||||||
                            name='acrValues'
 | 
					                            name='acrValues'
 | 
				
			||||||
                            value={data.acrValues}
 | 
					                            value={data.acrValues}
 | 
				
			||||||
                            disabled={!data.enabled}
 | 
					                            disabled={!data.enabled || oidcConfiguredThroughEnv}
 | 
				
			||||||
                            style={{ width: '400px' }}
 | 
					                            style={{ width: '400px' }}
 | 
				
			||||||
                            variant='outlined'
 | 
					                            variant='outlined'
 | 
				
			||||||
                            size='small'
 | 
					                            size='small'
 | 
				
			||||||
@ -258,12 +282,14 @@ export const OidcAuth = () => {
 | 
				
			|||||||
                    ssoType='OIDC'
 | 
					                    ssoType='OIDC'
 | 
				
			||||||
                    data={data}
 | 
					                    data={data}
 | 
				
			||||||
                    setValue={setValue}
 | 
					                    setValue={setValue}
 | 
				
			||||||
 | 
					                    disabled={oidcConfiguredThroughEnv}
 | 
				
			||||||
                />
 | 
					                />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                <AutoCreateForm
 | 
					                <AutoCreateForm
 | 
				
			||||||
                    data={data}
 | 
					                    data={data}
 | 
				
			||||||
                    setValue={setValue}
 | 
					                    setValue={setValue}
 | 
				
			||||||
                    onUpdateRole={onUpdateRole}
 | 
					                    onUpdateRole={onUpdateRole}
 | 
				
			||||||
 | 
					                    disabled={oidcConfiguredThroughEnv}
 | 
				
			||||||
                />
 | 
					                />
 | 
				
			||||||
                <Grid container spacing={3} mb={2}>
 | 
					                <Grid container spacing={3} mb={2}>
 | 
				
			||||||
                    <Grid item md={5}>
 | 
					                    <Grid item md={5}>
 | 
				
			||||||
@ -292,6 +318,7 @@ export const OidcAuth = () => {
 | 
				
			|||||||
                                        e.target.value,
 | 
					                                        e.target.value,
 | 
				
			||||||
                                    )
 | 
					                                    )
 | 
				
			||||||
                                }
 | 
					                                }
 | 
				
			||||||
 | 
					                                disabled={oidcConfiguredThroughEnv}
 | 
				
			||||||
                            >
 | 
					                            >
 | 
				
			||||||
                                {/*consider these from API or constants. */}
 | 
					                                {/*consider these from API or constants. */}
 | 
				
			||||||
                                <MenuItem value='RS256'>RS256</MenuItem>
 | 
					                                <MenuItem value='RS256'>RS256</MenuItem>
 | 
				
			||||||
@ -308,7 +335,7 @@ export const OidcAuth = () => {
 | 
				
			|||||||
                            variant='contained'
 | 
					                            variant='contained'
 | 
				
			||||||
                            color='primary'
 | 
					                            color='primary'
 | 
				
			||||||
                            type='submit'
 | 
					                            type='submit'
 | 
				
			||||||
                            disabled={loading}
 | 
					                            disabled={loading || oidcConfiguredThroughEnv}
 | 
				
			||||||
                        >
 | 
					                        >
 | 
				
			||||||
                            Save
 | 
					                            Save
 | 
				
			||||||
                        </Button>{' '}
 | 
					                        </Button>{' '}
 | 
				
			||||||
 | 
				
			|||||||
@ -11,6 +11,7 @@ interface SsoGroupSettingsProps {
 | 
				
			|||||||
        addGroupsScope: boolean;
 | 
					        addGroupsScope: boolean;
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
    setValue: (name: string, value: string | boolean) => void;
 | 
					    setValue: (name: string, value: string | boolean) => void;
 | 
				
			||||||
 | 
					    disabled?: boolean;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const SsoGroupSettings = ({
 | 
					export const SsoGroupSettings = ({
 | 
				
			||||||
@ -22,6 +23,7 @@ export const SsoGroupSettings = ({
 | 
				
			|||||||
        addGroupsScope: false,
 | 
					        addGroupsScope: false,
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    setValue,
 | 
					    setValue,
 | 
				
			||||||
 | 
					    disabled = false,
 | 
				
			||||||
}: SsoGroupSettingsProps) => {
 | 
					}: SsoGroupSettingsProps) => {
 | 
				
			||||||
    const updateGroupSyncing = () => {
 | 
					    const updateGroupSyncing = () => {
 | 
				
			||||||
        setValue('enableGroupSyncing', !data.enableGroupSyncing);
 | 
					        setValue('enableGroupSyncing', !data.enableGroupSyncing);
 | 
				
			||||||
@ -53,7 +55,7 @@ export const SsoGroupSettings = ({
 | 
				
			|||||||
                                value={data.enableGroupSyncing}
 | 
					                                value={data.enableGroupSyncing}
 | 
				
			||||||
                                name='enableGroupSyncing'
 | 
					                                name='enableGroupSyncing'
 | 
				
			||||||
                                checked={data.enableGroupSyncing}
 | 
					                                checked={data.enableGroupSyncing}
 | 
				
			||||||
                                disabled={!data.enabled}
 | 
					                                disabled={!data.enabled || disabled}
 | 
				
			||||||
                            />
 | 
					                            />
 | 
				
			||||||
                        }
 | 
					                        }
 | 
				
			||||||
                        label={data.enableGroupSyncing ? 'Enabled' : 'Disabled'}
 | 
					                        label={data.enableGroupSyncing ? 'Enabled' : 'Disabled'}
 | 
				
			||||||
@ -74,7 +76,7 @@ export const SsoGroupSettings = ({
 | 
				
			|||||||
                        label='Group JSON Path'
 | 
					                        label='Group JSON Path'
 | 
				
			||||||
                        name='groupJsonPath'
 | 
					                        name='groupJsonPath'
 | 
				
			||||||
                        value={data.groupJsonPath}
 | 
					                        value={data.groupJsonPath}
 | 
				
			||||||
                        disabled={!data.enableGroupSyncing}
 | 
					                        disabled={!data.enableGroupSyncing || disabled}
 | 
				
			||||||
                        style={{ width: '400px' }}
 | 
					                        style={{ width: '400px' }}
 | 
				
			||||||
                        variant='outlined'
 | 
					                        variant='outlined'
 | 
				
			||||||
                        size='small'
 | 
					                        size='small'
 | 
				
			||||||
@ -99,7 +101,9 @@ export const SsoGroupSettings = ({
 | 
				
			|||||||
                                    <Switch
 | 
					                                    <Switch
 | 
				
			||||||
                                        onChange={updateAddGroupScope}
 | 
					                                        onChange={updateAddGroupScope}
 | 
				
			||||||
                                        value={data.addGroupsScope}
 | 
					                                        value={data.addGroupsScope}
 | 
				
			||||||
                                        disabled={!data.enableGroupSyncing}
 | 
					                                        disabled={
 | 
				
			||||||
 | 
					                                            !data.enableGroupSyncing || disabled
 | 
				
			||||||
 | 
					                                        }
 | 
				
			||||||
                                        name='addGroupsScope'
 | 
					                                        name='addGroupsScope'
 | 
				
			||||||
                                        checked={data.addGroupsScope}
 | 
					                                        checked={data.addGroupsScope}
 | 
				
			||||||
                                    />
 | 
					                                    />
 | 
				
			||||||
 | 
				
			|||||||
@ -30,6 +30,7 @@ export interface IUiConfig {
 | 
				
			|||||||
    strategySegmentsLimit?: number;
 | 
					    strategySegmentsLimit?: number;
 | 
				
			||||||
    frontendApiOrigins?: string[];
 | 
					    frontendApiOrigins?: string[];
 | 
				
			||||||
    resourceLimits: ResourceLimitsSchema;
 | 
					    resourceLimits: ResourceLimitsSchema;
 | 
				
			||||||
 | 
					    oidcConfiguredThroughEnv?: boolean;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export interface IProclamationToast {
 | 
					export interface IProclamationToast {
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user