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

`cookies()` should be awaited before using its value with NextJS 15 #13924

Open mattiaz9 opened 4 days ago

mattiaz9 commented 4 days ago

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

``` # Put output below this line System: OS: macOS 14.6.1 CPU: (12) arm64 Apple M2 Pro Memory: 132.02 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm pnpm: 9.12.0 - ~/.nvm/versions/node/v22.9.0/bin/pnpm bun: 1.1.29 - ~/.nvm/versions/node/v22.9.0/bin/bun Browsers: Brave Browser: 129.1.70.117 Chrome: 129.0.6668.91 Safari: 17.6 npmPackages: @aws-amplify/adapter-nextjs: 1.2.21 => 1.2.21 @eslint/compat: 1.2.0 => 1.2.0 @eslint/eslintrc: 3.1.0 => 3.1.0 @eslint/js: 9.12.0 => 9.12.0 @hookform/resolvers: 3.9.0 => 3.9.0 @ianvs/prettier-plugin-sort-imports: 4.3.1 => 4.3.1 @radix-ui/react-accordion: 1.2.1 => 1.2.1 @radix-ui/react-alert-dialog: 1.1.2 => 1.1.2 @radix-ui/react-aspect-ratio: 1.1.0 => 1.1.0 @radix-ui/react-avatar: 1.1.1 => 1.1.1 @radix-ui/react-checkbox: 1.1.2 => 1.1.2 @radix-ui/react-collapsible: 1.1.1 => 1.1.1 @radix-ui/react-context-menu: 2.2.2 => 2.2.2 @radix-ui/react-dialog: 1.1.2 => 1.1.2 @radix-ui/react-dropdown-menu: 2.1.2 => 2.1.2 @radix-ui/react-hover-card: 1.1.2 => 1.1.2 @radix-ui/react-label: 2.1.0 => 2.1.0 @radix-ui/react-menubar: 1.1.2 => 1.1.2 @radix-ui/react-navigation-menu: 1.2.1 => 1.2.1 @radix-ui/react-popover: 1.1.2 => 1.1.2 @radix-ui/react-progress: 1.1.0 => 1.1.0 @radix-ui/react-radio-group: 1.2.1 => 1.2.1 @radix-ui/react-scroll-area: 1.2.0 => 1.2.0 @radix-ui/react-select: 2.1.2 => 2.1.2 @radix-ui/react-separator: 1.1.0 => 1.1.0 @radix-ui/react-slider: 1.2.1 => 1.2.1 @radix-ui/react-slot: 1.1.0 => 1.1.0 @radix-ui/react-switch: 1.1.1 => 1.1.1 @radix-ui/react-tabs: 1.1.1 => 1.1.1 @radix-ui/react-toast: 1.2.2 => 1.2.2 @radix-ui/react-toggle: 1.1.0 => 1.1.0 @radix-ui/react-toggle-group: 1.1.0 => 1.1.0 @radix-ui/react-tooltip: 1.1.3 => 1.1.3 @svgr/webpack: 8.1.0 => 8.1.0 @t3-oss/env-nextjs: 0.11.1 => 0.11.1 @tailwindcss/typography: 0.5.15 => 0.5.15 @total-typescript/ts-reset: 0.6.1 => 0.6.1 @types/eslint: 9.6.1 => 9.6.1 @types/eslint-config-prettier: 6.11.3 => 6.11.3 @types/eslint__eslintrc: 2.1.2 => 2.1.2 @types/eslint__js: 8.42.3 => 8.42.3 @types/node: 22.7.5 => 22.7.5 @types/nprogress: 0.2.3 => 0.2.3 @types/react: 18.3.3 => 18.3.3 @types/react-dom: 18.3.0 => 18.3.0 @typescript-eslint/eslint-plugin: 8.1.0 => 8.1.0 @typescript-eslint/parser: 8.1.0 => 8.1.0 autoprefixer: 10.4.20 => 10.4.20 aws-amplify: 6.6.4 => 6.6.4 class-variance-authority: 0.7.0 => 0.7.0 clsx: 2.1.1 => 2.1.1 cmdk: 1.0.0 => 1.0.0 date-fns: 4.1.0 => 4.1.0 embla-carousel-react: 8.3.0 => 8.3.0 eslint: 9.12.0 => 9.12.0 eslint-config-next: 15.0.0-rc.0 => 15.0.0-rc.0 eslint-config-prettier: 9.1.0 => 9.1.0 geist: 1.3.0 => 1.3.0 input-otp: 1.2.4 => 1.2.4 lucide-react: 0.451.0 => 0.451.0 next: 15.0.0-canary.190 => 15.0.0-canary.190 next-safe-action: 7.9.3 => 7.9.3 next-themes: 0.3.0 => 0.3.0 nprogress: 0.2.0 => 0.2.0 postcss: 8.4.39 => 8.4.39 prettier: 3.3.2 => 3.3.2 prettier-plugin-tailwindcss: 0.6.5 => 0.6.5 react: rc => 19.0.0-rc-cd22717c-20241013 react-day-picker: 8.10.1 => 8.10.1 react-dom: rc => 19.0.0-rc-cd22717c-20241013 react-hook-form: 7.53.0 => 7.53.0 react-resizable-panels: 2.1.4 => 2.1.4 recharts: 2.12.7 => 2.12.7 route-fn: 1.3.3 => 1.3.3 sonner: 1.5.0 => 1.5.0 tailwind-merge: 2.5.3 => 2.5.3 tailwindcss: 3.4.3 => 3.4.3 tailwindcss-animate: 1.0.7 => 1.0.7 typescript: 5.5.3 => 5.5.3 typescript-eslint: 8.8.1 => 8.8.1 url-loader: 4.1.1 => 4.1.1 vaul: 1.0.0 => 1.0.0 zod: 3.23.3 => 3.23.3 npmGlobalPackages: bun: 1.1.29 corepack: 0.29.3 npm: 10.8.3 ```

Describe the bug

In the latest nextjs canary, cookies and headers are async, so they must be awaited.

This is the error it shows in console: In route /dashboard a cookie property was accessed directly withcookies().get('CognitoIdentityServiceProvider.xxxxxxxxxxxxxxxxxxxxx.LastAuthUser').cookies()should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

code:

export async function getCurrentUser() {
  const cookies = await import("next/headers").then((mod) => mod.cookies)
  return await runWithAmplifyServerContext({
    nextServerContext: { cookies },
    operation: async (ctx) => {
      const user = await getAmplifyCurrentUser(ctx)
      return user
    },
  })
}

Expected behavior

Cookies should be awaited and no error should be shown in console.

Reproduction steps

  1. First make sure you have logged in
  2. import the function getCurrentUser inside a react server component

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line In route /dashboard a cookie property was accessed directly with `cookies().get('CognitoIdentityServiceProvider.xxxxxxxxxxxxxxxxxxx.LastAuthUser')`. `cookies()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis ```

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 commented 4 days ago

Hello, @mattiaz9 and thanks for opening this issue.

Currently, our NextJS adapter isn't supporting the breaking change that NextJS v15 introduces for the updates to the cookies() function now being a Promise. As such, we're going to review how we can support the interface changes on the Amplify side to better support NextJS v15.

Async Request API's that will potentially have breaking changes