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

Increased latency when using `withSSRContext` #10976

Closed jporsay closed 1 year ago

jporsay commented 1 year ago

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` System: OS: macOS 13.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 11.58 GB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm Browsers: Chrome: 109.0.5414.119 Firefox: 109.0 Safari: 16.2 npmPackages: @amplitude/ampli: ^1.30.1 => 1.30.1 @amplitude/analytics-browser: ^1.6.7 => 1.6.7 @ampproject/toolbox-optimizer: undefined () @aws-amplify/ui-react: ^4.2.1 => 4.2.1 @aws-amplify/ui-react-internal: undefined () @aws-sdk/client-cognito-identity-provider: ^3.241.0 => 3.241.0 @babel/core: undefined () @babel/runtime: 7.15.4 @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 @edge-runtime/primitives: 2.0.0 @faker-js/faker: ^7.6.0 => 7.6.0 @flatfile/adapter: ^2.9.6 => 2.9.6 @floating-ui/react-dom: ^1.0.1 => 1.0.1 (0.7.2) @floating-ui/react-dom-interactions: ^0.13.2 => 0.13.2 @hapi/accept: undefined () @headlessui/react: ^1.7.7 => 1.7.7 @heroicons/react: ^2.0.13 => 2.0.13 @hookform/resolvers: ^2.9.10 => 2.9.10 @hookform/resolvers/ajv: 1.0.0 @hookform/resolvers/class-validator: 1.0.0 @hookform/resolvers/computed-types: 1.0.0 @hookform/resolvers/io-ts: 1.0.0 @hookform/resolvers/joi: 1.0.0 @hookform/resolvers/nope: 1.0.0 @hookform/resolvers/superstruct: 1.0.0 @hookform/resolvers/typanion: 1.0.0 @hookform/resolvers/vest: 1.0.0 @hookform/resolvers/yup: 1.0.0 @hookform/resolvers/zod: 1.0.0 @hubspot/api-client: ^8.2.0 => 8.2.0 @napi-rs/triples: undefined () @next/bundle-analyzer: ^13.1.1 => 13.1.6 @next/react-dev-overlay: undefined () @nrwl/cli: 15.3.0 => 15.3.0 @nrwl/cypress: 15.3.0 => 15.3.0 @nrwl/eslint-plugin-nx: 15.3.0 => 15.3.0 @nrwl/jest: 15.3.0 => 15.3.0 @nrwl/linter: 15.3.0 => 15.3.0 @nrwl/next: 15.3.0 => 15.3.0 @nrwl/react: 15.3.0 => 15.3.0 @nrwl/web: 15.3.0 => 15.3.0 @nrwl/workspace: 15.3.0 => 15.3.0 @prisma/client: ^4.8.0 => 4.8.0 @prisma/instrumentation: ^4.8.0 => 4.8.0 @segment/ajv-human-errors: undefined () @sentry/nextjs: ^7.28.1 => 7.37.1 @sentry/profiling-node: ^0.0.12 => 0.2.0 @sentry/replay: ^7.28.1 => 7.37.1 @sentry/tracing: ^7.28.1 => 7.37.1 @tailwindcss/forms: ^0.5.3 => 0.5.3 @tanstack/react-query: ^4.19.1 => 4.19.1 @tanstack/react-query-devtools: ^4.19.1 => 4.19.1 @tanstack/react-table: ^8.7.4 => 8.7.4 @testing-library/react: 13.4.0 => 13.4.0 @trpc/client: ^10.7.0 => 10.7.0 @trpc/next: ^10.7.0 => 10.7.0 @trpc/react: ^10.0.0-proxy-beta.20 => 10.0.0-proxy-beta.20 @trpc/react-query: ^10.7.0 => 10.7.0 @trpc/server: ^10.7.0 => 10.7.0 @types/jest: 29.2.4 => 29.2.4 @types/node: 16.18.0 => 16.18.0 (14.18.33) @types/react: 18.0.26 => 18.0.26 @types/react-datepicker: ^4.8.0 => 4.8.0 @types/react-dom: 18.0.10 => 18.0.10 @types/react-gtm-module: ^2.0.1 => 2.0.1 @types/w3c-web-usb: ^1.0.6 => 1.0.6 @typescript-eslint/eslint-plugin: ^5.45.1 => 5.45.1 @typescript-eslint/parser: ^5.45.1 => 5.45.1 @vercel/nft: undefined () acorn: undefined () amazon-cognito-identity-js: ^6.1.2 => 6.1.2 (6.1.1) amphtml-validator: undefined () anser: undefined () appwithi18n: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () autoprefixer: 10.4.13 => 10.4.13 aws-amplify: ^5.0.7 => 5.0.7 babel-jest: 29.3.1 => 29.3.1 (28.1.3) babel-packages: undefined () browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () chalk: undefined () chargebee-typescript: ^2.15.0 => 2.15.0 ci-info: undefined () cli-select: undefined () client-only: 0.0.1 clsx: ^1.2.1 => 1.2.1 comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () cookies-next: ^2.1.1 => 2.1.1 core-js: ^3.26.1 => 3.26.1 cross-spawn: undefined () crypto-browserify: undefined () css.escape: undefined () cssnano-simple: undefined () cypress: ^11.2.0 => 11.2.0 data-uri-to-buffer: undefined () date-fns: ^2.29.3 => 2.29.3 debug: undefined () deepmerge: ^4.2.2 => 4.2.2 devalue: undefined () domain-browser: undefined () dynamicnamespaces: undefined () echarts: ^5.4.1 => 5.4.1 echarts-for-react: ^3.0.2 => 3.0.2 edge-runtime: undefined () escpos-buffer: ^2.0.2 => 2.0.2 eslint: ~8.30.0 => 8.30.0 eslint-config-next: ^13.1.1 => 13.1.1 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.6.1 => 6.6.1 eslint-plugin-prettier: ^4.2.1 => 4.2.1 eslint-plugin-react: 7.31.11 => 7.31.11 eslint-plugin-react-hooks: 4.6.0 => 4.6.0 events: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () get-orientation: undefined () gett: undefined () glob: undefined () gzip-size: undefined () http-proxy: undefined () https-browserify: undefined () husky: ^8.0.2 => 8.0.2 i18nprovider: undefined () icss-utils: undefined () ignore-loader: undefined () image-size: undefined () index: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () jest: 29.3.1 => 29.3.1 jest-worker: undefined () jose: ^4.11.1 => 4.11.1 jotai: ^1.11.2 => 1.11.2 json5: undefined () jsonwebtoken: undefined () lint-staged: ^13.1.0 => 13.1.0 loader: undefined () loader-utils: undefined () loadnamespaces: undefined () lodash.curry: undefined () lru-cache: undefined () micromatch: undefined () mini-css-extract-plugin: undefined () nanoid: undefined () native-url: undefined () neo-async: undefined () next: ^13.1.1 => 13.1.6 next-translate: qbicdev/next-translate#typescript-compiler => 2.0.0-experimental.3 node-fetch: undefined () node-html-parser: undefined () nx: 15.3.0 => 15.3.0 ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () platform: undefined () postcss: 8.4.19 => 8.4.19 (8.4.14) postcss-flexbugs-fixes: undefined () postcss-modules-extract-imports: undefined () postcss-modules-local-by-default: undefined () postcss-modules-scope: undefined () postcss-modules-values: undefined () postcss-preset-env: undefined () postcss-safe-parser: undefined () postcss-scss: undefined () postcss-value-parser: undefined () prettier: ^2.8.1 => 2.8.1 prisma: ^4.8.0 => 4.8.0 process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: ^18.2.0 => 18.2.0 (18.3.0-next-3ba7add60-20221201) react-datepicker: ^4.8.0 => 4.8.0 react-dom: ^18.2.0 => 18.2.0 (18.3.0-next-3ba7add60-20221201) react-gtm-module: ^2.0.11 => 2.0.11 react-hook-form: ^8.0.0-alpha.4 => 8.0.0-alpha.4 react-hot-toast: ^2.4.0 => 2.4.0 react-hotjar: ^5.3.0 => 5.3.0 react-is: 18.2.0 react-query: ^3.39.2 => 3.39.2 react-refresh: 0.12.0 react-server-dom-webpack: undefined () react-test-renderer: 18.2.0 => 18.2.0 regenerator-runtime: 0.13.11 => 0.13.11 (0.13.4) sass-loader: undefined () scheduler: undefined () schema-utils: undefined () semver: undefined () send: undefined () server-only: 0.0.1 setimmediate: undefined () setlanguage: undefined () shell-quote: undefined () source-map: undefined () stacktrace-parser: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () superjson: ^1.12.0 => 1.12.0 tailwind-merge: ^1.8.1 => 1.8.1 tailwindcss: 3.2.4 => 3.2.4 tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () trans: undefined () transcore: undefined () transtext: undefined () ts-jest: 29.0.3 => 29.0.3 ts-node: ~10.9.1 => 10.9.1 tslib: ^2.4.1 => 2.4.1 (1.14.1, 2.5.0, 2.3.0, 1.10.0) tty-browserify: undefined () typescript: ~4.9.3 => 4.9.3 (3.9.10, 4.5.2) ua-parser-js: undefined () undici: undefined () unistore: undefined () usetranslation: undefined () util: undefined () vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () withtranslation: undefined () ws: undefined () xlsx: ^0.18.5 => 0.18.5 zod: ^3.20.2 => 3.20.2 zustand: ^4.1.5 => 4.1.5 npmGlobalPackages: corepack: 0.14.2 jsonlint: 1.6.3 npm-check-updates: 16.6.5 npm: 8.19.2 nx: 15.4.4 turbo: 1.7.0 yarn: 1.22.19 ```

Describe the bug

Whenever I call Auth.currentAuthenticatedUser within SSR, I notice that there's an HTTP request being done, not sure where and what for.

Expected behavior

My expectation is that on Server-side requests, cognito uses available information from cookies and the operation is instant, therefore, no HTTP requests are made since I'm only interested on refreshing if the token has expired (not the case since it happens on every request).

Reproduction steps

  1. Within an API function configure ssr and call currentAuthenticatedUser.
  2. Within the UI, login so that cookies are set.
  3. Execute said API call.

Code Snippet

const { Auth } = withSSRContext({ req: ctx.req });
const start = new Date();
  console.log('Auth.currentAuthenticatedUser...', start);
  const user: CognitoUserExt = await Auth.currentAuthenticatedUser();
  const end = new Date();
  console.log('Auth.currentAuthenticatedUser...', end);
  console.log(
    'Auth.currentAuthenticatedUser took',
    end.getTime() - start.getTime(),
    'ms'
  );

Log output

``` // Put your logs below this line Auth.currentAuthenticatedUser... 2023-02-15T20:57:55.707Z Auth.currentAuthenticatedUser... 2023-02-15T20:57:56.252Z Auth.currentAuthenticatedUser took 545 ms ```

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

nadetastic commented 1 year ago

Hi @jporsay thanks for opening this issue.

Auth.currentAuthenticatedUser() shouldn't not make a network request unless you pass in { bypassCache:true }. However Im curious how you are analyzing that a network request is being made?

jporsay commented 1 year ago

@nadetastic Given that timing currentAuthenticatedUser shows durations between 600ms and 2s (which is what my usual latency with Cognito is), my assumption was that there's an HTTP request being made, however we aren't bypassing cache and adding NODE_DEBUG=http environment variable doesn't show any HTTP call being made, which confuses me as to why that latency.

An interesting thing is that a second invocation of the currentAuthenticatedUser within the same request takes 0ms.

Having said that, our expectation would be that currentAuthenticatedUser was an almost instant call with a valid JWT.

jporsay commented 1 year ago

We are using an authenticated session, yes.

And they shouldn't be expired credentials, since this is consistent with every request. We have an API that is used for filtering options in a list and every request done to it after user input (think writing 'fr', waiting a second, api request is made taking an extra ~600ms due to currentAuthenticatedUser, continue writing 'free', waiting a second, another api request is made with the extra time).

The browser tab shows no requests besides the single API request and the latency is reported server-side.

nadetastic commented 1 year ago

Got it @jporsay, where do you have this hosted (ex Amplify hosting)? And is it the same experience when running a build locally? Im curious if the latency is more specific to the execution on the backend/server.

jporsay commented 1 year ago

This happens both in localhost as well as within our host (Vercel).

nadetastic commented 1 year ago

Got it @jporsay, thanks for confirming. This looks related to aws-amplify/amplify-js#8918, and will update this title to reflect the issue better. So far I don't believe that Auth.currentAuthenticatedUser making a network request.

nadetastic commented 1 year ago

aws-amplify/amplify-hosting#3855

nadetastic commented 1 year ago

Closing this issue to consolidate and track on aws-amplify/amplify-hosting#3855