Register User Profile Page was removed in Keycloak 24

[khanhprolazay]

Hi keycloakify team,

Based on Keycloak 24 migration, They render custom attributes directly in the register page (and two another pages).

Therefore, they removed register user profile page.

You can read more detail via this link

When I add additional user attributes (phoneNumber), Keycloak 24 will render the register page, which in the theme, this page hasn't implemented the dynamic rendering mechanism yet.

When I use keycloak theme:

When I use theme build by Keycloakify:

Hope you find this well.

[garronej]

Hello @khanhprolazay,
Yes thank you for reporting.
We're aware of this, it need to be addressed.
The challenging part is that this is a breaking change for every older Keycloak version.
Maybe we will have to provide different template for different target version.

In the meantime, remember that the components provided by Keycloakify can be overwrwiten. You don't need to use our components, you can freely modify or update them on your side.

Best.

[HeileneMartin]

Hello @garronej,

We're currently utilizing keycloakify-starter in our project and have encountered an issue similar to what @khanhprolazay has previously reported.

Our challenge lies in overriding the Register component. Here's what we've attempted so far:

We tried to add the UserProfileFormField component to our Register.tsx file. However, we ran into a problem where the context is asking for the 'profile' property, which seems to be part of the 'register-user-profile' context. Could you provide some guidance on how to correctly add this component?

We also attempted to create a custom field with the value {register.formData['user.attributes.phone']}. We're not sure if this is the correct approach, and would appreciate any advice you could give on this.

Here's an excerpt from our Register.tsx file for reference:

<input type="text" id="user.attributes.phone" name="user.attributes.phone" value={(register.formData['user.attributes.phone']!'')} />

Any assistance you could provide would be greatly appreciated.

Thank you in advance for your help.

[garronej]

Hello @HeileneMartin,

It's in my top priority to work on this.

We tried to add the UserProfileFormField component to our Register.tsx file. However, we ran into a problem where the context is asking for the 'profile' property, which seems to be part of the 'register-user-profile' context. Could you provide some guidance on how to correctly add this component?

I think the profile should actually be on the kcContext, it's just that the type definition are not up to date. you can use kcContext as any or oveload the type definition in your kcContext.ts file.

[HeileneMartin]

Hello @garronej

Thank you for your quick response to this. I've been trying to get this working for the last couple of days.

I've logged the kcContext to the console which showed my test field that I created in KeyCloak. The following code worked and recorded the input value I entered on submitting the form :

<div> <input type="text" id="test" name="test" value={ (register.formData as { [key: string]: string })[ 'user.attributes.test' ] } /> </div>

[garronej]

@HeileneMartin I'm sorry you had to go through this.

I'm glad you where able to make it work.

[garronej]

Follow progress here: #538