search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.42k stars 2.12k forks source link

Browser crashes when refresh token is expired #9833

Closed ptaranto closed 2 years ago

ptaranto commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` System: OS: macOS 12.3.1 CPU: (8) arm64 Apple M1 Pro Memory: 134.97 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm Browsers: Chrome: 100.0.4896.127 Firefox: 98.0.2 Safari: 15.4 npmPackages: @aws-amplify/ui-react: 2.13.0 => 2.13.0 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-legacy: undefined () @babel/core: ^7.17.9 => 7.17.9 @babel/preset-env: ^7.16.11 => 7.16.11 @babel/preset-react: ^7.16.7 => 7.16.7 @babel/preset-typescript: ^7.16.7 => 7.16.7 @ckeditor/ckeditor5-autoformat: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-basic-styles: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-block-quote: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-cloud-services: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-dev-utils: ^25.4.2 => 25.4.5 @ckeditor/ckeditor5-dev-webpack-plugin: ^25.4.2 => 25.4.5 @ckeditor/ckeditor5-editor-classic: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-essentials: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-heading: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-image: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-indent: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-link: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-list: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-media-embed: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-paragraph: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-paste-from-office: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-react: ^3.0.2 => 3.0.3 @ckeditor/ckeditor5-table: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-theme-lark: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-typing: ^29.2.0 => 29.2.0 @ckeditor/ckeditor5-upload: ^29.2.0 => 29.2.0 @ctek/prettier-config: 0.0.4 => 0.0.4 @date-io/date-fns: ^1.3.13 => 1.3.13 (2.11.0) @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: 11.8.1 => 11.8.1 @mui/icons-material: ^5.2.5 => 5.2.5 @mui/lab: ^5.0.0-alpha.61 => 5.0.0-alpha.63 @mui/material: ^5.2.7 => 5.2.7 @mui/styles: ^5.2.3 => 5.2.3 @mui/x-data-grid: ^5.2.1 => 5.2.2 @nrwl/cli: 13.10.0 => 13.10.0 @nrwl/cypress: 13.10.0 => 13.10.0 @nrwl/eslint-plugin-nx: 13.10.0 => 13.10.0 @nrwl/jest: 13.10.0 => 13.10.0 @nrwl/linter: 13.10.0 => 13.10.0 @nrwl/react: 13.10.0 => 13.10.0 @nrwl/web: 13.10.0 => 13.10.0 @nrwl/workspace: 13.10.0 => 13.10.0 @sentry/react: ^6.19.6 => 6.19.6 @sentry/tracing: ^6.19.6 => 6.19.6 @sentry/webpack-plugin: ^1.18.8 => 1.18.8 @svgr/webpack: ^6.2.1 => 6.2.1 @testing-library/jest-dom: ^5.16.4 => 5.16.4 @testing-library/react: 12.1.4 => 12.1.4 @testing-library/react-hooks: 7.0.2 => 7.0.2 @types/babel__core: ^7.1.19 => 7.1.19 @types/babel__preset-env: ^7.9.2 => 7.9.2 @types/core-js: ^2.5.5 => 2.5.5 @types/eslint: ^8.4.1 => 8.4.1 @types/eslint-plugin-prettier: ^3.1.0 => 3.1.0 @types/file-saver: ^2.0.5 => 2.0.5 @types/jest: ^27.4.1 => 27.4.1 @types/jwt-decode: ^3.1.0 => 3.1.0 @types/logrocket-react: ^3.0.0 => 3.0.0 @types/mixpanel-browser: ^2.38.0 => 2.38.0 @types/node: ^17.0.23 => 17.0.23 (14.18.5) @types/prettier: ^2.4.4 => 2.4.4 @types/react: 17.0.43 => 17.0.43 @types/react-dom: 17.0.14 => 17.0.14 @types/react-helmet: ^6.1.5 => 6.1.5 @types/react-router-dom: 5.3.3 => 5.3.3 @types/sanitize-html: ^2.6.2 => 2.6.2 @types/sortablejs: ^1.10.7 => 1.10.7 @types/testing-library__jest-dom: ^5.14.3 => 5.14.3 @typescript-eslint/eslint-plugin: 5.18.0 => 5.18.0 @typescript-eslint/parser: 5.18.0 => 5.18.0 @welldone-software/why-did-you-render: ^6.2.3 => 6.2.3 @xstate/inspect: ^0.6.2 => 0.6.5 @xstate/react: ^2.0.0 => 2.0.1 (1.6.3) amazon-cognito-identity-js: ^5.2.8 => 5.2.8 aws-amplify: ^4.3.19 => 4.3.19 babel-jest: ^27.5.1 => 27.5.1 browser-image-compression: ^1.0.17 => 1.0.17 core-js: ^3.21.1 => 3.21.1 cypress: ^8.4.0 => 8.7.0 date-fns: ^2.28.0 => 2.28.0 document-register-element: ^1.14.10 => 1.14.10 dotenv: 10.0.0 => 10.0.0 eslint: 8.12.0 => 8.12.0 eslint-config-prettier: ^8.5.0 => 8.5.0 eslint-plugin-cypress: ^2.12.1 => 2.12.1 eslint-plugin-import: ^2.26.0 => 2.26.0 eslint-plugin-jsx-a11y: ^6.5.1 => 6.5.1 eslint-plugin-prettier: ^4.0.0 => 4.0.0 eslint-plugin-react: 7.29.4 => 7.29.4 (7.28.0) eslint-plugin-react-hooks: 4.4.0 => 4.4.0 formik: ^2.2.9 => 2.2.9 husky: ^7.0.4 => 7.0.4 (4.3.8) jest: ^27.5.1 => 27.5.1 jwt-decode: ^3.1.2 => 3.1.2 lint-staged: ^12.3.7 => 12.3.7 logrocket: ^2.2.1 => 2.2.1 (1.0.1) logrocket-react: ^4.0.1 => 4.0.1 mixpanel-browser: ^2.45.0 => 2.45.0 msw: ^0.39.2 => 0.39.2 node-polyfill-webpack-plugin: ^1.1.4 => 1.1.4 nx: ^13.10.0 => 13.10.0 prettier: 2.6.2 => 2.6.2 react: 17.0.2 => 17.0.2 react-csv-downloader: ^2.7.1 => 2.7.1 react-dom: 17.0.2 => 17.0.2 react-helmet: ^6.1.0 => 6.1.0 react-hook-form: ^7.29.0 => 7.29.0 react-intl: ^5.24.8 => 5.24.8 react-mathjax-preview: ^2.2.6 => 2.2.6 react-mixpanel: ^1.0.5 => 1.0.5 react-router-dom: ^5.3.0 => 5.3.0 react-sortablejs: ^6.1.1 => 6.1.1 react-test-renderer: 17.0.2 => 17.0.2 regenerator-runtime: ^0.13.9 => 0.13.9 rifm: ^0.12.1 => 0.12.1 sanitize-html: ^2.7.0 => 2.7.0 sortablejs: ^1.15.0 => 1.15.0 ts-jest: ^27.1.4 => 27.1.4 ts-node: ^10.7.0 => 10.7.0 (9.1.1) tslib: ^2.3.1 => 2.3.1 (1.14.1) typescript: ^4.6.3 => 4.6.3 whatwg-fetch: ^3.6.2 => 3.6.2 xstate: ^4.30.6 => 4.31.0 yup: ^0.32.11 => 0.32.11 npmGlobalPackages: corepack: 0.10.0 npm: 8.3.1 nx: 13.10.0 ```

Describe the 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

Expected behavior

user is redirected to the Authenticator login form

Reproduction steps

  1. log in to the app to have the tokens saved to local storage
  2. wait for the refresh token to expire (or edit the tokens in local storage)
  3. 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>
  );
}

Log output

``` [DEBUG] 15:01.307 AuthClass - getting current authenticated user ConsoleLogger.js:127 [DEBUG] 15:01.308 AuthClass - getting current authenticated user 2ConsoleLogger.js:127 [DEBUG] 15:01.317 AuthClass - get current authenticated userpool user VM312:1 POST https://cognito-idp.eu-west-1.amazonaws.com/ 400 (anonymous) @ VM312:1 request @ Client.js:123 refreshSession @ CognitoUser.js:1366 getSession @ CognitoUser.js:1323 (anonymous) @ Auth.js:1371 step @ Auth.js:55 (anonymous) @ Auth.js:36 (anonymous) @ Auth.js:30 __awaiter @ Auth.js:26 (anonymous) @ Auth.js:1332 Promise.then (async) (anonymous) @ Auth.js:1332 AuthClass.currentUserPoolUser @ Auth.js:1330 (anonymous) @ Auth.js:1515 step @ Auth.js:55 (anonymous) @ Auth.js:36 fulfilled @ Auth.js:27 Promise.then (async) step @ Auth.js:29 (anonymous) @ Auth.js:30 __awaiter @ Auth.js:26 AuthClass.currentAuthenticatedUser @ Auth.js:1477 (anonymous) @ defaultServices.js:1 (anonymous) @ tslib.es6.js:15 (anonymous) @ tslib.es6.js:15 (anonymous) @ tslib.es6.js:15 n @ tslib.es6.js:15 getCurrentUser @ defaultServices.js:1 getCurrentUser @ index.js:1 Interpreter.exec @ interpreter.js:863 Interpreter.execute @ interpreter.js:200 Interpreter.update @ interpreter.js:226 (anonymous) @ interpreter.js:479 Scheduler.process @ scheduler.js:65 Scheduler.initialize @ scheduler.js:28 Interpreter.start @ interpreter.js:478 (anonymous) @ useInterpret.js:93 commitHookEffectListMount @ react-dom.development.js:20573 commitLifeCycles @ react-dom.development.js:20634 commitLayoutEffects @ react-dom.development.js:23426 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23151 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22990 performSyncWorkOnRoot @ react-dom.development.js:22329 scheduleUpdateOnFiber @ react-dom.development.js:21881 updateContainer @ react-dom.development.js:25482 (anonymous) @ react-dom.development.js:26021 unbatchedUpdates @ react-dom.development.js:22431 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020 render @ react-dom.development.js:26103 61871 @ main.tsx:13 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 __webpack_exec__ @ lib|url:1 (anonymous) @ lib|url:1 __webpack_require__.O @ chunk loaded:23 (anonymous) @ lib|url:1 webpackJsonpCallback @ jsonp chunk loading:523 (anonymous) @ main.js:1 Show 31 more frames VM312:1 POST https://cognito-idp.eu-west-1.amazonaws.com/ 400 (anonymous) @ VM312:1 request @ Client.js:123 refreshSession @ CognitoUser.js:1366 getSession @ CognitoUser.js:1323 (anonymous) @ Auth.js:1371 step @ Auth.js:55 (anonymous) @ Auth.js:36 (anonymous) @ Auth.js:30 __awaiter @ Auth.js:26 (anonymous) @ Auth.js:1332 Promise.then (async) (anonymous) @ Auth.js:1332 AuthClass.currentUserPoolUser @ Auth.js:1330 (anonymous) @ Auth.js:1515 step @ Auth.js:55 (anonymous) @ Auth.js:36 fulfilled @ Auth.js:27 Promise.then (async) step @ Auth.js:29 (anonymous) @ Auth.js:30 __awaiter @ Auth.js:26 AuthClass.currentAuthenticatedUser @ Auth.js:1477 (anonymous) @ defaultServices.js:1 (anonymous) @ tslib.es6.js:15 (anonymous) @ tslib.es6.js:15 (anonymous) @ tslib.es6.js:15 n @ tslib.es6.js:15 getCurrentUser @ defaultServices.js:1 getCurrentUser @ index.js:1 Interpreter.exec @ interpreter.js:863 Interpreter.execute @ interpreter.js:200 Interpreter.update @ interpreter.js:226 (anonymous) @ interpreter.js:479 Scheduler.process @ scheduler.js:65 Scheduler.initialize @ scheduler.js:28 Interpreter.start @ interpreter.js:478 (anonymous) @ useInterpret.js:93 commitHookEffectListMount @ react-dom.development.js:20573 commitLifeCycles @ react-dom.development.js:20634 commitLayoutEffects @ react-dom.development.js:23426 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23151 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22990 performSyncWorkOnRoot @ react-dom.development.js:22329 scheduleUpdateOnFiber @ react-dom.development.js:21881 updateContainer @ react-dom.development.js:25482 (anonymous) @ react-dom.development.js:26021 unbatchedUpdates @ react-dom.development.js:22431 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020 render @ react-dom.development.js:26103 61871 @ main.tsx:13 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 __webpack_exec__ @ lib|url:1 (anonymous) @ lib|url:1 __webpack_require__.O @ chunk loaded:23 (anonymous) @ lib|url:1 webpackJsonpCallback @ jsonp chunk loading:523 (anonymous) @ main.js:1 Show 31 more frames ConsoleLogger.js:139 [DEBUG] 15:11.321 Hub - Dispatching to auth with {event: 'tokenRefresh_failure', data: NotAuthorizedException: Refresh Token has expired at http://localhost:4203/vendor.js:97951:19, message: 'Failed to retrieve new token'} ConsoleLogger.js:139 [DEBUG] 15:11.321 Hub - Dispatching to auth with {event: 'tokenRefresh_failure', data: NotAuthorizedException: Refresh Token has expired at http://localhost:4203/vendor.js:97951:19, message: 'Failed to retrieve new token'} ConsoleLogger.js:139 [DEBUG] 15:11.322 Hub - Dispatching to auth with {event: 'tokenRefresh_failure', data: NotAuthorizedException: Refresh Token has expired at http://localhost:4203/vendor.js:97951:19, message: 'Failed to retrieve new token'} ConsoleLogger.js:139 [DEBUG] 15:11.322 AuthClass - Failed to get the user session ConsoleLogger.js:127 [DEBUG] 15:11.322 Credentials - removing aws-amplify-federatedInfo from storage ConsoleLogger.js:139 [DEBUG] 15:11.322 Hub - Dispatching to auth with {event: 'signOut', data: null, message: 'A user has been signed out'} ConsoleLogger.js:139 [DEBUG] 15:11.322 Hub - Dispatching to auth with {event: 'signOut', data: null, message: 'A user has been signed out'} ```

aws-exports.js

No response

Manual configuration

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

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

Cross-posting in amplify-ui repo https://github.com/aws-amplify/amplify-ui/issues/1773

wlee221 commented 2 years ago

This is fixed in the UI side; aws-amplify/amplify-ui#1683

github-actions[bot] commented 1 year ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server amplify-help forum.