diff --git a/changes/issue-7931-fix-sso-form-by-adding-trimming b/changes/issue-7931-fix-sso-form-by-adding-trimming new file mode 100644 index 0000000000..8596f11659 --- /dev/null +++ b/changes/issue-7931-fix-sso-form-by-adding-trimming @@ -0,0 +1,2 @@ +- update SSO form values in Fleet UI so that they are trimmed before being sent to the server and + show UI error when sso login fails diff --git a/frontend/pages/LoginPage/LoginPage.tsx b/frontend/pages/LoginPage/LoginPage.tsx index 17f862a918..61b26cc3d5 100644 --- a/frontend/pages/LoginPage/LoginPage.tsx +++ b/frontend/pages/LoginPage/LoginPage.tsx @@ -14,7 +14,7 @@ import formatErrorResponse from "utilities/format_error_response"; import AuthenticationFormWrapper from "components/AuthenticationFormWrapper"; // @ts-ignore import LoginForm from "components/forms/LoginForm"; -import LoginSuccessfulPage from "pages/LoginSuccessfulPage"; +import { AxiosError } from "axios"; interface ILoginPageProps { router: InjectedRouter; // v3 @@ -131,7 +131,14 @@ const LoginPage = ({ router, location }: ILoginPageProps) => { const { url } = await sessionsAPI.initializeSSO(returnToAfterAuth); window.location.href = url; } catch (error) { - console.error(error); + const err = error as AxiosError; + // a one-off error for sso login failure to be more readable to users + const ssoError = { + status: err.status, + data: { errors: [{ name: "base", reason: "Authentication failed" }] }, + }; + const errorObject = formatErrorResponse(ssoError); + setErrors(errorObject); return false; } }; diff --git a/frontend/pages/admin/AppSettingsPage/cards/Sso/Sso.tsx b/frontend/pages/admin/AppSettingsPage/cards/Sso/Sso.tsx index 323b2f1ea2..1e89d11226 100644 --- a/frontend/pages/admin/AppSettingsPage/cards/Sso/Sso.tsx +++ b/frontend/pages/admin/AppSettingsPage/cards/Sso/Sso.tsx @@ -16,23 +16,35 @@ import ExternalLinkIcon from "../../../../../../assets/images/icon-external-link const baseClass = "app-config-form"; +interface ISsoFormData { + enableSSO?: boolean; + idpName?: string; + entityID?: string; + issuerURI?: string; + idpImageURL?: string; + metadata?: string; + metadataURL?: string; + enableSSOIDPLogin?: boolean; + enableJITProvisioning?: boolean; +} + const Sso = ({ appConfig, handleSubmit, isPremiumTier, isUpdatingSettings, }: IAppConfigFormProps): JSX.Element => { - const [formData, setFormData] = useState({ - enableSSO: appConfig.sso_settings.enable_sso || false, - idpName: appConfig.sso_settings.idp_name || "", - entityID: appConfig.sso_settings.entity_id || "", - issuerURI: appConfig.sso_settings.issuer_uri || "", - idpImageURL: appConfig.sso_settings.idp_image_url || "", - metadata: appConfig.sso_settings.metadata || "", - metadataURL: appConfig.sso_settings.metadata_url || "", - enableSSOIDPLogin: appConfig.sso_settings.enable_sso_idp_login || false, + const [formData, setFormData] = useState({ + enableSSO: appConfig.sso_settings.enable_sso ?? false, + idpName: appConfig.sso_settings.idp_name ?? "", + entityID: appConfig.sso_settings.entity_id ?? "", + issuerURI: appConfig.sso_settings.issuer_uri ?? "", + idpImageURL: appConfig.sso_settings.idp_image_url ?? "", + metadata: appConfig.sso_settings.metadata ?? "", + metadataURL: appConfig.sso_settings.metadata_url ?? "", + enableSSOIDPLogin: appConfig.sso_settings.enable_sso_idp_login ?? false, enableJITProvisioning: - appConfig.sso_settings.enable_jit_provisioning || false, + appConfig.sso_settings.enable_jit_provisioning ?? false, }); const { @@ -69,7 +81,7 @@ const Sso = ({ errors.entity_id = "Entity ID must be present"; } - if (entityID.length < 5) { + if (typeof entityID === "string" && entityID.length < 5) { errors.entity_id = "Entity ID must be 5 or more characters"; } @@ -91,12 +103,12 @@ const Sso = ({ // Formatting of API not UI const formDataToSubmit = { sso_settings: { - entity_id: entityID, - issuer_uri: issuerURI, - idp_image_url: idpImageURL, - metadata, - metadata_url: metadataURL, - idp_name: idpName, + entity_id: entityID?.trim(), + issuer_uri: issuerURI?.trim(), + idp_image_url: idpImageURL?.trim(), + metadata: metadata?.trim(), + metadata_url: metadataURL?.trim(), + idp_name: idpName?.trim(), enable_sso: enableSSO, enable_sso_idp_login: enableSSOIDPLogin, enable_jit_provisioning: enableJITProvisioning,