Browser crashes when refresh token is expired

[ptaranto]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

NX/webpack

Please describe your bug.

After successful login with tokens saved in local storage, launching the app when the refresh token is expired the browser tab crashes.

I was able to breakpoint it and check that tokens in local storage are cleared by CognitoUser.js, dispatchAuthEvent('tokenRefresh_failure', error, "Failed to retrieve new token"); is called by AuthClass, then it gets lost when running a generator function in Auth.js

What's the expected behaviour?

user is redirected to the Authenticator login form

Help us reproduce the bug!

• log in to the app to have the tokens saved to local storage
• wait for the refresh token to expire (or edit the tokens in local storage)
• refresh the page and notice the app/browser crash without any console error or other information

Code Snippet

https://codesandbox.io/s/zealous-star-xhj15y

import { Amplify } from "aws-amplify";
import { Authenticator, Flex } from "@aws-amplify/ui-react";
import "./styles.css";
import "@aws-amplify/ui-react/styles.css";

Amplify.configure({
  Auth: {
    region: "eu-west-1",
    userPoolId: "eu-west-1_POOLID",
    userPoolWebClientId: "POOL_ID",
    authenticationFlowType: "USER_PASSWORD_AUTH"
  }
});

export default function App() {
  return (
    <Flex justifyContent="center" alignItems="center" height="100vh">
      <Authenticator.Provider>
        <Authenticator>
          {(props) => {
            console.log(props.user);
            return (
              <>
                <p>{props.user.username}</p>
                <button onClick={props.signOut}>sign-out</button>
              </>
            );
          }}
        </Authenticator>
      </Authenticator.Provider>
    </Flex>
  );
}

Additional information and screenshots

libs in package.json: "@aws-amplify/ui-react": "2.13.0" "amazon-cognito-identity-js": "^5.2.8" "aws-amplify": "^4.3.19"

Notes:

• local storage is cleared by CognitoUser
• dispatchAuthEvent('tokenRefresh_failure', error, "Failed to retrieve new token"); is called by AuthClass
• it seems to crash when running a generator function in Auth

[ptaranto]

cross-posting in amplify-js too https://github.com/aws-amplify/amplify-js/issues/9833

[wlee221]

Hi @ptarnto, thanks for the detailed repro steps!

This is a duplicate of #1683 so I'll close this one and track progress in #1683. I'm looking into this issue now -- please expect an update by this week.

[wlee221]

Hi @ptaranto, the fix PR has been merged and will be released later today. I'll let you know again after the release.

[ptaranto]

thanks @wlee221 , that's great, looking forward for the release

[wlee221]

Update -- this has been released to

@aws-amplify/ui-angular@2.4.1
@aws-amplify/ui-react@2.16.1
@aws-amplify/ui-vue@2.4.1

Please let us know if the issue persists 🙏

[ptaranto]

@wlee221 thanks for the update and sorry for the late reply, the issue wasn't fixed in 2.16.1 but seems to be fixed in 2.17.0