Cy10 multi domain: redirect triggered keycloak login form is unresponsive

[IvoLeist]

Current behavior

Dear Cypress Team,

first congratulations to the release of Cy10 was really looking forward to the multi domain support 🚀
and I am happy to report that it kinda works as expected :) meaning we are finally about to drop kcFakeLogin
https://github.com/Fredx87/cypress-keycloak-commands

However, there seem to be some remaining edges not yet resolved:
For us the keycloak login form is unresponsive when having the login page triggered by a redirect.

Desired behavior

For now the workaround is sufficient to pass the login to test features which require to be logged in
Nevertheless, the current behavior blocks us to fully abandon kcFakeLogin
because we still need it to make sure that the Keycloak login can be triggered and is working as expected.

So we would expect that the keycloak login form still remains responsive
when triggered by a redirect and not by a button.

Keep up the good work ✌️

Test code to reproduce

Cypress.Commands.add("login", (user, redirect) => {
 const baseUrl = "http://localhost:4000";
 cy.visit(`${baseUrl}/#/${redirect}`)
 cy.origin(
     "https://sso.xy.dev",
     { args: { user } },
     ({ user }) => {
       cy.get("#username")
         .type(user)
         .get("#password")
         .type(Cypress.env("auth_password"));
       cy.get("#kc-login").click();
    }
   );
   cy.visit(`${baseUrl}/#/${redirect}`);
 });

Timed out retrying after 4000ms: Expected to find element: #username, but never found it.

Workaround:
Trigger login form by login button

Cypress.Commands.add("login", (user, redirect) => {
 const baseUrl = "http://localhost:4000";
 
 // redirect triggered keycloak login window is unresponsive,
 // thus we need to trigger the login using the login button
 cy.visit(baseUrl);
 cy.get(".header-right > :nth-child(2)").click();

 cy.origin(
     "https://sso.xy.dev",
     { args: { user } },
     ({ user }) => {
       cy.get("#username")
         .type(user)
         .get("#password")
         .type(Cypress.env("auth_password"));
       cy.get("#kc-login").click();
    }
   );
   cy.visit(`${baseUrl}/#/${redirect}`);
 });

Cypress Version

10.1.0

Other

Tested Browsers:

• Electron v100
• Chrome v98

relevant versions of the package.json

• react: "^16.14.0",
• keycloak-js: "^18.0.0",
• cypress: "^10.1.0",

[AtofStryker]

Hey @IvoLeist. Thank you for opening an issue. I was able to reproduce the behavior you exactly described in this reproduction repository. There should be a GIF in the README to show the state of the test runner. Can you verify that this behavior looks correct to you?

[IvoLeist]

Hey @AtofStryker thank you for having a look into it and setting up a reproduction repo so quickly.
I have pulled it and can confirm that this is exactly the same bug we observe in our react app as well.

Just for completeness, in order to have the expected tests passed I had to modify the following:

README:
*Set Valid Redirect URIs to http://localhost:8081/*
Set Valid Redirect URIs to https://www.keycloak.org/app/*
Set Web Origins to *

keycloak.cy.js:
cy.get('#user-details').contains('my user')
cy.get('#user-details').contains('myuser')

Good luck with fixing the issue ✌️

[AtofStryker]

Hey @AtofStryker thank you for having a look into and setting up a reproduction repo so quickly. I have pulled it and can confirm that this is exactly the same bug we observe in our react app as well.

Just for completeness, in order to have the expected tests passed I had to modify the following:

README: *Set Valid Redirect URIs to http://localhost:8081/* Set Valid Redirect URIs to https://www.keycloak.org/app/* Set Web Origins to *

keycloak.cy.js: cy.get('#user-details').contains('my user') cy.get('#user-details').contains('myuser')

Good luck with fixing the issue ✌️

@IvoLeist perfect. I will update the readme and test file with your suggestions to make sure everything runs as expected. Thank you for pulling that down and verifying it!

[AtofStryker]

Also ran the tests against cypress with #22320 changes. The changes didn't seem to resolve the issue.

[AtofStryker]

Confirmed to be fixed by #23297

[cypress-bot]

The code for this is done in cypress-io/cypress#23297, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 10.9.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.9.0, please open a new issue.