diff --git a/src/services/ui/serverless.yml b/src/services/ui/serverless.yml index e319c62de3..44b945f32c 100644 --- a/src/services/ui/serverless.yml +++ b/src/services/ui/serverless.yml @@ -20,6 +20,7 @@ custom: project: ${env:PROJECT} stage: ${opt:stage, self:provider.stage} region: ${opt:region, self:provider.region} + idmInfo: ${ssm:/aws/reference/secretsmanager/${self:custom.project}/${sls:stage}/idmInfo, ""} serverlessTerminationProtection: stages: - master @@ -44,6 +45,7 @@ custom: VITE_COGNITO_USER_POOL_CLIENT_DOMAIN=${param:CognitoUserPoolClientDomain} VITE_COGNITO_REDIRECT_SIGNIN=${param:ApplicationEndpointUrl} VITE_COGNITO_REDIRECT_SIGNOUT=${param:ApplicationEndpointUrl} + VITE_IDM_HOME_URL=${self:custom.idmInfo.home_url, "https://test.home.idm.cms.gov"} """ > .env.local yarn build deploy:finalize: | diff --git a/src/services/ui/src/components/UsaBanner/index.tsx b/src/services/ui/src/components/UsaBanner/index.tsx index da0572429c..173a05c040 100644 --- a/src/services/ui/src/components/UsaBanner/index.tsx +++ b/src/services/ui/src/components/UsaBanner/index.tsx @@ -5,6 +5,8 @@ import { GovernmentBuildingIcon } from "../GovernmentBuildingIcon"; import UsFlag from "@/assets/us_flag_small.png"; import { useMediaQuery } from "@/hooks"; import { useUserContext } from "../Context/userContext"; +import { useLoaderData } from "react-router-dom"; +import config from "@/config"; export const UsaBanner = () => { const [isOpen, setIsOpen] = useState(false); @@ -21,6 +23,7 @@ export const UsaBanner = () => { return false; } }, []); + const { error } = useLoaderData() as { error: string }; return ( <>
@@ -72,22 +75,8 @@ export const UsaBanner = () => {
)} - {hasRole && ( -
-

- You do not have access to view the entire application.{" "} - - Please visit IDM - {" "} - to request the appropriate user role(s). -

-
- )} + {hasRole && } + {error?.length > 0 && } {isOpen && (
@@ -139,3 +128,22 @@ export const MiniLock = () => { ); }; + +const NoRole = () => { + return ( +
+

+ You do not have access to view the entire application.{" "} + + Please visit IDM + {" "} + to request the appropriate user role(s). +

+
+ ); +}; diff --git a/src/services/ui/src/config.tsx b/src/services/ui/src/config.tsx index 3276f9030a..6ffd88af71 100644 --- a/src/services/ui/src/config.tsx +++ b/src/services/ui/src/config.tsx @@ -12,6 +12,9 @@ const config = { REDIRECT_SIGNIN: import.meta.env.VITE_COGNITO_REDIRECT_SIGNIN, REDIRECT_SIGNOUT: import.meta.env.VITE_COGNITO_REDIRECT_SIGNOUT, }, + idm: { + home_url: import.meta.env.VITE_IDM_HOME_URL, + }, }; export default config; diff --git a/src/services/ui/src/pages/welcome/index.tsx b/src/services/ui/src/pages/welcome/index.tsx index 426cc38b95..87e4b25a40 100644 --- a/src/services/ui/src/pages/welcome/index.tsx +++ b/src/services/ui/src/pages/welcome/index.tsx @@ -3,12 +3,22 @@ import OneMacLogo from "@/assets/onemac_logo.svg"; import * as Heroicons from "@heroicons/react/24/outline"; import { QueryClient } from "@tanstack/react-query"; import { getUser } from "@/api/useGetUser"; -import { Link } from "react-router-dom"; +import { Link, redirect, useLoaderData } from "react-router-dom"; import { Button } from "@/components/Inputs"; import { ROUTES, FAQ_TARGET } from "@/routes"; export const loader = (queryClient: QueryClient) => { return async () => { + const queryString = window.location.search; + // Parse the query string to get URL parameters + const queryParams = new URLSearchParams(queryString); + // Access specific parameters + const errorDescription = queryParams.get("error_description"); + const error = queryParams.get("error"); + if (errorDescription || error) { + console.error("Authentication Error:", { errorDescription, error }); + return { error }; + } if (!queryClient.getQueryData(["user"])) { return await queryClient.fetchQuery({ queryKey: ["user"],