Need help with defaultKcProps during upgrade to version 8

[anand-kulk]

@garronej or anyone-
I am trying to upgrade keycloakify from version 6.8.13 to latest 8.0.0. After upgrade, I am getting errors resolving below lines in my index.js file.

import { defaultKcProps, getKcContext } from 'keycloakify'; 

it can't find defaultKcProps in path keycloakify. I tried to check under node_modules but don't see that exported anymore...I saw there is TemplateProps and PageProps types but not sure how they can replace defaultKcProps, this is how it is being used in index.js -

import React from 'react';
import ReactDOM from 'react-dom/client';
import { KcApp } from './components/KcApp/';
import { defaultKcProps, getKcContext } from 'keycloakify';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ForgotPassword, Login, UpdatePassword } from './pages';
import './App.scss';
import { Footer } from '../src/components/shared/Footer';

const root = ReactDOM.createRoot(document.getElementById('root'));

const { kcContext } = getKcContext();

const app = (
  <React.StrictMode>
    <div
      id='mainContainer'
      className='flex flex-col h-screen bg-surfaceBackgroundLight'
    >
      <Router>
        <Routes>
          <Route
            exact
            path='/forgot-password'
            element={
              <ForgotPassword
                kcContext={kcContext}
                {...{
                  ...defaultKcProps,
                }}
              />
            }
          />

Any help will be appreciated.

Anand

[garronej]

Hello,
Sorry about hearing you have difficulties to update.
Have you checked the migration guides?

https://docs.keycloakify.dev/migration-guides

[anand-kulk]

I had taken a look at them but didn't see anything specific said for defaultKcProps

[garronej]

In defaultKcProps there was the default classes

keycloakify/src/lib/KcProps.ts

Lines 134 to 209 in 9e75ee0

	export const defaultKcProps = {
	...defaultKcTemplateProps,
	"kcLogoLink": "http://www.keycloak.org",
	"kcLogoClass": "login-pf-brand",
	"kcContainerClass": "container-fluid",
	"kcContentClass": ["col-sm-8", "col-sm-offset-2", "col-md-6", "col-md-offset-3", "col-lg-6", "col-lg-offset-3"],
	"kcFeedbackAreaClass": ["col-md-12"],
	"kcLocaleClass": ["col-xs-12", "col-sm-1"],
	"kcAlertIconClasserror": ["pficon", "pficon-error-circle-o"],
	"kcFormAreaClass": ["col-sm-10", "col-sm-offset-1", "col-md-8", "col-md-offset-2", "col-lg-8", "col-lg-offset-2"],
	"kcFormSocialAccountListClass": ["login-pf-social", "list-unstyled", "login-pf-social-all"],
	"kcFormSocialAccountDoubleListClass": ["login-pf-social-double-col"],
	"kcFormSocialAccountListLinkClass": ["login-pf-social-link"],
	"kcWebAuthnKeyIcon": ["pficon", "pficon-key"],
	"kcWebAuthnDefaultIcon": ["pficon", "pficon-key"],
	"kcFormClass": ["form-horizontal"],
	"kcFormGroupErrorClass": ["has-error"],
	"kcLabelClass": ["control-label"],
	"kcInputClass": ["form-control"],
	"kcInputErrorMessageClass": ["pf-c-form__helper-text", "pf-m-error", "required", "kc-feedback-text"],
	"kcInputWrapperClass": ["col-xs-12", "col-sm-12", "col-md-12", "col-lg-12"],
	"kcFormOptionsClass": ["col-xs-12", "col-sm-12", "col-md-12", "col-lg-12"],
	"kcFormButtonsClass": ["col-xs-12", "col-sm-12", "col-md-12", "col-lg-12"],
	"kcFormSettingClass": ["login-pf-settings"],
	"kcTextareaClass": ["form-control"],
	"kcInfoAreaClass": ["col-xs-12", "col-sm-4", "col-md-4", "col-lg-5", "details"],
	// user-profile grouping
	"kcFormGroupHeader": ["pf-c-form__group"],
	// css classes for form buttons main class used for all buttons
	"kcButtonClass": ["btn"],
	// classes defining priority of the button - primary or default (there is typically only one priority button for the form)
	"kcButtonPrimaryClass": ["btn-primary"],
	"kcButtonDefaultClass": ["btn-default"],
	// classes defining size of the button
	"kcButtonLargeClass": ["btn-lg"],
	"kcButtonBlockClass": ["btn-block"],
	// css classes for input
	"kcInputLargeClass": ["input-lg"],
	// css classes for form accessability
	"kcSrOnlyClass": ["sr-only"],
	// css classes for select-authenticator form
	"kcSelectAuthListClass": ["list-group", "list-view-pf"],
	"kcSelectAuthListItemClass": ["list-group-item", "list-view-pf-stacked"],
	"kcSelectAuthListItemFillClass": ["pf-l-split__item", "pf-m-fill"],
	"kcSelectAuthListItemIconPropertyClass": ["fa-2x", "select-auth-box-icon-properties"],
	"kcSelectAuthListItemIconClass": ["pf-l-split__item", "select-auth-box-icon"],
	"kcSelectAuthListItemTitle": ["select-auth-box-paragraph"],
	"kcSelectAuthListItemInfoClass": ["list-view-pf-main-info"],
	"kcSelectAuthListItemLeftClass": ["list-view-pf-left"],
	"kcSelectAuthListItemBodyClass": ["list-view-pf-body"],
	"kcSelectAuthListItemDescriptionClass": ["list-view-pf-description"],
	"kcSelectAuthListItemHeadingClass": ["list-group-item-heading"],
	"kcSelectAuthListItemHelpTextClass": ["list-group-item-text"],
	// css classes for the authenticators
	"kcAuthenticatorDefaultClass": ["fa", "list-view-pf-icon-lg"],
	"kcAuthenticatorPasswordClass": ["fa", "fa-unlock list-view-pf-icon-lg"],
	"kcAuthenticatorOTPClass": ["fa", "fa-mobile", "list-view-pf-icon-lg"],
	"kcAuthenticatorWebAuthnClass": ["fa", "fa-key", "list-view-pf-icon-lg"],
	"kcAuthenticatorWebAuthnPasswordlessClass": ["fa", "fa-key", "list-view-pf-icon-lg"],
	//css classes for the OTP Login Form
	"kcSelectOTPListClass": ["card-pf", "card-pf-view", "card-pf-view-select", "card-pf-view-single-select"],
	"kcSelectOTPListItemClass": ["card-pf-body", "card-pf-top-element"],
	"kcAuthenticatorOtpCircleClass": ["fa", "fa-mobile", "card-pf-icon-circle"],
	"kcSelectOTPItemHeadingClass": ["card-pf-title", "text-center"],
	"kcFormOptionsWrapperClass": []
	} as const;

.

Now we use getClassNames instead https://github.com/keycloakify/keycloakify-starter/blob/92b20fe74154ef8cf037f4b156eb3b2e5264a074/src/keycloak-theme/login/pages/Login.tsx#L12-L15.

Hope it helps

[anand-kulk]

Thanks for clarifying, I'll try getClassNames. Appreciate your help.