Amplify v6 signIn stuck on production

[didemkkaslan]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• 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.2.1
    CPU: (8) arm64 Apple M2
    Memory: 310.06 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.13.1 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
    bun: 1.0.2 - ~/.bun/bin/bun
  Browsers:
    Chrome: 120.0.6099.216
    Safari: 17.2.1
  npmPackages:
    @amplitude/analytics-browser: ^2.3.3 => 2.3.3 
    @ampproject/toolbox-optimizer:  undefined ()
    @ant-design/cssinjs: ^1.17.2 => 1.17.2 
    @ant-design/icons: ^5.2.6 => 5.2.6 
    @ant-design/plots: ^1.2.5 => 1.2.5 
    @aws-amplify/adapter-nextjs: ^1.0.9 => 1.0.9 
    @aws-amplify/adapter-nextjs/api:  undefined ()
    @aws-amplify/adapter-nextjs/data:  undefined ()
    @babel/core:  undefined ()
    @babel/runtime:  7.15.4 
    @edge-runtime/cookies:  4.0.2 
    @edge-runtime/ponyfill:  2.4.1 
    @edge-runtime/primitives:  4.0.2 
    @graphql-codegen/cli: 5.0.0 => 5.0.0 
    @graphql-codegen/client-preset: 4.1.0 => 4.1.0 
    @graphql-codegen/introspection: 4.0.0 => 4.0.0 
    @hapi/accept:  undefined ()
    @mantine/hooks: ^7.1.5 => 7.1.5 
    @microsoft/teams-js: ^2.16.0 => 2.16.0 
    @mswjs/interceptors:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/bundle-analyzer: ^13.5.6 => 13.5.6 
    @next/font:  undefined ()
    @next/react-dev-overlay:  undefined ()
    @opentelemetry/api:  undefined ()
    @react-pdf/renderer: ^3.1.13 => 3.1.13 
    @segment/ajv-human-errors:  undefined ()
    @tailwindcss/typography: ^0.5.10 => 0.5.10 
    @tanstack/query-codemods:  4.24.3 
    @tanstack/react-query: ^5.0.5 => 5.0.5 
    @tanstack/react-query-devtools: ^5.8.9 => 5.8.9 
    @testing-library/jest-dom: ^6.1.4 => 6.1.4 
    @testing-library/react: ^14.0.0 => 14.0.0 
    @testing-library/user-event: ^14.5.1 => 14.5.1 
    @types/jest: ^29.5.6 => 29.5.6 
    @types/lodash: ^4.14.200 => 4.14.200 
    @types/mixpanel-browser: ^2.47.4 => 2.47.4 
    @types/node: ^20.8.8 => 20.8.8 (20.8.2)
    @types/react: ^18.2.31 => 18.2.31 (18.2.25)
    @types/react-dom: ^18.2.14 => 18.2.14 (18.2.10)
    @types/react-google-recaptcha: ^2.1.7 => 2.1.7 
    @types/react-highlight-words: ^0.16.6 => 0.16.6 
    @typescript-eslint/eslint-plugin: ^6.9.0 => 6.9.0 
    @typescript-eslint/parser: ^6.9.0 => 6.9.0 (6.7.4)
    @vercel/nft:  undefined ()
    @vercel/og:  undefined ()
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    antd: 5.10.2 => 5.10.2 
    apexcharts: ^3.44.0 => 3.44.0 
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.4.16 => 10.4.16 
    aws-amplify: 6 => 6.0.9 
    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/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-rum-web: ^1.15.0 => 1.15.0 
    axios: ^1.5.1 => 1.5.1 
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    client-only:  0.0.1 
    clsx: ^2.0.0 => 2.0.0 
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    data-uri-to-buffer:  undefined ()
    dayjs: ^1.11.10 => 1.11.10 
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: ^8.52.0 => 8.52.0 
    eslint-config-airbnb: ^19.0.4 => 19.0.4 
    eslint-config-airbnb-typescript: ^17.1.0 => 17.1.0 
    eslint-config-next: ^13.5.6 => 13.5.6 
    eslint-config-prettier: ^9.0.0 => 9.0.0 
    eslint-plugin-i18next: ^6.0.3 => 6.0.3 
    eslint-plugin-import: ^2.29.0 => 2.29.0 (2.28.1)
    eslint-plugin-jest: ^27.4.3 => 27.4.3 
    eslint-plugin-jest-dom: ^5.1.0 => 5.1.0 
    eslint-plugin-jsx-a11y: ^6.7.1 => 6.7.1 
    eslint-plugin-react: ^7.33.2 => 7.33.2 
    eslint-plugin-testing-library: ^6.1.2 => 6.1.2 
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    framer-motion: ^10.16.4 => 10.16.4 
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    graphql: ^16.8.1 => 16.8.1 (15.8.0)
    graphql-request: ^6.1.0 => 6.1.0 
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    http-proxy-agent:  undefined ()
    https-browserify:  undefined ()
    https-proxy-agent:  undefined ()
    husky: ^8.0.3 => 8.0.3 
    i18next: ^23.7.15 => 23.7.15 
    i18next-chained-backend: ^4.5.0 => 4.5.0 
    i18next-http-backend: ^2.2.2 => 2.2.2 
    i18next-localstorage-backend: ^4.2.0 => 4.2.0 
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    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 ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    jwt-decode: ^3.1.2 => 3.1.2 
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash: ^4.17.21 => 4.17.21 
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    micromatch:  undefined ()
    mini-css-extract-plugin:  undefined ()
    mixpanel-browser: ^2.47.0 => 2.47.0 
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: ^13.5.6 => 13.5.6 
    next-i18next: ^15.1.2 => 15.1.2 
    next-i18next-create-client:  undefined ()
    next-seo: ^6.1.0 => 6.1.0 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    platform:  undefined ()
    postcss: ^8.4.31 => 8.4.31 
    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.0.3 => 3.0.3 
    prettier-plugin-tailwindcss: ^0.5.6 => 0.5.6 
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: 18.2.0 => 18.2.0 
    react-apexcharts: ^1.4.1 => 1.4.1 
    react-builtin:  undefined ()
    react-dom: 18.2.0 => 18.2.0 
    react-dom-builtin:  undefined ()
    react-dom-experimental-builtin:  undefined ()
    react-experimental-builtin:  undefined ()
    react-google-recaptcha: ^3.1.0 => 3.1.0 
    react-highlight-words: ^0.20.0 => 0.20.0 
    react-i18next: ^14.0.0 => 14.0.0 
    react-icons: ^4.11.0 => 4.11.0 
    react-infinite-scroll-component: ^6.1.0 => 6.1.0 
    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 ()
    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 ()
    sharp: ^0.32.6 => 0.32.6 
    shell-quote:  undefined ()
    source-map:  undefined ()
    stacktrace-parser:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    superstruct:  undefined ()
    tailwind-merge: ^1.14.0 => 1.14.0 
    tailwindcss: ^3.3.3 => 3.3.3 
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: ^5.2.2 => 5.2.2 
    ua-parser-js:  undefined ()
    undici:  undefined ()
    unistore:  undefined ()
    usehooks-ts: ^2.9.1 => 2.9.1 
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod:  undefined ()
  npmGlobalPackages:
    @aws-amplify/cli: 12.10.0
    corepack: 0.22.0
    npm: 10.2.3
    pnpm: 8.13.1

Describe the bug

I've done the steps for migrating to amplify v6. Have an issue with authentication handled by middleware. Sometimes signIn gets stuck and the login page is frozen. This only happens on production. Actually signIn works correctly so I can see isSignedIn is equal to true and nextStep.signInStep is DONE. but still its somehow stuck

And I don't know if its normal but console logging the request.nextUrl.pathname in middleware is like below. Its being called for every route even if I only hit /login route.

request.nextUrl.pathname /login
request.nextUrl.pathname /
request.nextUrl.pathname /register
request.nextUrl.pathname /login
request.nextUrl.pathname /meetings
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
request.nextUrl.pathname /meetings
request.nextUrl.pathname /
request.nextUrl.pathname /settings/account
request.nextUrl.pathname /people
request.nextUrl.pathname /tags
request.nextUrl.pathname /library
request.nextUrl.pathname /meetings/1fc12626-80be-45f0-a877-1f2672c6f268
request.nextUrl.pathname /people/664c5993-abe5-46eb-b86e-c5aa907de500
request.nextUrl.pathname /people/698f197a-f3f3-4b1c-bad3-1c0bd6a23192
request.nextUrl.pathname /meetings/1fc12626-80be-45f0-a877-1f2672c6f268/overview
request.nextUrl.pathname /login
request.nextUrl.pathname /register

Expected behavior

signIn should redirect the user to / route

Reproduction steps

// On Login Form Submit

const handleFinish = async ({ email, password }: SignInFormValues) => {
    setFormError('');
    setIsSubmitting(true);

    signInUser(email, password)
      .then(({ isSignedIn, nextStep }) => {
        console.log({ isSignedIn, nextStep });
        if (
          nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED'
        ) {
          router.push('/confirm-signin');
        }

        if (isSignedIn) {
          router.push('/');
        }
      })
      .catch((error) => {
        setFormError(error.message);
      })
      .finally(() => {
        setIsSubmitting(false);
      });
  };

  export async function signInUser(
  email: string,
  password: string,
): Promise<SignInOutput> {
  try {
    const result = await signIn({
      username: email,
      password,
    });

    return await Promise.resolve(result);
  } catch (error) {
    console.log('error', error);
    return Promise.reject(error);
  }
}

// middleware

import awsConfiguration from './src/amplifyconfiguration.json';
import { createServerRunner } from '@aws-amplify/adapter-nextjs';
import { fetchAuthSession } from 'aws-amplify/auth/server';
import { NextRequest, NextResponse } from 'next/server';


export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  const { runWithAmplifyServerContext } = await createServerRunner({
    config: awsConfiguration,
  });

  const authenticated = await runWithAmplifyServerContext({
    nextServerContext: { request, response },
    operation: async (contextSpec) => {
      try {
        const session = await fetchAuthSession(contextSpec, {});
        return session.tokens !== undefined;
      } catch (error) {
        return false;
      }
    },
  });

  const isAuthPage =
    request.nextUrl.pathname.startsWith('/login') ||
    request.nextUrl.pathname.startsWith('/register');

  if (authenticated) {
    // Don't show auth pages if already authenticated
    if (isAuthPage) {
      return NextResponse.redirect(new URL('/', request.url));
    }
  }

  if (!authenticated) {
    // Allow access to public meeting report page
    if (request.nextUrl.pathname.startsWith('/meetings/public')) {
      return response;
    }
    // Redirect to login page when on a page that requires authentication
    if (!isAuthPage) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }

  // Allow other requests if the above don't match
  return response;
}

export const config = {
  matcher: [
    '/',
    '/meetings/:path*',
    '/people/:path*',
    '/library/:path*',
    '/settings/:path*',
    '/integration/:path*',
    '/tags',
    '/login',
    '/register',
  ],
};

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

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]

@didemkkaslan, sorry to hear this is happening after migrating to v6. Just to make sure I understood this correctly, you said that every route is being called via the middleware when you're only trying to sign in via the /login route? Was any of this behavior happening in v5, or only after you upgraded (even if sporadically)?

[didemkkaslan]

@cwomack I wasn't using middleware before we had client side auth hoc. I wanted to implement serverside auth but v5 didn't quite work well with middleware so I decided to migrate to v6. Yes you are correct in development everything works well but when deployed ( we use amplify hosting ) middleware is being called for every route initially. When I hit /login route it goes like

/login
/
/register

So I've removed middleware.ts and instead did it for every protected page in getServerSideProps and it works well both locally and prod. But I really want to use middleware to handle this Idk whats wrong

[cwomack]

@didemkkaslan, appreciate the patience on a response for this issue. That's great to hear that it is working if the middleware is removed, and it helps isolate the issue to the middleware I think. When you enable the middleware, what is the expected redirect order? And is there more code for the middleware beyond what was provided in the original issue description?

Also, do you have any redirect rules/logic set up through Amplify Hosting by chance?