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.44k stars 2.13k forks source link

Updating NextJS from 14.1.4 to 14.2.16 causes aws-amplify/auth functions to hang #13986

Closed oznekenzo closed 2 weeks ago

oznekenzo commented 2 weeks ago

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Amplify Gen 2

Environment information

``` # Put output below this line System: OS: macOS 13.5 CPU: (12) arm64 Apple M2 Pro Memory: 100.45 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 10.5.2 - ~/.nvm/versions/node/v20.10.0/bin/npm Browsers: Chrome: 130.0.6723.92 Safari: 16.6 npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/adapter-nextjs: ^1.2.22 => 1.2.26 @aws-amplify/adapter-nextjs/api: undefined () @aws-amplify/adapter-nextjs/data: undefined () @aws-amplify/auth: ^6.6.0 => 6.6.0 @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/backend: ^1.5.0 => 1.6.0 @aws-cdk/asset-awscli-v1: ^2.2.208 => 2.2.210 @aws-cdk/asset-kubectl-v20: ^2.1.3 => 2.1.3 @aws-cdk/asset-node-proxy-agent-v6: ^2.1.0 => 2.1.0 @aws-cdk/cloud-assembly-schema: ^38.0.1 => 38.0.1 @aws-sdk/client-cloudformation: ^3.679.0 => 3.682.0 @babel/core: undefined () @babel/runtime: 7.22.5 @edge-runtime/cookies: 5.0.0 @edge-runtime/ponyfill: 3.0.0 @edge-runtime/primitives: 5.0.0 @hapi/accept: undefined () @jest/globals: ^29.7.0 => 29.7.0 @mswjs/interceptors: undefined () @napi-rs/triples: undefined () @next/font: undefined () @opentelemetry/api: undefined () @tanstack/eslint-plugin-query: ^5.59.7 => 5.59.7 @tanstack/query-codemods: undefined () @tanstack/react-query: ^5.59.15 => 5.59.19 @tanstack/react-query-devtools: ^5.59.15 => 5.59.19 @testing-library/jest-dom: ^6.4.5 => 6.6.3 @testing-library/react: ^15.0.7 => 15.0.7 @types/node: ^20 => 20.17.6 @types/react: ^18 => 18.3.12 @types/react-dom: ^18 => 18.3.1 @types/react-slick: ^0.23.13 => 0.23.13 @types/react-transition-group: ^4.4.10 => 4.4.11 @types/styled-components: ^5.1.34 => 5.1.34 @typescript-eslint/eslint-plugin: ^7.18.0 => 7.18.0 @typescript-eslint/parser: ^7.18.0 => 7.18.0 (6.21.0) @vercel/nft: undefined () @vercel/og: 0.6.3 acorn: ^8.11.3 => undefined (8.14.0, ) amphtml-validator: undefined () amplify: ^0.0.11 => 0.0.11 anser: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^6.8.0 => 6.8.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 () aws-cdk-lib: ^2.164.0 => 2.165.0 babel-packages: undefined () babel-plugin-styled-components: ^2.1.4 => 2.1.4 browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () ci-info: undefined () classnames: ^2.5.1 => 2.5.1 cli-select: undefined () client-only: 0.0.1 commander: undefined () comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () constructs: ^10.4.2 => 10.4.2 content-disposition: undefined () content-type: undefined () cookie: undefined () credit-card-type: ^10.0.1 => 10.0.1 cross-spawn: undefined () crypto-browserify: undefined () css.escape: undefined () data-uri-to-buffer: undefined () debug: undefined () devalue: undefined () domain-browser: undefined () dotenv-cli: ^7.4.2 => 7.4.2 edge-runtime: undefined () eslint: ^8.57.0 => 8.57.1 eslint-config-next: 14.1.4 => 14.1.4 eslint-config-prettier: ^9.1.0 => 9.1.0 eslint-plugin-css-modules: ^2.12.0 => 2.12.0 eslint-plugin-import: ^2.29.1 => 2.31.0 eslint-plugin-prettier: ^5.1.3 => 5.2.1 eslint-plugin-react: ^7.34.1 => 7.37.2 eslint-plugin-react-hooks: ^4.6.0 => 4.6.2 events: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () get-orientation: undefined () glob: undefined () gzip-size: undefined () http-proxy: undefined () http-proxy-agent: undefined () https-browserify: undefined () https-proxy-agent: undefined () husky: ^9.0.11 => 9.1.6 icss-utils: undefined () ignore-loader: undefined () image-size: undefined () input-otp: ^1.2.4 => 1.4.1 is-animated: undefined () is-docker: undefined () is-wsl: undefined () jest: ^29.7.0 => 29.7.0 jest-environment-jsdom: ^29.7.0 => 29.7.0 jest-worker: undefined () jquery: ^3.7.1 => 3.7.1 json5: undefined () jsonwebtoken: undefined () lint-staged: ^15.2.2 => 15.2.10 loader-runner: undefined () loader-utils: undefined () lodash.curry: undefined () lottie-react: ^2.4.0 => 2.4.0 lru-cache: undefined () mini-css-extract-plugin: undefined () nanoid: undefined () native-url: undefined () neo-async: undefined () next: ^14.2.16 => 14.2.16 node-fetch: undefined () node-html-parser: undefined () ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () picomatch: undefined () platform: undefined () 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: 3.2.5 => 3.2.5 (1.19.1) prettier-eslint: ^16.3.0 => 16.3.0 process: undefined () proxy-agent-layer: 0.0.0 punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: ^18 => 18.3.1 react-builtin: undefined () react-calendar: ^5.0.0 => 5.1.0 react-dom: ^18 => 18.3.1 react-dom-builtin: undefined () react-dom-experimental-builtin: undefined () react-experimental-builtin: undefined () react-is: 18.2.0 react-refresh: 0.12.0 react-server-dom-turbopack-builtin: undefined () react-server-dom-turbopack-experimental-builtin: undefined () react-server-dom-webpack-builtin: undefined () react-server-dom-webpack-experimental-builtin: undefined () react-slick: ^0.30.2 => 0.30.2 react-test-renderer: ^18.3.1 => 18.3.1 react-transition-group: ^4.4.5 => 4.4.5 react-transition-group/CSSTransition: undefined () react-transition-group/ReplaceTransition: undefined () react-transition-group/SwitchTransition: undefined () react-transition-group/Transition: undefined () react-transition-group/TransitionGroup: undefined () react-transition-group/TransitionGroupContext: undefined () react-transition-group/config: undefined () react-use: ^17.5.1 => 17.5.1 regenerator-runtime: 0.13.4 sass-loader: undefined () scheduler-builtin: undefined () scheduler-experimental-builtin: undefined () schema-utils: undefined () semver: undefined () send: undefined () server-only: 0.0.1 setimmediate: undefined () shell-quote: undefined () slick-carousel: ^1.8.1 => 1.8.1 source-map: undefined () source-map08: undefined () stacktrace-parser: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () styled-components: ^5.3.5 => 5.3.11 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () superstruct: undefined () tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () ts-jest: ^29.1.4 => 29.2.5 ts-node: ^10.9.2 => 10.9.2 tty-browserify: undefined () typescript: ^5 => 5.6.3 ua-parser-js: undefined () unistore: undefined () util: undefined () vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () ws: undefined () zod: ^3.23.8 => 3.23.8 () zustand: ^4.5.5 => 4.5.5 npmGlobalPackages: @aws-amplify/cli: 12.13.0 @storybook/cli: 8.0.9 corepack: 0.22.0 next: 14.2.5 node-gyp: 10.1.0 npm: 10.5.2 serverless: 4.4.6 ```

Describe the bug

Switching from Next.js 14.1.4 to 14.2.6 causes all amplify auth methods to not get called successfully - the functions, specifcally fetchAuthSession and getCurrentUser, either stalls or fails silently - very strange! Next.js 14.1.4 was working fine, as expected.

Expected behavior

I expect the awaited function to be run successfully and return data

Reproduction steps

  1. install next@14.2.16 and aws-amplify/auth@6.6.0
  2. call fetchAuthSession or getCurrentUser

Code Snippet

// Put your code below this line.
'use client'

import { fetchAuthSession, getCurrentUser } from 'aws-amplify/auth'

import { User } from '../../_types'
import userStore from '@/app/_stores/userStore'

export default async function getUserClient() {
  try {
    const session = await fetchAuthSession()
    if (!session.tokens) return

    const userRes = await getCurrentUser()
    userStore.getState().setUser(user as User)
  } catch (error) {
    console.error(error)
  }

Log output

_**no logs, no errors, just silence**_ ``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

export const authConfig: ResourcesConfig['Auth'] = {
  Cognito: {
    userPoolId: String(process.env.NEXT_PUBLIC_USER_POOL_ID),
    userPoolClientId: String(process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID),
    identityPoolId: String(process.env.NEXT_PUBLIC_IDENTITY_POOL_ID),
    allowGuestAccess: true,
    signUpVerificationMethod: 'code',
    loginWith: {
      oauth: {
        domain: String(process.env.NEXT_PUBLIC_OAUTH_DOMAIN),
        scopes: ['email', 'openid', 'phone', 'profile'],
        redirectSignIn: [
          `http://localhost:3000${SOCIAL_LOGIN_COMPLETE_ROUTE}`,
           ......
        ],
        redirectSignOut: [
          'http://localhost:3000',
           ......
        ],
        responseType: 'code'
      }
    }
  }
}

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

ashika112 commented 2 weeks ago

@oznekenzo We have integration tests running on "next": "14.2.10", and there is no issue there. Can you provide us with a reproducible code sample/repo so we can figure out what is causing this issue.

oznekenzo commented 2 weeks ago

Was likely a combination of issues that was going on. I was missing import 'aws-amplify/auth/enable-oauth-listener' on top of this, and was seeing a different behavior in local vs my staging and development environments, but now everything is working - closing.

cwomack commented 2 weeks ago

Thanks for following up @oznekenzo and glad you're unblocked!