Keycloak accepting terms and conditions return 404, using react keycloakify

Question

I've created Keycloak theme with react using keycloakify package. I've edited the Terms file and when I'm clicking on accept it returns 404 page not found. This is my Terms component:

import { memo, useState } from "react";
import type { KcProps } from "keycloakify";
import type { KcContext } from "../kcContext";

import styles from "./Terms.module.scss";
import PDF from "./terms.pdf";

type KcContext_Terms = Extract<KcContext, { pageId: "terms.ftl" }>;

export const Terms = memo(
  ({ kcContext, ...props }: { kcContext: KcContext_Terms } & KcProps) => {
    const [isDisabled, setIsDisabled] = useState(true);
    const { url } = kcContext;

    return (
      <div className={styles.container}>
        <div className={styles.terms_container}>
            <p>
              In order to continue, please carefully read and agree to our{" "}
              <a href={PDF} target="_blank" onClick={() => setIsDisabled(false)}>
                Terms of Service
              </a>
            </p>
          <form
            action={url.loginAction} method="POST">
            <input
              name="accept" id="kc-accept"type="submit" value="Accept" disabled={isDisabled}/>
          </form>
        </div>
      </div>
    );
  }
);

The accept input has the same properties like the terms.ftl file in keycloack repo. can anyone tell me if I'm missing something?

Answer 1

There is a new way of implementing Terms and conditions with Keycloakify: https://docs.keycloakify.dev/terms-and-conditions