Amplify-js: withAuthenticator HOC occasionally hangs on "Loading..."

Created on 17 Jun 2019 · 13Comments · Source: aws-amplify/amplify-js

I'm using the withAuthenticator HOC in my React app. Occasionally, after a successful login (or page refresh with a still valid auth token) my app is getting stuck on a white page with nothing but a "Loading..." text. Refreshing the page always fixes the issue (with the loading page now showing up briefly and then getting replaced by my app). The app in question is a basic create-react-app. Any help would be appreciated

pending-close-response-required

Source

ltolias

All 13 comments

@ltolias could you provide which versions of amplify you're using, a snippet of the package.json to see the dependencies and a bit of your code you have in your React app. Just want a little more information to dive deeper into your issue.

Thanks!

sammartinez on 17 Jun 2019

Thanks for the quick response!
Versions:
[email protected]
[email protected]

Relevant bits of App.js:

import { withAuthenticator } from 'aws-amplify-react';
import Amplify, { API, Auth } from 'aws-amplify';

Amplify.configure({
    Auth: {
        region: 'us-east-2',
        userPoolId: 'these are probably secret-ish',
        userPoolWebClientId: 'these are probably secret-ish',
    }
})

//App is my main react component

export default withAuthenticator(App, { 
    includeGreetings: false,
    signUpConfig:  {
        hiddenDefaults: ['username', 'email', 'phone_number', 'password'],
    signUpFields: [
        {
            label: 'Email', key: 'username',
            required: true, type: 'string',
            displayOrder: 1
        },
        {
            label: 'Password', key: 'password',
            required: true, type: 'password',
            displayOrder: 2
        }
    ]
  }
});

full package.json dependencies:

{
    "@babel/core": "7.2.2",
    "@date-io/date-fns": "^1.3.5",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.2",
    "@svgr/webpack": "4.1.0",
    "aws-amplify": "^1.1.26",
    "aws-amplify-react": "^2.3.6",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.5",
    "babel-plugin-named-asset-import": "^0.3.1",
    "babel-preset-react-app": "^7.0.2",
    "bfj": "6.1.1",
    "body-scroll-lock": "^2.6.1",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "1.0.0",
    "date-fns": "^2.0.0-alpha.27",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "5.12.0",
    "eslint-config-react-app": "^3.0.8",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.12.4",
    "file-loader": "2.0.0",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "identity-obj-proxy": "3.0.0",
    "immutability-helper": "^3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.2",
    "jest-resolve": "23.6.0",
    "jest-watch-typeahead": "^0.2.1",
    "js-yaml": "^3.13.1",
    "material-ui-pickers": "^2.2.4",
    "mini-css-extract-plugin": "0.5.0",
    "moment": "^2.24.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.2.1",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.5.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^0.2.2",
    "react-dev-utils": "^8.0.0",
    "react-dom": "^16.8.6",
    "react-swipeable-views": "^0.13.1",
    "resolve": "1.10.0",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "superagent": "^5.0.2",
    "superagent-absolute": "^1.0.1",
    "terser-webpack-plugin": "1.2.2",
    "underscore": "^1.9.1",
    "url-loader": "1.1.2",
    "webpack": "4.28.3",
    "webpack-dev-server": "3.1.14",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.3"
  }

ltolias on 17 Jun 2019

Should be fixed in the latest versions if you update with npm i aws-amplify-react aws-amplify.

https://github.com/aws-amplify/amplify-js/issues/3242

https://github.com/aws-amplify/amplify-js/issues/3471

https://github.com/aws-amplify/amplify-js/issues/3206

jkeys-ecg-nmsu on 17 Jun 2019

@ltolias As @jkeys-ecg-nmsu pointed out and beat me to it :), this should be fixed in the latest version. Please update to the latest version of amplify and report back.

sammartinez on 17 Jun 2019

😄1

Well don't I just feel silly now, not sure how I missed those in my googling... Thanks for the quick turnaround and sorry for the repeat issue!

ltolias on 18 Jun 2019

@ltolias no worries! Just as long as your issue was solved 👍. Cheers!

sammartinez on 18 Jun 2019

could it be that this is back in [email protected] if I browser reload my static site page, I get 'loading' if I reload again, it works...

aldegoeij on 8 Jul 2019

@aldegoeij experiencing this in aws-amplify-react@latest?

jkeys-ecg-nmsu on 12 Oct 2019

Still seeing a similar issue with the latest aws-amplify and aws-amplify-react and the Authenticator component and federatedSignIn bypassing the HostedUI.

I believe it may be related to issue https://github.com/aws-amplify/amplify-js/issues/3195 and PR https://github.com/aws-amplify/amplify-js/pull/4258.

leosoaivan on 18 Dec 2019

👍1

I agree with @leosoaivan. I'm using a custom UI and if I do amplify add auth and set it up without federated auth everything works fine. if I do amplify add auth and chose to set it up with social providers then when the app loads it hangs on the loading component and never switches the authState to signIn or anything else. If I switch it back to without federated it works again. I'm not sure why adding the federated option causes it to hang. I have the most recent version of the cli, aws-amplify, and aws-amplify-react.