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

Support for Next.JS v15 and changes tocookies() as well as other API's #13924

Open
3 tasks done
mattiaz9 opened this issue Oct 15, 2024 · 9 comments
Open
3 tasks done
Assignees
Labels
feature-request Request a new feature Next.js

Comments

@mattiaz9
Copy link

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 with cookies().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

@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 Oct 15, 2024
@cwomack cwomack self-assigned this Oct 15, 2024
@cwomack cwomack added Auth Related to Auth components/category Next.js labels Oct 15, 2024
@cwomack
Copy link
Member

cwomack commented Oct 15, 2024

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

@cwomack cwomack added feature-request Request a new feature and removed pending-triage Issue is pending triage labels Oct 15, 2024
@github-actions github-actions bot removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Oct 15, 2024
@cwomack cwomack removed the Auth Related to Auth components/category label Oct 15, 2024
@ryanknight09
Copy link

Is this going to be a fast update? Being that cookies relate to authenticated fetch requests this causes errors almost everywhere without the ability to ignore specific errors its pretty annoying in dev. Also Next 15 stable was released... this week.

@github-actions github-actions bot added the pending-maintainer-response Issue is pending a response from the Amplify team. label Oct 22, 2024
@HuiSF
Copy link
Member

HuiSF commented Oct 22, 2024

Hi all, we've started testing the code changes with Next.js v15. Thanks for your patience.

@github-actions github-actions bot removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Oct 22, 2024
@ryanknight09
Copy link

Thanks for your hard work on this, I know there are many other things going on, so much appreciated.

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

HuiSF commented Oct 24, 2024

Hi all, the Next.js 15 support is now testable with the tag release next-15. You can start testing with your project by installing the tag version

npm install aws-amplify@next-15 @aws-amplify/adapter-nextjs@next-15

We will continue testing with Next.js 15 to ensure it's stable before the formal release. Please let us know if you encounter any issue while testing, much appreciated!

@austinjlaverty
Copy link

austinjlaverty commented Oct 26, 2024

Hi all, the Next.js 15 support is now testable with the tag release next-15. You can start testing with your project by installing the tag version

npm install aws-amplify@next-15 @aws-amplify/adapter-nextjs@next-15

We will continue testing with Next.js 15 to ensure it's stable before the formal release. Please let us know if you encounter any issue while testing, much appreciated!

I can see the error is no longer getting thrown, so that's great

However (and my apologies if this is a separate issue) within the operation when I attempt to getCurrentUser(contextSpec) it throws:

fUserUnAuthenticatedException: User needs to be authenticated to call this API.

Even though cookies() contains valid auth tokens.

Once the app initializes on the client, amplify correctly detects the user, so my issue is isolated to the server only.

Any ideas on what I might've missed / could do to debug?

@github-actions github-actions bot added the pending-maintainer-response Issue is pending a response from the Amplify team. label Oct 26, 2024
@HuiSF
Copy link
Member

HuiSF commented Oct 28, 2024

Hi @austinjlaverty thanks for following up. For getCurrentUser(contextSpec) call we have integration tests that verified it should work with Next.js 15 with the tag release. Can you provide your server side implantation that contains the getCurrentUser call? I will try to reproduce.

@github-actions github-actions bot removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Oct 28, 2024
@austinjlaverty
Copy link

austinjlaverty commented Oct 28, 2024

Hi @austinjlaverty thanks for following up. For getCurrentUser(contextSpec) call we have integration tests that verified it should work with Next.js 15 with the tag release. Can you provide your server side implantation that contains the getCurrentUser call? I will try to reproduce.

Someone else has since opened a ticket for the same thing with next 14, so whatever I've run into probably isn't related to the original async cookies issue.

#13966

Will continue the conversation there

@github-actions github-actions bot added the pending-maintainer-response Issue is pending a response from the Amplify team. label Oct 28, 2024
@cwomack cwomack removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Oct 29, 2024
@dandrei
Copy link

dandrei commented Oct 30, 2024

Thanks you, maintainers, for publishing the v15-compatible NPM cacary release.

@github-actions github-actions bot added the pending-maintainer-response Issue is pending a response from the Amplify team. label Oct 30, 2024
@cwomack cwomack removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Oct 30, 2024
@cwomack cwomack changed the title cookies() should be awaited before using its value with NextJS 15 Support for Next.JS v15 and changes tocookies() as well as other API's Nov 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature-request Request a new feature Next.js
Projects
None yet
Development

No branches or pull requests

6 participants