Again phantom error after update to v5.3.2

[hookenful]

Hi there!

Getting again that strange problem while activating update-password link from email:

Source code of error page:
https://pastebin.com/TxQPpR4x

Thank for any help!

[garronej]

Hi @hookenful,

Thanks for the snippet, unfortunately you copy pasted to me the code of the error.ftl page, there isn't anything on the page you sent be that makes Keycloak throw.

The error is on the info.ftl page.

[hookenful]

https://pastebin.com/YRFgT3eN Is that info.ftl page? Maybe you mean that one that we are skipping.

[garronej]

Yes it should be the one you are skipping.

[hookenful]

Look at our KcApp . Maybe we missed something? <>

How can I get there meaning that we are skipping it?
What can I do on my our side to prevent such errors?

[hookenful]

<>

[garronej]

There isn't anything that you can do on your end to prevent this error, ony sollution is to give me the HTML code of the page info.ftl.

You have two option:

1. Try to play with the chrome debugger to pause before redirecting: https://gist.github.com/carcinocron/f6a509b84fe82a718816
2. Comment out window.location.href = kcContext.actionUri; just time to copy the page and past it to me.

[hookenful]

I suppose this one is Info.ftl: <>

And one more question, in regular basis I see that this is (
) is blinking before window.location.href = kcContext.actionUri;
Is it possible to prevent blinking? I should define an empty KcInfo then?

[garronej]

https://pastebin.com/DTwRdPwZ

The link is dead

[hookenful]

Sorry, here it is <>

[garronej]

Hi @hookenful, thank you for your contribution,
It should be fixed 5.4.0.
Do you confirm?

[hookenful]

Hi @hookenful, thank you for your contribution, It should be fixed 5.4.0. Do you confirm?

Thanks for your effort, I need to deploy on swarm and then I'll reply for that, ok?

[garronej]

@hookenful You are welcome,

Is it possible to prevent blinking? I should define an empty KcInfo then?

This should do it:

import React, { useLayoutEffect } from 'react';

import { KcFormLogin } from 'components/Keycloack/KcFormLogin';
import { KcFormPage } from 'components/Keycloack/KcFormPage';
import { KcFormResetPassword } from 'components/Keycloack/KcFormResetPassword';
import { KcContextBase } from 'keycloakify';
import { KcApp as KcAppBase } from 'keycloakify/lib/components/KcApp';

import { KcFormUpdatePassword } from './KcFormUpdatePassword';

import type { KcProps } from 'KcTypes/kcProps';

export const KcApp = React.memo(({ kcContext, ...props }: { kcContext: KcContextBase } & KcProps) => {
  useLayoutEffect(() => {
    if (kcContext.pageId === 'info.ftl' && kcContext.actionUri !== undefined) {
      window.location.href = kcContext.actionUri;
    }
  }, [kcContext.pageId]);

  switch (kcContext.pageId) {
+  case 'info.ftl':
+    return null;
    case 'login.ftl':
      return <KcFormLogin {...{ kcContext: kcContext as KcContextBase.Login & KcProps, ...props }} />;
    case 'login-page-expired.ftl':
      return <KcFormPage {...{ kcContext: kcContext as KcContextBase.LoginPageExpired & KcProps, ...props }} />;
    case 'login-reset-password.ftl':
      return (
        <KcFormResetPassword {...{ kcContext: kcContext as KcContextBase.LoginResetPassword & KcProps, ...props }} />
      );
    case 'login-update-password.ftl':
      return (
        <KcFormUpdatePassword {...{ kcContext: kcContext as KcContextBase.LoginUpdatePassword & KcProps, ...props }} />
      );
    default:
      return <KcAppBase {...{ kcContext, ...props }} />;
  }
});

[hookenful]

This should do it:

Worked like a charm, very thankful :) Cya, have a nice evening, Joseph.