Storage.put uses expired token

[makeitraina]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Storage

Amplify Version

v5

Amplify Categories

storage, auth

Backend

Other

Environment information

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 234.17 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Brave Browser: 115.1.56.20
    Chrome: 132.0.6834.160
    Safari: 17.6
  npmPackages:
    @ag-grid-community/client-side-row-model: ^27.0.0 => 27.3.0 
    @ag-grid-community/core: ^27.0.0 => 27.3.0 
    @ag-grid-community/csv-export: ^27.0.0 => 27.3.0 
    @ag-grid-community/react: ^27.0.0 => 27.3.0 
    @aws-amplify/auth: 5.6.0 => 5.6.0 
    @aws-amplify/core: 5.8.0 => 5.8.0 
    @aws-amplify/core/internals/aws-client-utils:  undefined ()
    @aws-amplify/core/internals/aws-client-utils/composers:  undefined ()
    @aws-amplify/core/internals/aws-clients/pinpoint:  undefined ()
    @aws-sdk/client-cognito-identity-provider: ^3.259.0 => 3.259.0 
    @aws-sdk/client-ssm: ^3.259.0 => 3.259.0 
    @aws-sdk/credential-provider-sso: ^3.259.0 => 3.259.0 (3.186.0)
    @aws-sdk/types: ^3.29.0 => 3.29.0 (3.6.1, 3.257.0, 3.186.0)
    @babel/core: ^7.0.0 => 7.24.5 (7.23.2, 7.4.0)
    @babel/node: ^7.0.0 => 7.23.9 
    @babel/plugin-proposal-class-properties: ^7.18.6 => 7.18.6 
    @babel/plugin-transform-optional-chaining: ^7.22.15 => 7.24.5 
    @babel/plugin-transform-react-inline-elements: ^7.0.0 => 7.24.1 
    @babel/preset-env: ^7.0.0 => 7.24.5 
    @babel/preset-react: ^7.0.0 => 7.24.1 
    @babel/preset-typescript: ^7.8.3 => 7.8.3 
    @contentful/rich-text-react-renderer: ^15.19.6 => 15.19.6 
    @contentful/rich-text-types: ^16.3.5 => 16.3.5 
    @cyntler/react-doc-viewer: ^1.17.0 => 1.17.0 
    @cypress/angular:  0.0.0-development 
    @cypress/mount-utils:  0.0.0-development 
    @cypress/react:  0.0.0-development 
    @cypress/react18:  0.0.0-development 
    @cypress/svelte:  0.0.0-development 
    @cypress/vue:  0.0.0-development 
    @cypress/vue2:  0.0.0-development 
    @date-io/moment: 1.x => 1.3.13 
    @jest/globals: ^29.7.0 => 29.7.0 
    @loadable/component: ^5.12.0 => 5.12.0 
    @material-ui/core: ^4.11.3 => 4.12.3 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/lab: ^4.11.3-deprecations.1 => 4.11.3-deprecations.1 
    @material-ui/pickers: ^3.3.10 => 3.3.10 
    @material-ui/styles: ^4.11.3 => 4.11.4 
    @reduxjs/toolkit: ^1.8.0 => 1.8.0 
    @reduxjs/toolkit-query:  1.0.0 
    @reduxjs/toolkit-query-react:  1.0.0 
    @sentry/integrations: ^7.31.1 => 7.77.0 
    @sentry/react: ^7.31.1 => 7.31.1 
    @sentry/tracing: ^7.31.1 => 7.31.1 
    @stripe/react-stripe-js: ^2.8.1 => 2.8.1 
    @stripe/stripe-js: ^4.9.0 => 4.9.0 
    @testing-library/jest-dom: ^6.1.4 => 6.1.4 (6.6.3)
    @testing-library/react: ^12.1.1 => 12.1.5 
    @testing-library/react-hooks: ^8.0.1 => 8.0.1 
    @testing-library/user-event: 14.2.5 => 14.2.5 
    @tippyjs/react: ^4.2.6 => 4.2.6 
    @tiptap/core: ^2.2.4 => 2.2.4 
    @tiptap/extension-bubble-menu: ^2.2.4 => 2.2.4 
    @tiptap/extension-image: ^2.2.4 => 2.2.4 
    @tiptap/extension-link: ^2.2.4 => 2.2.4 
    @tiptap/extension-placeholder: ^2.2.4 => 2.2.4 
    @tiptap/extension-underline: ^2.2.4 => 2.2.4 
    @tiptap/pm: ^2.2.4 => 2.2.4 
    @tiptap/react: ^2.2.4 => 2.2.4 
    @tiptap/starter-kit: ^2.2.4 => 2.2.4 
    @tiptap/suggestion: ^2.2.4 => 2.2.4 
    @tryghost/content-api: ^1.11.5 => 1.11.5 
    @types/classnames: ^2.2.9 => 2.2.9 
    @types/css-mediaquery: ^0.1.0 => 0.1.0 
    @types/express: ^4.17.6 => 4.17.6 
    @types/googlemaps: ^3.39.3 => 3.39.3 
    @types/history: ^4.7.5 => 4.7.5 
    @types/jest: ^29.5.11 => 29.5.11 
    @types/loadable__component: ^5.10.0 => 5.10.0 
    @types/lodash: ^4.14.149 => 4.14.149 (4.17.6)
    @types/node: ^13.7.0 => 13.7.0 (20.14.2, 14.18.21, 14.14.16)
    @types/papaparse: ^5.3.7 => 5.3.7 (5.3.15)
    @types/react: ^17.0.0 => 17.0.38 (17.0.69, 16.14.60)
    @types/react-color: 2.17.5 => 2.17.5 
    @types/react-dom: ^17.0.0 => 17.0.11 (17.0.22, 18.3.0)
    @types/react-input-mask: ^2.0.5 => 2.0.5 
    @types/react-phone-number-input: ^3.0.6 => 3.0.6 
    @types/react-redux: ^7.1.7 => 7.1.7 (7.1.23)
    @types/react-slick: ^0.23.4 => 0.23.4 
    @types/react-virtualized-auto-sizer: ^1.0.0 => 1.0.0 
    @types/react-window: ^1.8.2 => 1.8.2 
    @types/segment-analytics: ^0.0.33 => 0.0.33 
    @types/testing-library__jest-dom: ^6.0.0 => 6.0.0 
    @types/textfit: ^2.4.2 => 2.4.2 
    @types/tryghost__content-api: ^1.3.11 => 1.3.11 
    @types/uuid: ^7.0.2 => 7.0.2 
    @types/webpack-env: ^1.18.5 => 1.18.5 
    @types/yup: ^0.26.35 => 0.26.35 
    @typescript-eslint/eslint-plugin: ^6.9.0 => 6.9.0 
    @typescript-eslint/parser: 6.9.0 => 6.9.0 
    @visx/curve: ^3.3.0 => 3.3.0 
    @visx/event: ^3.3.0 => 3.3.0 
    @visx/group: ^3.3.0 => 3.3.0 
    @visx/scale: ^3.5.0 => 3.5.0 
    @visx/shape: ^3.5.0 => 3.5.0 
    @visx/tooltip: ^3.3.0 => 3.3.0 
    @visx/vendor: ^3.5.0 => 3.5.0 
    amazon-cognito-identity-js: 6.3.1 => 6.3.1 
    amazon-cognito-identity-js/internals:  undefined ()
    array-move: ^2.2.1 => 2.2.1 
    autoprefixer: ^8.1.0 => 8.6.5 (6.7.7, 9.5.0)
    autosuggest-highlight: ^3.1.1 => 3.1.1 
    aws-amplify: ^5.3.6 => 5.3.6 
    axios: ^0.28.0 => 0.28.0 (0.26.0, 0.27.2, 0.17.1, 1.7.2)
    babel-loader: ^9.0.0 => 9.1.3 
    babel-plugin-inline-react-svg: ^2.0.2 => 2.0.2 
    benchmark-uuid:  undefined ()
    body-parser: ^1.18.2 => 1.18.3 (1.20.2)
    browser-resolve: ^2.0.0 => 2.0.0 
    browser-sync: ^2.23.6 => 2.26.3 
    browserify-css: 0.12.0 => 0.12.0 
    browserify-css-examples:  0.1.0 
    buffer: ^6.0.3 => 6.0.3 (4.9.2, 5.7.1)
    chokidar: ^3.0.0 => 3.5.3 (2.1.5, 3.6.0)
    class-variance-authority: ^0.7.1 => 0.7.1 (0.7.0)
    classnames: ^2.2.6 => 2.2.6 (2.5.1)
    clipboard-copy: ^3.1.0 => 3.1.0 
    clsx: ^1.1.0 => 1.1.0 (2.1.0, 1.0.4, 2.1.1, 2.0.0)
    concurrently: ^8.2.2 => 8.2.2 
    cookie-parser: ^1.4.3 => 1.4.4 
    copilot-design-system: 0.6.20 => 0.6.20 
    core-js: ^3 => 3.37.0 (3.39.0)
    cors: ^2.8.5 => 2.8.5 
    countries-list: ^3.1.0 => 3.1.0 
    crypto-js: ^4.2.0 => 4.2.0 
    css-loader: ^0.28.11 => 0.28.11 
    css-mediaquery: ^0.1.2 => 0.1.2 
    cssnano: ^7.0.6 => 7.0.6 (3.10.0)
    cypress: ^12.7.0 => 12.7.0 
    demo:  1.0.0 
    dotenv: ^16.0.1 => 16.0.1 
    enzyme: ^3.3.0 => 3.9.0 
    eslint: ^8.56.0 => 8.56.0 
    eslint-config-airbnb: ^19.0.0 => 19.0.4 
    eslint-config-prettier: ^2.9.0 => 2.10.0 
    eslint-import-resolver-node: ^0.3.2 => 0.3.2 (0.3.9)
    eslint-import-resolver-typescript: ^3.7.0 => 3.7.0 
    eslint-plugin-css-modules: ^2.7.5 => 2.11.0 
    eslint-plugin-import: ^2.31.0 => 2.31.0 
    eslint-plugin-jsx-a11y: ^6.5.1 => 6.5.1 
    eslint-plugin-prettier: ^2.6.0 => 2.7.0 
    eslint-plugin-react: ^7.29.4 => 7.29.4 
    eslint-plugin-react-hooks: ^4.3.0 => 4.3.0 
    example:  0.0.0 
    express: ^4.16.3 => 4.19.2 
    flagsmith: ^3.0.0 => 3.8.1 
    flagsmith-nodejs: ^3.1.0 => 3.1.0 
    formik: ^2.2.9 => 2.2.9 
    front-matter: ^2.3.0 => 2.3.0 
    generateUrls:  9.0.1 
    glob: ^7.1.2 => 7.1.3 (10.3.10, 7.2.3)
    highlight.run: ^7.0.0 => 7.0.0 
    history: ^4.7.2 => 4.10.1 
    html-react-parser: ^5.2.2 => 5.2.2 
    html-to-image-ext:  1.9.1 
    husky: ^4.3.6 => 4.3.6 
    identity-obj-proxy: ^3.0.0 => 3.0.0 
    intuit-oauth: ^3.0.2 => 3.0.2 
    is-mobile: ^2.0.0 => 2.0.0 
    isomorphic-style-loader: ^5.1.0 => 5.1.0 
    jest: ^29.7.0 => 29.7.0 
    jest-environment-jsdom: ^29.7.0 => 29.7.0 
    jsonwebtoken: ^9.0.0 => 9.0.1 (8.5.1, 9.0.2)
    jss: ^10.5.1 => 10.9.0 
    jwt-decode: ^3.1.2 => 3.1.2 
    kbar: ^0.1.0-beta.30 => 0.1.0-beta.30 
    lint-staged: ^13.2.0 => 13.2.0 
    locale-currency: ^0.0.2 => 0.0.2 
    localforage: ^1.10.0 => 1.10.0 
    lodash: ^4.17.21 => 4.17.21 
    markdown-it: ^12.3.2 => 12.3.2 (14.0.0)
    mkdirp: ^0.5.1 => 0.5.1 
    moment: ^2.29.4 => 2.29.4 
    moment-timezone: ^0.5.35 => 0.5.35 
    msw: ^1.3.1 => 1.3.1 
    normalize.css: ^8.0.1 => 8.0.1 
    notistack: latest-mui-v4 => 1.0.10 
    null-loader: ^0.1.1 => 0.1.1 
    opn-cli: ^3.1.0 => 3.1.0 
    papaparse: ^5.3.1 => 5.3.1 (5.4.1)
    patch-package: ^6.5.0 => 6.5.0 
    pixrem: ^4.0.1 => 4.0.1 
    pleeease-filters: ^4.0.0 => 4.0.0 
    postcss: ^8.2.0 => 8.4.49 (6.0.23, 5.2.18, 7.0.14, 8.4.38, 8.4.35)
    postcss-calc: ^6.0.1 => 6.0.2 (5.3.1, 10.0.2)
    postcss-color-function: ^4.0.1 => 4.1.0 
    postcss-custom-media: ^6.0.0 => 6.0.0 
    postcss-custom-properties: ^7.0.0 => 7.0.0 
    postcss-custom-selectors: ^4.0.1 => 4.0.1 
    postcss-flexbugs-fixes: ^3.3.0 => 3.3.1 
    postcss-import: ^11.1.0 => 11.1.0 (15.1.0)
    postcss-loader: ^8.1.1 => 8.1.1 
    postcss-media-minmax: ^3.0.0 => 3.0.0 
    postcss-nested: ^3.0.0 => 3.0.0 (6.0.1)
    postcss-nesting: ^13.0.1 => 13.0.1 
    postcss-pseudoelements: ^5.0.0 => 5.0.0 
    postcss-selector-matches: ^3.0.1 => 3.0.1 
    postcss-selector-not: ^3.0.1 => 3.0.1 
    postinstall-postinstall: ^2.1.0 => 2.1.0 
    prettier: ^2.0.5 => 2.8.8 
    process: ^0.11.10 => 0.11.10 
    qrcode.react: ^3.1.0 => 3.1.0 
    query-string: ^6.0.0 => 6.4.2 (6.14.1, 4.3.4)
    raw-loader: ^0.5.1 => 0.5.1 
    re-resizable: ^6.9.9 => 6.9.9 
    react: ^17.0.0 => 17.0.2 (16.12.0)
    react-color: ^2.18.1 => 2.18.1 
    react-deep-force-update: ^2.1.1 => 2.1.3 
    react-dev-utils: ^5.0.0 => 5.0.3 
    react-dnd: ^11.1.3 => 11.1.3 
    react-dnd-html5-backend: ^11.1.3 => 11.1.3 
    react-dom: ^17.0.0 => 17.0.2 
    react-draggable: ^4.4.3 => 4.4.3 
    react-dropzone: ^14.0.0 => 14.2.3 (11.0.1, 11.3.4)
    react-easy-crop: ^3.1.1 => 3.1.1 
    react-error-overlay: ^4.0.0 => 4.0.1 
    react-file-utils: 1.1.7 => 1.1.7 
    react-icons: ^4.1.0 => 4.1.0 
    react-is: ^16.8.0 => 16.12.0 (16.13.1, 16.8.6, 17.0.2, 18.2.0)
    react-material-ui-carousel: ^2.2.3 => 2.3.11 
    react-number-format: ^4.9.0 => 4.9.1 
    react-otp-input: 3.0.0 => 3.0.0 
    react-pdf: 5.7.2 => 5.7.2 (9.2.1)
    react-phone-number-input: ^3.1.8 => 3.1.8 
    react-phone-number-input-core:  1.0.0 
    react-phone-number-input-flags:  1.0.0 
    react-phone-number-input-input-core:  1.0.0 
    react-phone-number-input-input-max:  1.0.0 
    react-phone-number-input-input-min:  1.0.0 
    react-phone-number-input-input-mobile:  1.0.0 
    react-phone-number-input-max:  1.0.0 
    react-phone-number-input-min:  1.0.0 
    react-phone-number-input-mobile:  1.0.0 
    react-phone-number-input-react-native-input:  1.0.0 
    react-plaid-link: ^3.2.0 => 3.2.0 
    react-player: ^2.7.2 => 2.7.2 (2.10.1)
    react-redux: ^7.2.6 => 7.2.6 
    react-responsive-carousel: ^3.2.23 => 3.2.23 
    react-sortable-hoc: ^2.0.0 => 2.0.0 
    react-virtualized-auto-sizer: ^1.0.6 => 1.0.6 
    react-window: ^1.8.6 => 1.8.6 
    redux: ^4.1.2 => 4.1.2 (4.0.5)
    redux-persist: ^6.0.0 => 6.0.0 
    redux-persist/integration/react:  undefined ()
    redux-thunk: ^2.4.1 => 2.4.1 
    rimraf: ^2.6.2 => 2.6.3 (3.0.2, 2.7.1)
    sass: ^1.49.9 => 1.49.9 
    sass-loader: ^10.2.0 => 10.2.1 
    serialize-javascript: ^3.1.0 => 3.1.0 (6.0.0)
    source-map-loader: ^0.2.4 => 0.2.4 
    source-map-support: ^0.5.4 => 0.5.21 (0.5.13)
    start-server-and-test: ^2.0.0 => 2.0.0 
    stream-chat: ^8.40.0 => 8.40.9 
    stream-chat-react: 11.22.0 => 11.22.0 
    stripe: ^17.3.1 => 17.3.1 
    stylelint: ^9.1.3 => 9.10.1 
    stylelint-config-standard: ^18.2.0 => 18.2.0 
    stylelint-order: ^0.8.1 => 0.8.1 
    sync:  9.0.1 
    tailwindcss: ^3.4.1 => 3.4.1 
    textfit: ^2.4.0 => 2.4.0 
    tippy-react-headless:  0.1.0 
    ts-jest: ^29.2.5 => 29.2.5 
    typescript: 5.5.4 => 5.5.4 
    typescript-eslint: ^0.0.1-alpha.0 => 0.0.1-alpha.0 
    typings-for-css-modules-loader: ^1.7.0 => 1.7.0 
    universal-router: ^9.0.0 => 9.0.1 
    url: ^0.11.0 => 0.11.0 
    uuid: ^3.2.1 => 3.3.2 (3.4.0, 8.3.2, 9.0.1, 2.0.3)
    webpack: ^5.76.0 => 5.76.0 
    webpack-assets-manifest: ^5.0.0 => 5.1.0 
    webpack-bundle-analyzer: ^2.11.1 => 2.13.1 
    webpack-deadcode-plugin: ^0.1.17 => 0.1.17 
    webpack-dev-middleware: ^5.3.4 => 5.3.4 
    webpack-hot-middleware: ^2.21.2 => 2.24.3 
    webpack-node-externals: ^2.5.2 => 2.5.2 
    whatwg-fetch: ^3.6.2 => 3.6.2 
    yargs: ^17.3.1 => 17.3.1 (6.4.0, 17.7.2, 6.6.0)
    yup: ^0.28.3 => 0.28.3 
    zod: ^3.22.4 => 3.22.4 
    zod-formik-adapter: ^1.2.0 => 1.2.0 
  npmGlobalPackages:
    @withgraphite/graphite-cli: 1.4.11
    aws-sso-credentials-getter: 2.0.1
    corepack: 0.23.0
    dynamodb-admin: 4.6.1
    envinfo: 7.14.0
    npm: 10.2.4
    serverless-api-gateway-caching: 1.6.0
    serverless-plugin-conditional-functions: 1.0.7
    serverless-plugin-warmup: 5.3.1
    serverless-step-functions: 3.11.1
    serverless: 2.72.2
    yarn: 1.22.22
    zapier-platform-cli: 15.11.1

Describe the bug

When uploading files to S3 using Storage.put I will receive an error ExpiredToken: The provided token has expired. This only happens if I've left my window open for > 1hr. When I first start the app and upload everything works correctly.

Expected behavior

Uploads should still work after an hour of inactivity without hard refreshing/restarting the app.

The token should be refreshed (which it looks like is happening from the debug logs) and upload should use the non expired tokens.

Reproduction steps

1. setup an app using amplify v5 with storage (with existing resources)
2. upload a files using Storage.put
3. wait for an hour and upload the file again.

Code Snippet

const uploadFile = (key: string, file: File) => {
   return Storage.put(key, file, {
             level: 'protected',
             progressCallback,
         },
        contentType: file.type,
      });
}

const progressCallback = (progressData: ProgressData) => {
    // left this details out, its not relevant, Im just showing that this function is defined.
      ....
};

Log output

No response

aws-exports.js

No response

Manual configuration

No response

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

No response

[cwomack]

Hello, @makeitraina and thanks for opening this issue. This issue should be resolved in v6 of Amplify (current major version) and want to see if you have the ability to upgrade to that first before delving into the v5 side of things. We have migration guides available for Storage and other categories as well. Let us know if this works and if you can upgrade to v6!

[makeitraina]

I would love to upgrade, but its such a big undertaking. We rely on Auth as well and there is a lot of logic that would need to be switched over.

Separately, I spent a lot of time debugging the code and I think I found the problem. In put why dont we call _ensureCredentials like we do for all the other s3 methods?

[cwomack]

@makeitraina, understandable that the upgrade from v5 to v6 requires a bit of heavy lifting with all the changes to API's.

It does appear however that you're quite a few versions behind the latest v5 (currently the latest is 5.3.27), and there were some changes and fixes made in some of those more recent version. Can you upgrade to the latest v5 and see if the behavior is resolved?