App.js

import { BrowserRouter, Route, Link, Routes } from "react-router-dom";
import Welcome from "./Welcome";
import Secured from "./Secured";
import RenderAnonymous from "./RenderAnonymous";
import RenderOnAuthenticated from "./RenderOnAuthenticated";
import UserService from "./UserService";
import "./App.css";

function App() {
  return (
    <BrowserRouter>
      <div className="container">
        <div>Welcome to keycloak project</div>
        <RenderAnonymous>
          <Welcome />
          Please login
          <button onClick={UserService.doLogin}>Login button</button>
        </RenderAnonymous>
        <RenderOnAuthenticated>
          Please logout
          <button onClick={UserService.doLogout}>Logout button</button>
        </RenderOnAuthenticated>
      </div>
    </BrowserRouter>
  );
}

export default App;

index.js

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import HttpService from "./HttpService";
import UserService from "./UserService";

import {
  KcApp,
  defaultKcProps,
  getKcContext,
  kcMessages,
  useKcLanguageTag,
} from "keycloakify";

import KeycloakApp from "./keycloakApp";

const { kcContext } = getKcContext({
  pageId: "login.ftl",
});

console.log("kcContext", kcContext); ----> undefined
const renderApp = () =>
  ReactDOM.render(
    // <KcApp kcContext={kcContext} {...{ ...defaultKcProps }} />,
    kcContext !== undefined ? (
      <KeycloakApp
        kcContext={kcContext}
        {...{
          ...defaultKcProps,
        }}
      />
    ) : (
      <App />
    ),
    document.getElementById("root")
  );

UserService.initKeycloak(renderApp);
HttpService.configure();

keycloakApp.js

import { useEffect, memo } from "react";
import {
  KcApp,
  defaultKcProps,
  getKcContext,
  kcMessages,
  useKcLanguageTag,
} from "keycloakify";
import Login from "./login";
import App from "./App";

export const KeycloakApp = memo((kcContext) => {
  console.log("KeycloakApp kcContext", kcContext);
  switch (kcContext.pageId) {
    case "login.ftl":
      return <Login kcContext={kcContext} />;
    // case "register.ftl": return <Register {...{ kcContext, ...props }} />;
    // case "info.ftl": return <Info {...{ kcContext, ...props }} />;
    // case "error.ftl": return <Error {...{ kcContext, ...props }} />;
    // case "login-reset-password.ftl": return <LoginResetPassword {...{ kcContext, ...props }} />;
    // case "login-verify-email.ftl": return <LoginVerifyEmail {...{ kcContext, ...props }} />;
    // case "terms.ftl": return <Terms {...{ kcContext, ...props }} />;
    // case "login-otp.ftl": return <LoginOtp {...{ kcContext, ...props }} />;
    // case "login-update-profile.ftl": return <LoginUpdateProfile {...{ kcContext, ...props }} />;
    // case "login-idp-link-confirm.ftl": return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
    // case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...props }} />;
    // case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...props }} />;
    default:
      return <App />;
  }
});

export default KeycloakApp;

package.json

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.6.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.24.0",
    "keycloak-js": "^15.0.2",
    "keycloakify": "^4.2.10",
    "powerhooks": "^0.10.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "tss-react": "^1.1.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}