amplify-js `cookies()` should be awaited before using its value with NextJS 15

Before opening, please confirm:

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

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

First make sure you have logged in
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

Oct 15 '24 17:10 mattiaz9

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

Oct 15 '24 19:10 cwomack

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.

Oct 22 '24 19:10 ryanknight09

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

Oct 22 '24 23:10 HuiSF

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

Oct 22 '24 23:10 ryanknight09

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!

Oct 24 '24 22:10 HuiSF

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?

Oct 26 '24 10:10 austinjlaverty

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.

Oct 28 '24 16:10 HuiSF

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.

https://github.com/aws-amplify/amplify-js/issues/13966

Will continue the conversation there

Oct 28 '24 17:10 austinjlaverty

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

Oct 30 '24 06:10 dandrei

Hey @HuiSF

Our app is broken after upgrading to Next v15 and upgrading the aws-amplify and next adapter with next-15 tag.

We have a monorepo setup with:

apps/web
packages/shared

We're calling the Amplify.configure() with options and among them ssr: true in the apps/web both in the layout package as well as inside a ConfigureAmplify client component which is rendered in the root layout.

And we're using aws-amplify/auth utilities inside the packages/shared

The catch here is that, Amplify is supposed to be a Singleton, but looks like it isn't anymore, because when calling utilities from the shared package Amplify.getConfig() returns an empty object.

So

packages/shared/auth.ts

import { signOut as amplifySignOut } from "@aws-amplify/auth"
import { Amplify } from "aws-amplify"

export const signOut = async ()=>{
    console.log(Amplify.getConfig()) // empty object -> {}
    await amplifySignOut();
}

apps/web/components/LogoutButton.ts

"use client";

import { Amplify } from "aws-amplify"
import { signOut } from "@packages/shared/auth"

export const LogoutButton = ()=>{
  return <Button onClick={()=>{
    console.log(Amplify.getConfig()) // { config: "does exist" }
    console.log("-- Before Sign out --")
    signOut()
    }}
  >
    Logout
  </button>
}

and the end output in console is:

Log: { config: "does exist" } Log: -- Before Sign out -- Log: {}

Nov 14 '24 16:11 akamfoad

Hi @akamfoad you analysis is correct regarding this issue. Amplify is a singleton to serve the configuration and common states, you need to ensure all your packages are using the exactly same version of Amplify packages so while you are building production bundle, there won't be duplicate dependencies get created to ensure the consistent Amplify singleton is used.

Nov 14 '24 17:11 HuiSF

Thanks very much @HuiSF that is correct.

So for anyone having the same issue, especially in a monorepo setup, yarn was not hoisting aws-amplify for my apss/web workspace since it was a newer (different) version, but the older version that was shared between the shared package and other apps (which was the same) was hoisted to the root node_modules, so it ended up with two versions.

Thanks a lot for your prompt response again.

Nov 14 '24 17:11 akamfoad

I'm surprised that the formal Amplify documentation say that Next JS 15 is supported but this is still open and the latest version of the next-adapter does not support Next JS 15.

See the official documentation: Amplify support for Next.js

I was trying to use the latest version, 1.2.29-next-15.716cf28.0, but it has dependencies clashes with @aws-amplify/ui-react so I'm still unable to get Next JS 15 to work with Amplify.

Nov 25 '24 12:11 hagai-slash-in

Works fine on my project. Here is my package.json :

  "dependencies": {
    "@aws-amplify/adapter-nextjs": "next-15",
    "@aws-amplify/core": "^6.5.1",
    "aws-amplify": "next-15",
    "next": "^15.0.1",
    "react": "19.0.0-rc-cae764ce-20241025",
    "react-dom": "19.0.0-rc-cae764ce-20241025",

  }

Nov 25 '24 18:11 obazoud

I'm surprised that the formal Amplify documentation say that Next JS 15 is supported but this is still open and the latest version of the next-adapter does not support Next JS 15.

See the official documentation: Amplify support for Next.js

I was trying to use the latest version, 1.2.29-next-15.716cf28.0, but it has dependencies clashes with @aws-amplify/ui-react so I'm still unable to get Next JS 15 to work with Amplify.

Hi @hagai-slash-in sorry for the confusing point. The documentation you linked is Amplify Hosting specific. Amplify Hosting supports up to Next.js v15 at this moment. But it's not tightly coupled with Amplify JS library.

We have completed testing Amplify JS with Next.js v15, and will release a new version soon. Thanks for your patience.

In addition, Amplify UI packages specifies React v18 as peer dependency, while Next.js v15 uses React v19 RC. As far as I know Amplify UI has not completed the compatibility testing yet with React v19 especially it's still in RC.

Nov 25 '24 18:11 HuiSF

Hi all, we've released a new versions of Amplify JS library, which works with Next.js 15 Async Request APIs. Please upgrade packages to the following versions:

@aws-amplify/[email protected]
aws-amplify/6.10.3

Thanks!

Dec 13 '24 17:12 HuiSF

amplify-js amplify-js copied to clipboard

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

Before opening, please confirm:

JavaScript Framework

Amplify APIs

Amplify Version

Amplify Categories

Backend

Environment information

Describe the bug

Expected behavior

Reproduction steps

Code Snippet

Log output

aws-exports.js

Manual configuration

Additional configuration

Mobile Device

Mobile Operating System

Mobile Browser

Mobile Browser Version

Additional information and screenshots

amplify-js
amplify-js copied to clipboard