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.42k stars 2.12k forks source link

UnexpectedSignInInterruptionException on next export #13828

Closed kochie closed 3 weeks ago

kochie commented 3 weeks ago

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

CDK

Environment information

``` # Put output below this line System: OS: macOS 14.6.1 CPU: (10) arm64 Apple M2 Pro Memory: 64.36 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node Yarn: 1.22.22 - ~/Library/pnpm/yarn npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm pnpm: 8.3.1 - ~/Library/pnpm/pnpm Watchman: 2024.07.15.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 128.0.6613.138 Edge: 128.0.2739.79 Safari: 17.6 npmPackages: @apollo/client: 3.11.8 => 3.11.8 @apollo/experimental-nextjs-app-support: ^0.11.3 => 0.11.3 @aws-amplify/adapter-nextjs: ^1.2.18 => 1.2.18 @electron-forge/cli: ^7.4.0 => 7.4.0 @electron/notarize: ^2.4.0 => 2.4.0 @electron/osx-sign: ^1.3.1 => 1.3.1 @fortawesome/fontawesome-svg-core: ^6.6.0 => 6.6.0 @fortawesome/free-regular-svg-icons: ^6.6.0 => 6.6.0 @fortawesome/free-solid-svg-icons: ^6.6.0 => 6.6.0 @fortawesome/pro-duotone-svg-icons: ^6.6.0 => 6.6.0 @fortawesome/pro-regular-svg-icons: ^6.6.0 => 6.6.0 @fortawesome/react-fontawesome: ^0.2.2 => 0.2.2 @graphql-tools/schema: ^10.0.6 => 10.0.6 @headlessui/react: ^2.1.8 => 2.1.8 @heroicons/react: ^2.1.5 => 2.1.5 @next/mdx: ^14.2.11 => 14.2.11 @sentry/electron: ^5.4.0 => 5.4.0 @sentry/nextjs: ^8.30.0 => 8.30.0 @stripe/react-stripe-js: ^2.8.0 => 2.8.0 @stripe/stripe-js: ^4.5.0 => 4.5.0 @tailwindcss/forms: ^0.5.9 => 0.5.9 @types/app-root-path: ^1.2.8 => 1.2.8 @types/d3: ^7.4.3 => 7.4.3 @types/lodash.sample: ^4.2.9 => 4.2.9 @types/lodash.samplesize: ^4.2.9 => 4.2.9 @types/luxon: ^3.4.2 => 3.4.2 @types/naughty-words: ^1.2.3 => 1.2.3 @types/node: ^22.5.5 => 22.5.5 @types/react: ^18.3.7 => 18.3.7 @types/react-dom: ^18.3.0 => 18.3.0 @uidotdev/usehooks: ^2.4.1 => 2.4.1 app-root-path: ^3.1.0 => 3.1.0 autoprefixer: ^10.4.20 => 10.4.20 aws-amplify: ^6.6.1 => 6.6.1 aws-appsync-auth-link: ^3.0.7 => 3.0.7 aws-crt: ^1.22.0 => 1.22.0 clsx: ^2.1.1 => 2.1.1 d3: ^7.9.0 => 7.9.0 deepmerge: ^4.3.1 => 4.3.1 electron: ^32.1.0 => 32.1.0 electron-builder: 25.0.5 => 25.0.5 electron-builder-notarize: ^1.5.2 => 1.5.2 electron-is-dev: ^3.0.1 => 3.0.1 electron-log: ^5.2.0 => 5.2.0 electron-next: ^3.1.5 => 3.1.5 electron-serve: ^2.1.1 => 2.1.1 electron-updater: ^6.3.4 => 6.3.4 electron-vite: ^2.3.0 => 2.3.0 esbuild: ^0.23.1 => 0.23.1 eslint: 9.10.0 => 9.10.0 eslint-config-next: 14.2.11 => 14.2.11 fathom-client: ^3.7.2 => 3.7.2 formik: ^2.4.6 => 2.4.6 graphql: ^16.9.0 => 16.9.0 idb: ^8.0.0 => 8.0.0 lodash: ^4.17.21 => 4.17.21 lodash.sample: ^4.2.1 => 4.2.1 lodash.samplesize: ^4.2.0 => 4.2.0 luxon: ^3.5.0 => 3.5.0 naughty-words: ^1.2.0 => 1.2.0 next: 14.2.11 => 14.2.11 postcss: ^8.4.47 => 8.4.47 prettier: ^3.3.3 => 3.3.3 raw-loader: ^4.0.2 => 4.0.2 react: 18.3.1 => 18.3.1 react-confetti: ^6.1.0 => 6.1.0 react-dom: 18.3.1 => 18.3.1 react-error-boundary: ^4.0.13 => 4.0.13 recharts: ^2.12.7 => 2.12.7 rimraf: ^6.0.1 => 6.0.1 sharp: ^0.33.5 => 0.33.5 swr: ^2.2.5 => 2.2.5 tailwindcss: ^3.4.11 => 3.4.11 typescript: ^5.6.2 => 5.6.2 url-loader: ^4.1.1 => 4.1.1 yup: ^1.4.0 => 1.4.0 npmGlobalPackages: awsp-plus: 1.2.0 corepack: 0.28.1 npm: 10.7.0 protoc-gen-ts: 0.8.7 ```

Describe the bug

I am having an issue with an app I am building where in the built production version users cannot log in. The app is an electron/nextjs project. When I run in developer mode there is no problem however when I export the build in next.js the login fails with UnexpectedSignInInterruptionException.

My current amplify configuration is as follow

'use client';

import { Amplify, ResourcesConfig } from 'aws-amplify';

const outputs: ResourcesConfig = {
    Auth: {
      Cognito: {
        userPoolId: process.env.NEXT_PUBLIC_USERPOOL_ID!,
        userPoolClientId: process.env.NEXT_PUBLIC_USERPOOL_CLIENT_ID!,
        userPoolEndpoint: process.env.NEXT_PUBLIC_AUTH_URL,
      },

    },
  };

Amplify.configure(outputs, { ssr: true });

export default function ConfigureAmplifyClientSide() {
  return null;
}

Expected behavior

Login should work the same in development mode and production.

Reproduction steps

  1. Create a next.js/amplify project.
  2. Set the nextjs project to export on build
  3. Try to signup/signin

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

{
    Auth: {
      Cognito: {
        userPoolId: process.env.NEXT_PUBLIC_USERPOOL_ID!,
        userPoolClientId: process.env.NEXT_PUBLIC_USERPOOL_CLIENT_ID!,
        userPoolEndpoint: process.env.NEXT_PUBLIC_AUTH_URL,
      }, 
    },
  }

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

kochie commented 3 weeks ago

While writing this bug report I had an idea about what the issue is, because there is no server with next export the ssr setting should be false. This turned out to be correct so if anyone experiences this issue in the future I thought I'd add it here.

The fix is very simple

'use client';

import { Amplify, ResourcesConfig } from 'aws-amplify';

const outputs: ResourcesConfig = {
    Auth: {
      Cognito: {
        userPoolId: process.env.NEXT_PUBLIC_USERPOOL_ID!,
        userPoolClientId: process.env.NEXT_PUBLIC_USERPOOL_CLIENT_ID!,
        userPoolEndpoint: process.env.NEXT_PUBLIC_AUTH_URL,
      },
    },
  };

Amplify.configure(outputs, { ssr: false });

export default function ConfigureAmplifyClientSide() {
  return null;
}