diff --git a/apps/console/src/pages/iam/auth/ConsentPage.tsx b/apps/console/src/pages/iam/auth/ConsentPage.tsx index 7cadc2463..c711ae651 100644 --- a/apps/console/src/pages/iam/auth/ConsentPage.tsx +++ b/apps/console/src/pages/iam/auth/ConsentPage.tsx @@ -24,9 +24,10 @@ import { IconLockOpen, IconUser, IconUserCircle, + Spinner, useToast, } from "@probo/ui"; -import { useCallback, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useState } from "react"; import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay"; import { graphql } from "relay-runtime"; @@ -160,6 +161,10 @@ export default function ConsentPage(props: { const { toast } = useToast(); const [deviceResult, setDeviceResult] = useState<"authorized" | "denied" | null>(null); const [pendingAction, setPendingAction] = useState<"allow" | "deny" | null>(null); + const [redirectState, setRedirectState] = useState<{ + url: string; + approved: boolean; + } | null>(null); const data = usePreloadedQuery(consentPageQuery, props.queryRef); usePageTitle(__("Authorize Application")); @@ -178,6 +183,12 @@ export default function ConsentPage(props: { [__, apiScopes.length], ); + useEffect(() => { + if (!redirectState) return; + + window.location.href = redirectState.url; + }, [redirectState]); + const handleAction = useCallback( (approved: boolean) => { if (!consent.id || pendingAction !== null) return; @@ -221,7 +232,10 @@ export default function ConsentPage(props: { } if (response.approveConsent.redirectURL) { - window.location.href = response.approveConsent.redirectURL; + setRedirectState({ + url: response.approveConsent.redirectURL, + approved, + }); } }, onError: (err) => { @@ -271,6 +285,27 @@ export default function ConsentPage(props: { ); } + if (redirectState) { + return ( +
+ +
+

+ {redirectState.approved ? __("Authorization Complete") : __("Access Denied")} +

+

+ {__("You will be redirected to")} + {" "} + + {consent.application.name} + + … +

+
+
+ ); + } + return (