Links
✒

Terms and conditions

Many organizations have a requirement that when a new user logs in for the first time, they need to agree to the terms and conditions of the website.
First you need to enable the required action on the Keycloak server admin console:
Then you load your own therms in Markdown format like this:
KcApp.tsx
import { lazy, Suspense } from "react";
import Fallback, { type PageProps } from "keycloakify/login";
import type { KcContext } from "./kcContext";
import { useI18n } from "./i18n";
import { useDownloadTerms } from "keycloakify/login";
​
const DefaultTemplate = lazy(() => import("keycloakify/login/Template"));
​
export default function App(props: { kcContext: KcContext; }) {
​
const { kcContext } = props;
​
const i18n = useI18n({ kcContext });
useDownloadTerms({
kcContext,
"downloadTermMarkdown": async ({ currentLanguageTag }) => {
​
const markdownString = await fetch((() => {
switch (currentLanguageTag) {
case "fr": return tos_fr_url;
default: return tos_en_url;
}
})()).then(response => response.text());
​
return markdownString;
}
});
​
if (i18n === null) {
//NOTE: Locales not yet downloaded, we could as well display a loading progress but it's usually a matter of milliseconds.
return null;
}
​
return (
<Suspense>
{(() => {
switch (kcContext.pageId) {
default: return <Fallback {...{ kcContext, i18n }} Template={DefaultTemplate} doUseDefaultCss />;
}
})()}
</Suspense>
);
​
}
You can also eject the terms.ftl page if you're not happy with the default look: