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

fetchAuthSession works on localhost but not in production #12927

Closed gstaykov closed 6 months ago

gstaykov commented 9 months ago

Before opening, please confirm:

JavaScript Framework

React, 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 M1 Pro Memory: 616.17 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node Yarn: 1.22.18 - /usr/local/bin/yarn npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 120.0.6099.234 Safari: 17.2.1 npmPackages: @amcharts/amcharts5: ^5.2.6 => 5.4.6 @ampproject/toolbox-optimizer: undefined () @babel/core: undefined () @babel/runtime: 7.15.4 @ctrl/react-adsense: ^1.7.0 => 1.7.0 @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @googlemaps/react-wrapper: ^1.1.35 => 1.1.35 @hapi/accept: undefined () @mui/icons-material: ^5.14.3 => 5.14.8 @mui/material: ^5.6.1 => 5.6.1 @napi-rs/triples: undefined () @next/react-dev-overlay: undefined () @next/react-refresh-utils: 12.1.4 @peculiar/webcrypto: undefined () @vercel/nft: undefined () abort-controller: undefined () acorn: undefined () amcharts5-example-flow-arc-horizontal: 0.1.0 amcharts5-example-flow-arc-vertical: 0.1.0 amcharts5-example-flow-chord: 0.1.0 amcharts5-example-flow-chord-directed: 0.1.0 amcharts5-example-flow-chord-non-ribbon: 0.1.0 amcharts5-example-flow-sankey: 0.1.0 amcharts5-example-gauge: 0.1.0 amcharts5-example-gauge-bands: 0.1.0 amcharts5-example-hierarchy-force-directed: 0.1.0 amcharts5-example-hierarchy-pack: 0.1.0 amcharts5-example-hierarchy-partition: 0.1.0 amcharts5-example-hierarchy-sunburst: 0.1.0 amcharts5-example-hierarchy-tree: 0.1.0 amcharts5-example-hierarchy-treemap: 0.1.0 amcharts5-example-hierarchy-voronoi-treemap: 0.1.0 amcharts5-example-jest: 0.1.0 amcharts5-example-json-pie: 0.1.0 amcharts5-example-json-xy: 0.1.0 amcharts5-example-map-animating-along-lines: 0.1.0 amcharts5-example-map-day-and-night: 0.1.0 amcharts5-example-map-globe-rotate-to-country: 0.1.0 amcharts5-example-map-globe-with-projected-circles: 0.1.0 amcharts5-example-map-with-bubbles: 0.1.0 amcharts5-example-map-zoom-to-country: 0.1.0 amcharts5-example-misc-40-charts: 0.1.0 amcharts5-example-misc-microchart-grid: 0.1.0 amcharts5-example-pie-chart: 0.1.0 amcharts5-example-pie-donut-chart: 0.1.0 amcharts5-example-pie-variable-radius: 0.1.0 amcharts5-example-radar-column-iwatch-style: 0.1.0 amcharts5-example-radar-heat-map: 0.1.0 amcharts5-example-radar-line: 0.1.0 amcharts5-example-radar-time-line: 0.1.0 amcharts5-example-sliced-funnel: 0.1.0 amcharts5-example-sliced-pictorial-stacked: 0.1.0 amcharts5-example-sliced-pyramid: 0.1.0 amcharts5-example-stock-chart: 0.1.0 amcharts5-example-stock-chart-comparing-stocks: 0.1.0 amcharts5-example-stock-chart-data-granularity: 0.1.0 amcharts5-example-stock-chart-data-grouping: 0.1.0 amcharts5-example-stock-chart-intraday: 0.1.0 amcharts5-example-stock-chart-live: 0.1.0 amcharts5-example-stock-chart-volume-separate-panel: 0.1.0 amcharts5-example-venn-diagram: 0.1.0 amcharts5-example-wordcloud-with-data: 0.1.0 amcharts5-example-wordcloud-with-text: 0.1.0 amcharts5-example-xy-100-percent-stacked-column: 0.1.0 amcharts5-example-xy-animated-bullet-at-the-end-of-the-series: 0.1.0 amcharts5-example-xy-bubble: 0.1.0 amcharts5-example-xy-candlestick: 0.1.0 amcharts5-example-xy-clustered-column: 0.1.0 amcharts5-example-xy-column: 0.1.0 amcharts5-example-xy-comparing-series-google-analytics-style: 0.1.0 amcharts5-example-xy-data-grouping: 0.1.0 amcharts5-example-xy-draggable-range: 0.1.0 amcharts5-example-xy-drawing-series-with-mouse-or-touch: 0.1.0 amcharts5-example-xy-dumbbell plot: 0.1.0 amcharts5-example-xy-evenly-spaced-date-axis: 0.1.0 amcharts5-example-xy-line: 0.1.0 amcharts5-example-xy-line-highlight-on-legend-hover: 0.1.0 amcharts5-example-xy-live-data: 0.1.0 amcharts5-example-xy-multiple-synced-value-axes: 0.1.0 amcharts5-example-xy-ohlc: 0.1.0 amcharts5-example-xy-real-time-data-sorting: 0.1.0 amcharts5-example-xy-smoothed-line: 0.1.0 amcharts5-example-xy-stacked-and-clustered-column: 0.1.0 amcharts5-example-xy-stacked-column: 0.1.0 amcharts5-example-xy-stacked-step: 0.1.0 amcharts5-example-xy-stock: 0.1.0 amcharts5-example-xy-stock-comparing: 0.1.0 amphtml-validator: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^6.0.13 => 6.0.13 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/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 () axios: 0.26.1 => 0.26.1 babel-packages: undefined () bootstrap-icons: ^1.8.1 => 1.8.1 browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () chalk: undefined () ci-info: undefined () cli-select: undefined () comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () cross-spawn: undefined () crypto-browserify: undefined () crypto-js: ^4.1.1 => 4.1.1 cssnano-simple: undefined () dayjs: ^1.11.9 => 1.11.9 debug: undefined () devalue: undefined () domain-browser: undefined () eslint: 8.13.0 => 8.13.0 eslint-config-next: 12.1.4 => 12.1.4 etag: undefined () events: undefined () find-cache-dir: undefined () find-up: undefined () formdata-node: undefined () fresh: undefined () get-orientation: undefined () glob: undefined () gzip-size: undefined () http-proxy: undefined () https-browserify: undefined () icss-utils: undefined () ignore-loader: undefined () image-size: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () jest-worker: undefined () json5: undefined () jsonwebtoken: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () micromatch: undefined () mini-css-extract-plugin: undefined () moment: ^2.29.3 => 2.29.4 nanoid: undefined () native-url: undefined () neo-async: undefined () next: 12.1.4 => 12.1.4 node-fetch: undefined () node-html-parser: undefined () ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: 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 () process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: 18.0.0 => 18.0.0 react-dom: ^18.0.0 => 18.0.0 react-is: 17.0.2 react-markdown: ^9.0.1 => 9.0.1 react-refresh: 0.12.0 react-server-dom-webpack: undefined () react-style-normalizer: ^1.2.8 => 1.2.8 react-toastify: ^10.0.4 => 10.0.4 regenerator-runtime: 0.13.4 rehype-raw: ^7.0.0 => 7.0.0 sass: ^1.50.0 => 1.50.0 sass-loader: undefined () schema-utils: undefined () semver: undefined () send: undefined () setimmediate: undefined () sharp: ^0.30.6 => 0.30.7 source-map: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tty-browserify: undefined () ua-parser-js: undefined () unistore: undefined () use-subscription: undefined () util: undefined () uuid: undefined () vm-browserify: undefined () watchpack: undefined () web-streams-polyfill: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () ws: undefined () npmGlobalPackages: @aws-amplify/cli: 12.10.1 corepack: 0.19.0 ios-deploy: 1.12.2 npm: 9.8.1 pm2: 5.3.0 ```

Describe the bug

I'm testing on localhost and production with the same cognito user pool (changing 'Allowed callback URLs' and 'Allowed sign-out URLs' between tests to get the proper redirect after successful login).

This is the page that is opened after successful login:

import { useEffect } from "react";

import { fetchAuthSession } from "aws-amplify/auth";

const SuccessPage = () => {

  useEffect(() => {
    fetchAuthSession().then((session) => {
      console.log("Session:");
      console.log(session);
    });
  }, []);

  return (
    <span>
      Login is successful. Please wait ...
    </span>
  );
};

export default SuccessPage;

On localhost session object is populated and everything works just fine but when I deploy this in production I get an empty session object:

{
credentials: undefined
identityId: undefined
tokens: undefined,
userSub: undefined
}

I'm testing login with Google and Facebook and again I'm using the SAME user pool for both localhost and prod. I change only the callback URLs in Cognito between the tests

cwomack commented 9 months ago

Hello, @gstaykov and sorry to hear you're experiencing this. Saw that it was potentially related to 9721 (linked above), but want to try and understand what's happening a little better.

Can you help me understand how the Auth resources were initially setup by clarifying if you were following this documentation for a Next.JS app via the Amplify CLI? If so, were the redirect sign-in URI’s set to (and remain to be possibly) http://localhost:3000/? Thanks!

gstaykov commented 9 months ago

Hello, @gstaykov and sorry to hear you're experiencing this. Saw that it was potentially related to 9721 (linked above), but want to try and understand what's happening a little better.

Can you help me understand how the Auth resources were initially setup by clarifying if you were following this documentation for a Next.JS app via the Amplify CLI? If so, were the redirect sign-in URI’s set to (and remain to be possibly) http://localhost:3000/? Thanks!

… I explicitly wrote in my ticket that I change the redirect URLs before every deploy.

Yes, I was following your official documentation during the setup.

nadetastic commented 8 months ago

Hi @gstaykov i've tried to reproduce this but haven't been able to do so. Could you clarify the steps you are taking when you say:

I'm testing on localhost and production with the same cognito user pool

Im assuming you are using the same backend between local and production, however are you authenticating success fully in production? What happens when you signIn()?

gstaykov commented 8 months ago

If you read my initial post you will find out the answer "This is the page that is opened after successful login" So yes, the login is successful, the redirect after the login is ok, but the session object is not populated.

Your product is very buggy and hard to work with. That's why I switched to Google Firebase. I can't provide you with any examples because I scraped all the code trying to make amplify to work (it was more than a month ago)

nadetastic commented 7 months ago

@gstaykov I'll go ahead and mark this issue as closed for now then. If you have any additional or new questions please feel free to submit a new github issue.

Thanks!