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

Amplify v6 signIn stuck on production #12843

Closed didemkkaslan closed 5 months ago

didemkkaslan commented 10 months ago

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.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
Screenshot 2024-01-12 at 12 04 06

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 commented 10 months ago

@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 commented 10 months ago

@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 commented 6 months ago

@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?

cwomack commented 5 months ago

Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue.

Thank you!