I am trying to modify the Login page of Keycloak theme with a custom theme. I need to reuse the home page design (home.js) which is designed using react and {Component}'.

Is there any possible way to import this js file or any other react ponent which resides in another js file to my custom theme's login.ftl file of Keycloak?

I am trying to modify the Login page of Keycloak theme with a custom theme. I need to reuse the home page design (home.js) which is designed using react and {Component}'.

Is there any possible way to import this js file or any other react ponent which resides in another js file to my custom theme's login.ftl file of Keycloak?

• javascript
• html
• reactjs
• keycloak
• custom-theme

• please select an answer as the solution if there is the correct one – Oleksiï Nikonov Commented Dec 9, 2020 at 11:43

3 Answers 3

You can use Keycloakify,

Disclosure: I am the author

here is my example how did i the linking freemarker and react: input.ftl

<#assign initialValue ="21/07/2019">

<div class="form-group">
    <div id="flexInput-builder" data-initialValue=${initialValue}>
    </div>
</div>

<script type="text/babel" src="/jsx/input-builder.jsx" ></script>

and input-builder.jsx

class FlexInputBuilder extends React.Component {
  state = { value: '' }

  ponentDidMount = () => {
    this.setState({value: this.props.passedValue})
  }

  onChangeHandler = (e) => this.setState({value: e.target.value})

  render() {
    const {value} = this.state;
    return (
      <div>
        <label>
          Pick the date
          <input value={value}
                 type='date'
                 className="form-control bg-light"
                 placeholder="pick your date"
                 onChange={this.onChangeHandler}
                 id={this.state.id}
          />
        </label>
      </div>
    )
  }
}

const elementID = document.getElementById('flexInput-builder');

ReactDOM.render(
  <FlexInputBuilder passedValue={elementID.dataset.initialvalue}/>,
  document.getElementById('flexInput-builder')
);

For keycloak you need to customize keycloak theme you can check out there a documentation link https://www.keycloak/docs/latest/server_development/index.html I am also working on the same thing making a custom theme for keycloack for react project I made the theme for that you can check out I am still working on it so no readme file for now.

My Github link repo: another Github link: https://github./Alfresco/alfresco-keycloak-theme

and you cannot modify login.ftl using react ponents you need to make a custom theme for that in keycloak/theme folder.

it's little bit tracky part to customize keylock theme you need to understand first free maker template code style.

you can also check out this blog for a better understanding link.