diff --git a/src/clients/help.ts b/src/clients/help.ts
index b29402e290..190267f883 100644
--- a/src/clients/help.ts
+++ b/src/clients/help.ts
@@ -92,7 +92,12 @@ export default {
"Contains all default client scopes and selected optional scopes. All protocol mappers and role scope mappings of all those client scopes will be used when generating access token issued for your client",
effectiveRoleScopeMappings:
"Selected Optional Client Scopes, which will be used when issuing access token for this client. You can see above what value of OAuth Scope Parameter needs to be used when you want to have these optional client scopes applied when the initial OpenID Connect Authentication request will be sent from your client adapter",
- generatedAccessToken: "Example access token",
+ generatedAccessToken:
+ "See the example access token, which will be generated and sent to the client when selected user is authenticated. You can see claims and roles that the token will contain based on the effective protocol mappers and role scope mappings and also based on the claims/roles assigned to user himself",
+ generatedIdToken:
+ "See the example ID Token, which will be generated and sent to the client when selected user is authenticated. You can see claims and roles that the token will contain based on the effective protocol mappers and role scope mappings and also based on the claims/roles assigned to user himself",
+ generatedUserInfo:
+ "See the example User Info, which will be provided by the User Info Endpoint",
scopeParameter:
"You can copy/paste this value of scope parameter and use it in initial OpenID Connect Authentication Request sent from this client adapter. Default client scopes and selected optional client scopes will be used when generating token issued for this client",
user: "Optionally select user, for whom the example access token will be generated. If you do not select a user, example access token will not be generated during evaluation",
diff --git a/src/clients/messages.ts b/src/clients/messages.ts
index 8427e82015..18390ef9c4 100644
--- a/src/clients/messages.ts
+++ b/src/clients/messages.ts
@@ -273,12 +273,20 @@ export default {
effectiveProtocolMappers: "Effective protocol mappers",
effectiveRoleScopeMappings: "Effective role scope mappings",
generatedAccessToken: "Generated access token",
+ generatedIdToken: "Generated ID token",
+ generatedIdTokenNo: "No generated id token",
+ generatedIdTokenIsDisabled:
+ "Generated id token is disabled when no user is selected",
+ generatedUserInfo: "Generated user info",
+ generatedUserInfoNo: "No generated user info",
+ generatedUserInfoIsDisabled:
+ "Generated user info is disabled when no user is selected",
searchForProtocol: "Search protocol mapper",
parentClientScope: "Parent client scope",
searchForRole: "Search role",
origin: "Origin",
user: "User",
- noGeneratedAccessToken: "No generated access token",
+ generatedAccessTokenNo: "No generated access token",
generatedAccessTokenIsDisabled:
"Generated access token is disabled when no user is selected",
clientList: "Clients",
@@ -330,6 +338,9 @@ export default {
initialAccessTokenDetails: "Initial access token details",
copyInitialAccessToken:
"Please copy and paste the initial access token before closing as it can not be retrieved later.",
+ copySuccess: "Successfully copied to clipboard!",
+ clipboardCopyError: "Error copying to clipboard.",
+ copyToClipboard: "Copy to clipboard",
clientAuthentication: "Client authentication",
authentication: "Authentication",
authenticationFlow: "Authentication flow",
diff --git a/src/clients/scopes/EvaluateScopes.tsx b/src/clients/scopes/EvaluateScopes.tsx
index e8b526bdc5..25685482cd 100644
--- a/src/clients/scopes/EvaluateScopes.tsx
+++ b/src/clients/scopes/EvaluateScopes.tsx
@@ -1,7 +1,5 @@
import {
ClipboardCopy,
- EmptyState,
- EmptyStateBody,
Form,
FormGroup,
Grid,
@@ -17,9 +15,7 @@ import {
Tabs,
TabTitleText,
Text,
- TextArea,
TextContent,
- Title,
} from "@patternfly/react-core";
import { QuestionCircleIcon } from "@patternfly/react-icons";
import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
@@ -36,6 +32,7 @@ import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
import { useRealm } from "../../context/realm-context/RealmContext";
import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
import { prettyPrintJSON } from "../../util";
+import { GeneratedCodeTab } from "./GeneratedCodeTab";
import "./evaluate.css";
@@ -140,10 +137,14 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
ProtocolMapperRepresentation[]
>([]);
const [accessToken, setAccessToken] = useState("");
+ const [userInfo, setUserInfo] = useState("");
+ const [idToken, setIdToken] = useState("");
const tabContent1 = useRef(null);
const tabContent2 = useRef(null);
const tabContent3 = useRef(null);
+ const tabContent4 = useRef(null);
+ const tabContent5 = useRef(null);
useFetch(
() => adminClient.clients.listOptionalClientScopes({ id: clientId }),
@@ -221,20 +222,32 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
);
useFetch(
- () => {
+ async () => {
const scope = selected.join(" ");
- if (user) {
- return adminClient.clients.evaluateGenerateAccessToken({
+ if (!user) return [];
+
+ return await Promise.all([
+ adminClient.clients.evaluateGenerateAccessToken({
id: clientId,
userId: user.id!,
scope,
- });
- } else {
- return Promise.resolve({});
- }
+ }),
+ adminClient.clients.evaluateGenerateUserInfo({
+ id: clientId,
+ userId: user.id!,
+ scope,
+ }),
+ adminClient.clients.evaluateGenerateIdToken({
+ id: clientId,
+ userId: user.id!,
+ scope,
+ }),
+ ]);
},
- (accessToken) => {
+ ([accessToken, userInfo, idToken]) => {
setAccessToken(prettyPrintJSON(accessToken));
+ setUserInfo(prettyPrintJSON(userInfo));
+ setIdToken(prettyPrintJSON(idToken));
},
[user, selected]
);
@@ -350,25 +363,43 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
- {user && (
-
- )}
- {!user && (
-
-
- {t("noGeneratedAccessToken")}
-
-
- {t("generatedAccessTokenIsDisabled")}
-
-
- )}
+
+
+
+
+
+
+
@@ -430,6 +461,40 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
}
tabContentRef={tabContent3}
/>
+
+ {t("generatedIdToken")}{" "}
+
+
+ }
+ tabContentRef={tabContent4}
+ />
+
+ {t("generatedUserInfo")}{" "}
+
+
+ }
+ tabContentRef={tabContent5}
+ />
diff --git a/src/clients/scopes/GeneratedCodeTab.tsx b/src/clients/scopes/GeneratedCodeTab.tsx
new file mode 100644
index 0000000000..d515d2fdb1
--- /dev/null
+++ b/src/clients/scopes/GeneratedCodeTab.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+ ClipboardCopyButton,
+ CodeBlock,
+ CodeBlockAction,
+ EmptyState,
+ EmptyStateBody,
+ TextArea,
+ Title,
+} from "@patternfly/react-core";
+
+import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
+import useSetTimeout from "../../utils/useSetTimeout";
+
+type GeneratedCodeTabProps = {
+ user?: UserRepresentation;
+ text: string;
+ label: string;
+};
+
+enum CopyState {
+ Ready,
+ Copied,
+ Error,
+}
+
+export const GeneratedCodeTab = ({
+ text,
+ user,
+ label,
+}: GeneratedCodeTabProps) => {
+ const { t } = useTranslation("clients");
+ const setTimeout = useSetTimeout();
+ const [copy, setCopy] = useState(CopyState.Ready);
+ const copyMessage = useMemo(() => {
+ switch (copy) {
+ case CopyState.Ready:
+ return t("copyToClipboard");
+ case CopyState.Copied:
+ return t("copySuccess");
+ case CopyState.Error:
+ return t("clipboardCopyError");
+ }
+ }, [copy]);
+
+ useEffect(() => {
+ if (copy !== CopyState.Ready) {
+ return setTimeout(() => setCopy(CopyState.Ready), 1000);
+ }
+ }, [copy]);
+
+ const copyToClipboard = async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ setCopy(CopyState.Copied);
+ } catch (error) {
+ setCopy(CopyState.Error);
+ }
+ };
+
+ return user ? (
+
+ copyToClipboard(text)}
+ exitDelay={600}
+ variant="plain"
+ >
+ {copyMessage}
+
+
+ }
+ >
+
+
+ ) : (
+
+
+ {t(`${label}No`)}
+
+ {t(`${label}IsDisabled`)}
+
+ );
+};
diff --git a/src/utils/useSetTimeout.test.ts b/src/utils/useSetTimeout.test.ts
index 879da96c7c..737032a233 100644
--- a/src/utils/useSetTimeout.test.ts
+++ b/src/utils/useSetTimeout.test.ts
@@ -45,17 +45,40 @@ describe("useSetTimeout", () => {
it("clears a timeout if the component unmounts", () => {
const { result, unmount } = renderHook(() => useSetTimeout());
- const timerId = 42;
- const setTimeoutSpy = jest
- .spyOn(global, "setTimeout")
- .mockReturnValueOnce(timerId as unknown as NodeJS.Timeout);
+ const setTimeoutSpy = jest.spyOn(global, "setTimeout");
const clearTimeoutSpy = jest.spyOn(global, "clearTimeout");
+ const callback = jest.fn();
- result.current(jest.fn(), 1000);
+ result.current(callback, 1000);
+
+ // Timeout should be cleared after unmounting.
unmount();
+ expect(clearTimeoutSpy).toBeCalled();
- expect(clearTimeoutSpy).toBeCalledWith(timerId);
+ // And the callback should no longer be called.
+ jest.runOnlyPendingTimers();
+ expect(callback).not.toBeCalled();
setTimeoutSpy.mockRestore();
+ clearTimeoutSpy.mockRestore();
+ });
+
+ it("clears a timeout when cancelled", () => {
+ const { result } = renderHook(() => useSetTimeout());
+ const setTimeoutSpy = jest.spyOn(global, "setTimeout");
+ const clearTimeoutSpy = jest.spyOn(global, "clearTimeout");
+ const callback = jest.fn();
+ const cancel = result.current(callback, 1000);
+
+ // Timeout should be cleared when cancelling.
+ cancel();
+ expect(clearTimeoutSpy).toBeCalled();
+
+ // And the callback should no longer be called.
+ jest.runOnlyPendingTimers();
+ expect(callback).not.toBeCalled();
+
+ setTimeoutSpy.mockRestore();
+ clearTimeoutSpy.mockRestore();
});
});
diff --git a/src/utils/useSetTimeout.ts b/src/utils/useSetTimeout.ts
index c00441fe6e..d408cc6c9f 100644
--- a/src/utils/useSetTimeout.ts
+++ b/src/utils/useSetTimeout.ts
@@ -30,5 +30,10 @@ export default function useSetTimeout() {
scheduledTimers.delete(timer);
callback();
}
+
+ return function cancelTimeout() {
+ clearTimeout(timer);
+ scheduledTimers.delete(timer);
+ };
};
}