Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fetchAuthSession is slow in nextjs(v14) middleware #14079

Closed
3 tasks done
ganesh-cidc opened this issue Dec 13, 2024 · 7 comments
Closed
3 tasks done

fetchAuthSession is slow in nextjs(v14) middleware #14079

ganesh-cidc opened this issue Dec 13, 2024 · 7 comments
Assignees
Labels
Auth Related to Auth components/category Next.js pending-maintainer-response Issue is pending a response from the Amplify team. question General question

Comments

@ganesh-cidc
Copy link

ganesh-cidc commented Dec 13, 2024

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Other

Environment information

# Put output below this line
  System:
    OS: macOS 15.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 2.22 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
  Browsers:
    Edge: 129.0.2792.65
    Safari: 18.1
  npmPackages:
    @aws-amplify/adapter-nextjs: ^1.2.7 => 1.2.7 
    @aws-amplify/adapter-nextjs/api:  undefined ()
    @aws-amplify/adapter-nextjs/data:  undefined ()
    @aws-sdk/client-cloudwatch-logs: ^3.654.0 => 3.654.0 
    @hookform/resolvers: ^3.9.0 => 3.9.0 
    @hookform/resolvers/ajv:  1.0.0 
    @hookform/resolvers/arktype:  2.0.0 
    @hookform/resolvers/class-validator:  1.0.0 
    @hookform/resolvers/computed-types:  1.0.0 
    @hookform/resolvers/effect-ts:  1.0.0 
    @hookform/resolvers/fluentvalidation-ts:  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/typebox:  1.0.0 
    @hookform/resolvers/typeschema:  1.0.0 
    @hookform/resolvers/valibot:  1.0.0 
    @hookform/resolvers/vest:  1.0.0 
    @hookform/resolvers/vine:  1.0.0 
    @hookform/resolvers/yup:  1.0.0 
    @hookform/resolvers/zod:  1.0.0 
    @nrwl/storybook: ^19.4.3 => 19.4.3 
    @nx/eslint-plugin: ^19.4.2 => 19.4.2 
    @nx/jest: ^19.4.3 => 19.4.3 
    @nx/next: ^19.4.3 => 19.4.3 
    @nx/playwright: ^19.4.3 => 19.4.3 
    @nx/react: ^19.4.2 => 19.4.3 
    @radix-ui/react-alert-dialog: ^1.1.1 => 1.1.1 
    @radix-ui/react-avatar: ^1.1.0 => 1.1.0 
    @radix-ui/react-checkbox: ^1.1.1 => 1.1.1 
    @radix-ui/react-dialog: ^1.1.1 => 1.1.1 (1.0.5)
    @radix-ui/react-dropdown-menu: ^2.1.1 => 2.1.1 
    @radix-ui/react-label: ^2.1.0 => 2.1.0 
    @radix-ui/react-popover: ^1.1.1 => 1.1.1 
    @radix-ui/react-select: ^2.1.1 => 2.1.1 
    @radix-ui/react-slider: ^1.2.1 => 1.2.1 
    @radix-ui/react-tabs: ^1.1.0 => 1.1.0 
    @radix-ui/react-toast: ^1.2.1 => 1.2.1 
    @radix-ui/react-tooltip: ^1.1.2 => 1.1.2 
    @rc-ex/core: ^1.4.0 => 1.4.0 
    @reduxjs/toolkit: ^2.2.6 => 2.2.6 
    @reduxjs/toolkit-query:  1.0.0 
    @reduxjs/toolkit-query-react:  1.0.0 
    @reduxjs/toolkit-react:  1.0.0 
    @storybook/addon-essentials: ^8.2.2 => 8.2.2 
    @storybook/addon-interactions: ^8.1.11 => 8.2.2 
    @storybook/addon-links: ^8.1.11 => 8.2.2 
    @storybook/builder-vite: ^8.2.2 => 8.2.2 
    @storybook/cli: ^8.1.11 => 8.2.2 
    @storybook/manager-api: ^8.2.1 => 8.2.2 
    @storybook/preview-api: ^8.2.2 => 8.2.2 
    @storybook/react: ^8.2.2 => 8.2.2 
    @storybook/react-vite: ^8.2.1 => 8.2.2 
    @storybook/test-runner: ^0.19.0 => 0.19.0 
    @storybook/theming: ^8.2.2 => 8.2.2 
    @svgr/webpack: ^8.1.0 => 8.1.0 
    @tanstack/react-table: ^8.19.2 => 8.19.2 
    @testing-library/jest-dom: ^6.4.6 => 6.4.6 (6.4.5)
    @testing-library/react: ^16.0.0 => 16.0.0 
    @testing-library/user-event: ^14.5.2 => 14.5.2 
    @trivago/prettier-plugin-sort-imports: ^4.3.0 => 4.3.0 
    @types/jest: ^29.5.12 => 29.5.12 
    @types/js-cookie: ^3.0.6 => 3.0.6 
    @types/mocha: ^10.0.7 => 10.0.7 
    @typescript-eslint/eslint-plugin: ^7.16.0 => 7.16.0 
    @typescript-eslint/parser: ^7.16.0 => 7.16.0 (7.2.0)
    async-mutex: ^0.5.0 => 0.5.0 
    autoprefixer: ^10.4.19 => 10.4.19 
    aws-amplify: ^6.4.0 => 6.4.0 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    class-variance-authority: ^0.7.0 => 0.7.0 
    cmdk: ^1.0.0 => 1.0.0 
    date-fns: ^3.6.0 => 3.6.0 (4.1.0)
    date-fns-tz: ^3.1.3 => 3.1.3 
    eslint: ^8.57.0 => 8.57.0 
    eslint-config-next: ^14.2.5 => 14.2.5 
    eslint-config-prettier: ^9.1.0 => 9.1.0 
    eslint-plugin-prettier: ^5.1.3 => 5.1.3 
    eslint-plugin-react: ^7.34.3 => 7.34.3 
    husky: ^9.0.11 => 9.0.11 
    jest: ^29.7.0 => 29.7.0 
    jest-environment-jsdom: ^29.7.0 => 29.7.0 
    lucide-react: ^0.407.0 => 0.407.0 
    pino: ^9.4.0 => 9.4.0 
    postcss: ^8.4.39 => 8.4.39 (8.4.31)
    prettier: ^3.3.3 => 3.3.3 
    prettier-plugin-tailwindcss: ^0.6.5 => 0.6.5 
    qrcode.react: ^3.1.0 => 3.1.0 
    react-day-picker: ^9.3.0 => 9.3.0 
    react-hook-form: ^7.52.1 => 7.52.1 
    react-idle-timer: ^5.7.2 => 5.7.2 
    react-redux: ^9.1.2 => 9.1.2 
    react-rnd: ^10.4.12 => 10.4.13 
    ringcentral-web-phone: 1.0.5 => 1.0.5 
    sharp: ^0.33.4 => 0.33.4 
    sip.js: ^0.21.2 => 0.21.2 
    storybook-dark-mode: ^4.0.2 => 4.0.2 
    tailwind-merge: ^2.4.0 => 2.4.0 
    tailwindcss: ^3.4.4 => 3.4.4 
    tailwindcss-animate: ^1.0.7 => 1.0.7 
    transport:  0.0.1 
    ts-jest: ^29.2.0 => 29.2.2 
    ts-node: ^10.9.2 => 10.9.2 (10.9.1)
    turbo: ^2.1.2 => 2.1.2 
    turborepo: ^0.0.1 => 0.0.1 
    vite: ^5.3.3 => 5.3.3 
    vite-tsconfig-paths: ^4.3.2 => 4.3.2 
    zod: ^3.23.8 => 3.23.8 
  npmGlobalPackages:
    corepack: 0.29.3
    npm: 10.8.3



Describe the bug

When using the fetchAuthSession function within middleware, it takes approximately 300-350ms for each call & sometimes more than that. This leads to a noticeable delay in routing, resulting in a sluggish user experience.

I have removed the fetchAuthSession and tried checking auth status based on if the cookie is available and it is very fast. I have setup in amplify in nextjs based on the docs here

Using nextjs 14.2.14 and testing in production build locally

Expected behavior

fetchAuthSession to resolve quickly for subsequent calls

Reproduction steps

  1. Setup an AWS Amplify Gen 1 project with Next 14 and AmplifyJS v6.
  2. Add the below code snippet in middleware

Code Snippet

// Put your code below this line.
const isAuthenticated = await runWithAmplifyServerContext({
    nextServerContext: { request, response },
    operation: async (contextSpec) => {
      try {
        const session = await fetchAuthSession(contextSpec);

        return Boolean(session.tokens?.idToken);
      } catch (error) {
        logger.error({
          functionName: 'Authentication middleware',
          message: error,
        });
        return false;
      }
    },
  });

Log output

// Put your logs below this line


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

@github-actions github-actions bot added pending-triage Issue is pending triage pending-maintainer-response Issue is pending a response from the Amplify team. labels Dec 13, 2024
@ganesh-cidc ganesh-cidc changed the title fetchAuthSession is slow in nextjs middleware fetchAuthSession is slow in nextjs(v14) middleware Dec 13, 2024
@cwomack cwomack self-assigned this Dec 13, 2024
@cwomack cwomack added Auth Related to Auth components/category Next.js labels Dec 13, 2024
@HuiSF
Copy link
Member

HuiSF commented Dec 13, 2024

Hi @ganesh-cidc thanks for opening this issue, currently the fetchAuthSession does the following to return a valid session

  1. Validate client sent tokens are issued by your Cognito resource
  2. refresh tokens if client sent tokens are expired
  3. fetch AWS credentials (if the Cognito identity pool is configured)

The step 1 requires fetching the JWKs from your Cognito User Pool endpoint, and current there is a known issue that the JWKs is being excessively being fetched which adds unnecessary latency. We've implemented a fix and it's expected to be release soon. Please following the linked issue for updates.

Step 2 is required to ensure the client persisted user session can be refreshed.

Step 3 is optional as I mentioned, if you are not expecting to use AWS credentials on your server side, e.g. not using IAM with the GraphQL category or using the Storage category, you don't need to configure the identity pool with Amplify. So it will be skipped.

@github-actions github-actions bot removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Dec 13, 2024
@cwomack cwomack added pending-community-response Issue is pending a response from the author or community. question General question and removed pending-triage Issue is pending triage labels Dec 13, 2024
@ganesh-cidc
Copy link
Author

Thanks for your detailed reply @HuiSF, as per your comments, our application only uses steps 1 and 2.
I assume this is the PR you are talking about.
And is there any kind of tests that are done to see how much this PR improves the performance of the function?

@github-actions github-actions bot added pending-maintainer-response Issue is pending a response from the Amplify team. and removed pending-community-response Issue is pending a response from the author or community. labels Dec 16, 2024
@pranavosu
Copy link
Member

@ganesh-cidc Yes, that's the correct PR

@github-actions github-actions bot removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Dec 17, 2024
@ganesh-cidc
Copy link
Author

@pranavosu @HuiSF It seems the PR is merged. Can you create a new release for it. I will test it from my side and update here

@github-actions github-actions bot added the pending-maintainer-response Issue is pending a response from the Amplify team. label Dec 18, 2024
@cwomack
Copy link
Member

cwomack commented Dec 18, 2024

@ganesh-cidc, we have the PR merged and will have it included in the next release. We'll follow up with a comment as soon as the release is out (which will be very soon).

@github-actions github-actions bot removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Dec 18, 2024
@HuiSF
Copy link
Member

HuiSF commented Dec 19, 2024

Thanks for your detailed reply @HuiSF, as per your comments, our application only uses steps 1 and 2. I assume this is the PR you are talking about. And is there any kind of tests that are done to see how much this PR improves the performance of the function?

Hey @ganesh-cidc we are planning to release the fix soon, in the meantime if you are willing to test it, you can install the unstable tag by

npm install aws-amplify@unstable @aws-amplify/adapter-nextjs@unstable

@ganesh-cidc
Copy link
Author

@HuiSF It seems the stable version of 6.11.0 is released. I have updated to them.

"aws-amplify": "6.11.0"
"@aws-amplify/adapter-nextjs": "1.3.1"

I can notice the improvements after the update. The function call for fetchAuthSession in middleware has been reduced from around 300ms to less than 50ms. Thanks for this. Closing the issue

@github-actions github-actions bot added the pending-maintainer-response Issue is pending a response from the Amplify team. label Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Auth Related to Auth components/category Next.js pending-maintainer-response Issue is pending a response from the Amplify team. question General question
Projects
None yet
Development

No branches or pull requests

4 participants