Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
v11
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v11
  • Quick Start
  • CSS Customization
  • Testing your Theme
    • Outside of Keycloak
    • Inside of Keycloak
  • Deploying Your Theme
  • Integrating Keycloakify in your Codebase
    • Vite
    • Create-React-App / Webpack
    • yarn/npm/pnpm/bun Workspaces
    • Turborepo
    • Nx
    • Angular Workspace
  • Common Use Case Examples
    • Using a Component Library
    • Custom Fonts
    • Changing the background image
    • Adding your Logo
    • Using Tailwind
    • Dark Mode Persistence
  • Features
    • Internationalization and Translations
      • Basic principles
      • Previewing Your Pages in Different Languages
      • Adding New Translation Messages or Changing the Default Ones
      • Adding Support for Extra Languages
    • Theme Variants
    • Environment Variables
    • Styling a Custom Page Not Included in Base Keycloak
    • Integrating an Existing Theme into Your Keycloakify Project
    • Compiler Options
      • --project
      • keycloakVersionTargets
      • environmentVariables
      • themeName
      • startKeycloakOptions
      • themeVersion
      • accountThemeImplementation
      • postBuild
      • XDG_CACHE_HOME
      • kcContextExclusionsFtl
      • keycloakifyBuildDirPath
      • groupId
      • artifactId
      • Webpack specific options
        • projectBuildDirPath
        • staticDirPathInProjectBuildDirPath
        • publicDirPath
  • Page-Specific Guides
    • Registration Page
    • Terms and Conditions Page
  • Theme types
    • Differences Between Login Themes and Other Types of Themes
    • Account Theme
      • Single-Page
      • Multi-Page
    • Email Theme
    • Admin Theme
Powered by GitBook
On this page
  • Enabling the feature
  • Defining your Terms and Conditions text
  • Customizing how the terms are rendered

Was this helpful?

Edit on GitHub
  1. Page-Specific Guides

Terms and Conditions Page

Last updated 5 months ago

Was this helpful?

The Tems and Condition feature of Keycloak enables you to make new users of your service consent to the terms of use of your services upon regisering.

Enabling the feature

If you want you show your terms and condition page when they create an account you have to enable it in your realm configuration.

This is how to do it in the Keycloak Admin Console:

Defining your Terms and Conditions text

The way of defining your terms of services in Keycloak is to provide a message bundle for your realm that overrides the termsText key for the different languages that you have enabled.

In recent Keycloak's versions this can be acheived directly via the Keycloak Admin Console as shown in this video:

Customizing how the terms are rendered

npx keycloakify eject-page
# Select login -> terms.ftl

This will create src/login/Terms.tsx in your project.

You also probably want to add a story for the Term page:

npx keycloakify add-story
# Select login -> terms.ftl

In src/login/Terms.tsx, note that msg("termsText") returns a JSX.Element. It's because the msg() function renders the string message as HTML text. You can't work directly with that.

If you want to apply transformation to the text, you should use msgStr("termsText") instead. This returns the original string as defined in your realm configuration.

If you want to use an iframe as text .

If you want to customize the page that display the terms and condition you have to eject the page.

read this
terms.ftl
Preview of the the term and condition page.
Keycloakify Storybook
Preview of the default terms.ftl page
Logo