React error in AWS Cognito hosted UI - why and how to bypass

[tv80]

My angular 19 app uses angular-auth-oidc-client and Cognio hosted UI to implement login with Cognito. My cypress login test uses almost the same sample code cypress/support/auth-provider-commands/cognito.ts found here: https://docs.cypress.io/app/guides/authentication-testing/amazon-cognito-authentication#Login-with-cyorigin

The login test basically worked, but now and then failed by the errors "Minified React error #418" (Hydration failed because the server rendered HTML didn't match the client.) generated by the Cognito hosted UI:

I never saw this error in real browsers outside cypress.

The same Minified React error #418 happened in both "cypress open" and "cypress run", in both cypress local and cypress in github Actions, in both Chrome and Electron, in Windows as well as in WSL.

What also annoys me is it happened randomly and not always. Before, I just reran the failed test and pipeline passed. But recently it has happened more often.

While running "cypress open" and the test failed by the mentioned error, I could actually manually login the test user successfully in the still-opened browser. This made me think even though the cause of the error is not understood, my test could just bypass the error and go on. So I've tried to installed a handler to catch the exception as guided by https://docs.cypress.io/api/cypress-api/catalog-of-events#Uncaught-Exceptions

That is, my login command became:

const loginToCognito = (username: string, password: string) => {
 Cypress.log({
   displayName: 'COGNITO LOGIN',
   message: [`🔐 Authenticating | ${username}`],
   autoEnd: false,
 })

 cy.visit('/')

 cy.origin(
   Cypress.env('cognito_domain'),
   () => {
     cy.on('uncaught:exception', (err) => {
      cy.task("log", "------> uncaught:exception: " + err.message);
      return false;
     })
   }
 )


 cy.origin(
   Cypress.env('cognito_domain'),
   {
     args: {
       username,
       password,
     },
   },
   ({ username, password }) => {
     cy.contains('Sign in with your email and password')
     // Cognito log in page has some elements of the same id but are off screen.
     // We only want the visible elements to log in
     cy.get('input[name="username"]:visible').type(username)
     cy.get('input[name="password"]:visible').type(password, {
       // use log: false to prevent your password from showing in the Command Log
       log: false,
     })
     cy.get('input[name="signInSubmitButton"]:visible').click()
   }
 )

 // give a few seconds for redirect to settle
 cy.wait(2000)

 // verify we have made it passed the login screen
 cy.contains('Get Started').should('be.visible')
}

// right now our custom command is light. More on this later!
Cypress.Commands.add('loginByCognito', (username, password) => {
 return loginToCognito(username, password)
})

Now, whenever the error occurred, the uncaught:exception handler could catch some, but not all (of the same) errors.

I am at my end to explain this output.

Did anyone encounter a similar issue and could kindly give me a hint?