In Safari I cannot enter username or password on the signin page

[baharev]

Do you want to request a feature or report a bug?

Bug report.

What is the current behavior?

I cannot enter the user name or password on the signin page. Only Safari on iOS seems to be affected.

These text fields don't seem to get focus, I don't get the cursor blinking in them. The keyboard does pop up if I keep touching these text fields. But when I start typing, it stops accepting input after the first character. Sometimes I cannot enter even the first character.

Only Safari on iOS seems to affected. The same signin page works just fine on Android in Chrome, and in Firefox on my Linux desktop.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

See above.

What is the expected behavior?

Being able to enter the username and password. It works in other browsers.

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?

     "amazon-cognito-identity-js": "^2.0.3",
     "aws-amplify": "^0.2.14",
     "aws-amplify-react": "^0.1.38",
     "aws-sdk": "^2.218.1",
     "react": "^16.3.0",

iPhone OS 11.2.6 Safari mobile 11.0

Yes, it used to work, but I cannot find that old package.json anymore, sorry.

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

Sorry, I cannot debug on this device.

[baharev]

Upgraded to:

$ npm --version
5.6.0
$ node --version
v8.11.1

and (from package.json):

    "amazon-cognito-identity-js": "^2.0.3",
    "aws-amplify": "^0.2.14",
    "aws-amplify-react": "^0.1.38",
    "aws-sdk": "^2.222.1",
    "react": "^16.3.1",

also:

iPhone OS 11.3

In short, everything is at the latest stable release (as far as I can tell).

It makes no difference; I have the exact same buggy behavior.

[mlabieniec]

@richardzcode didn't you merge a pr fix for this from another issue re:safari?

[baharev]

Just pinging: Any updates regarding this issue?

[powerful23]

Hey I just tried on my simulator with IOS 11.1 and I can input the username and password. Do you still have this issue with the latest version?

[baharev]

@powerful23 Don't know yet. After upgrading the packages, I cannot event start my application. I just love npm, and upgrading packages: It usually takes several hours to get everything up and running again.

[baharev]

Please help, I am unable to upgrade to the latest version. I am definitely not using ChatBot in my application, 100% sure about that. It seems to me aws-amplify is causing the problem:

ReferenceError: regeneratorRuntime is not defined
./node_modules/aws-amplify-react/dist/Interactions/ChatBot.js/exports.ChatBot</<.value<
node_modules/aws-amplify-react/dist/Interactions/ChatBot.js:109

  106 | }, {
  107 |     key: "submit",
  108 |     value: function () {
> 109 |         var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(e) {
  110 |             var _this2 = this;
  111 | 
  112 |             var response;

./node_modules/aws-amplify-react/dist/Interactions/ChatBot.js/exports.ChatBot<
node_modules/aws-amplify-react/dist/Interactions/ChatBot.js:108

  105 |     }
  106 | }, {
  107 |     key: "submit",
> 108 |     value: function () {
  109 |         var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(e) {
  110 |             var _this2 = this;
  111 | 

./node_modules/aws-amplify-react/dist/Interactions/ChatBot.js
node_modules/aws-amplify-react/dist/Interactions/ChatBot.js:58

  55 |     })
  56 | };
  57 | 
> 58 | var ChatBot = exports.ChatBot = function (_Component) {
  59 |     _inherits(ChatBot, _Component);
  60 | 
  61 |     function ChatBot(props) {

__webpack_require__
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:88

  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {

./node_modules/aws-amplify-react/dist/Interactions/index.js
node_modules/aws-amplify-react/dist/Interactions/index.js:7

   4 |   value: true
   5 | });
   6 | 
>  7 | var _ChatBot = require('./ChatBot');
   8 | 
   9 | Object.keys(_ChatBot).forEach(function (key) {
  10 |   if (key === "default" || key === "__esModule") return;

__webpack_require__
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:88

  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {

./node_modules/aws-amplify-react/dist/index.js
node_modules/aws-amplify-react/dist/index.js:80

  77 |   });
  78 | });
  79 | 
> 80 | var _Interactions = require('./Interactions');
  81 | 
  82 | Object.keys(_Interactions).forEach(function (key) {
  83 |   if (key === "default" || key === "__esModule") return;

__webpack_require__
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:88

  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {

./src/App.js
http://localhost:3000/static/js/bundle.js:147554:76
__webpack_require__
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:88

  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {

./src/index.js
http://localhost:3000/static/js/bundle.js:149451:63
__webpack_require__
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:88

  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {

[3]
http://localhost:3000/static/js/bundle.js:151335:18
__webpack_require__
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

(anonymous function)
/home/ali/ws-js/upload/webpack/bootstrap 0e35239dd6e7915d5551:724

  721 | __webpack_require__.h = function() { return hotCurrentHash; };
  722 | 
  723 | // Load entry module and return exports
> 724 | return hotCreateRequire(3)(__webpack_require__.s = 3);
  725 | 
  726 | 
  727 | 

(anonymous function)
http://localhost:3000/static/js/bundle.js:1:11
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

What piece of information do you need to figure out what went wrong?

[powerful23]

@baharev thanks for reporting. It's a bug. We will publish a patch to fix it today.

[baharev]

@powerful23 Please do, I would like to work on my project during the weekend.

[powerful23]

@baharev I think for now you can just rollback to previous version like aws-amplify-react@0.1.52

[baharev]

@powerful23 In the worst case yes, but I was hoping that I could work with the latest version already during the weekend. (In mild push so that you fix it soon. ;) )

[powerful23]

@baharev new version published FYI.

[baharev]

@powerful23 I upgraded to the latest version (the new version you just published) but now I get "No userPool" error when I try to sign in. Any ideas?

It used to work with the old version.

[powerful23]

@baharev please ensure you both update aws-amplify and aws-amplify-react in your app or you will have duplicate aws-amplify pakcages in your node_modules which would cause this error.

[powerful23]

@baharev to be specific, one is under node_modules/ and one will be under node_modules/aws-amplify-react/node_modules

[baharev]

@powerful23 I did. When I upgrade, I delete the entire node_modules folder first. Furthermore, all the packages are installed locally (under the node_modules folder).

If I roll back to the old version, everything works just fine. It is the upgrade that triggers the "No userPool" error.

[powerful23]

@baharev can you confirm your amplify version is 0.4.8 and its under node_modules/ and then your aws-amplify-react is 0.1.54 and under node_modules/aws-amplify-react/node_modules there should be no anther aws-amplify

[elorzafe]

I have that problem when there are multiple amplify versions installed on node_modules. e.g.

node_modules/aws-amplify
node_modules/aws-amplify-react/node_modules/aws-amplify

You should remove the ones that are nested

[baharev]

OK, the good news is that now I can run the latest version, finally. The package.json was pinning the aws-amplify version to an old version. My bad, sorry.

The bad news is that I have the exact same buggy behavior on the device, as if nothing has changed.

The iOS and the browser is at the latest stable version as far as I can tell: iOS 11.4.

By the way, I wouldn't trust the emulator. I am testing it natively on the device (iPhone in this case).

The login works in Firefox and in Safari on my Linux desktop. So, as I said, as if nothing has changed, the exact same buggy behavior.

[powerful23]

@baharev thanks. We will reproduce in the native device and try to fix that.

[baharev]

@powerful23 I think that is wise. I once had an issue in Chrome, and it was only reproducible natively.

[jordanranz]

Hey @baharev,

I have just tested this on an iPhone 8 and iPhone X using Safari. Both are on iOS version 11.4 and both seemed to function properly (Could focus input and type passed 1 character).

For clarification, you are using the withAuthenticator HOC from the aws-amplify-react package? Also can you post the aws-amplify and aws-amplify-react versions you are using on your last attempt.

[baharev]

@jordanranz Thanks for the info!

For clarification, you are using the withAuthenticator HOC from the aws-amplify-react package?

This is what I have:

...

import { Authenticator } from 'aws-amplify-react';

...

const MyApp = (props) => {
  return <Authenticator onStateChange={onAuthStateChange}>
           <App {...props}/>
         </Authenticator>
}

Also can you post the aws-amplify and aws-amplify-react versions you are using on your last attempt.

From my package.json:

  "dependencies": {
    "amazon-cognito-identity-js": "^2.0.13",
    "aws-amplify": "^0.4.8",
    "aws-amplify-react": "^0.1.54",
    "aws-sdk": "^2.266.1",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-saga": "^0.16.0",
    "shortid": "^2.2.8"
  },

Please let me know if you need further information. I greatly appreciate your help.

[baharev]

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

I cannot debug on the device. However, would it be possible to monkey patch those functions that you need (as far as I can tell console.log only) and submit the results to an S3 bucket?

Would the log even help?

I am not quite sure why you needed let log = console.log.bind(console); in ConsoleLogger.ts.

I desperately need a solution to this issue. :(

[powerful23]

@baharev yeah you can try the monkey patch or you can try to write your own ConsoleLogger and hack the lib/Common/Logger/index.js to make it export that instead of the original one. I am sorry but we really have no idea about this issue because of the lack of the information.

[baharev]

@jordanranz The information I provided was no help? Is my installation OK?

[baharev]

@powerful23 I will create an empty ("Hello World") application from scratch. I would like to exclude the possibility that it is some obscure clash between my application and the amplify library. If it does not work with the empty application either, apparently my only possibility is to hack the console.log function.

[baharev]

I created an empty project from scratch, both on mobile hub, and locally with create react app. I used the latest version from everything involved (awsmobile, Amplify, react, etc). From the package.json:

  "dependencies": {
    "aws-amplify": "^1.0.2",
    "aws-amplify-react": "^1.0.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },

The good news is that now I can log in from that iPhone. However, I would not close this issue yet.

[baharev]

In the real app I still have the bug after upgrading everything to the latest version.

I compared the codes of the above "empty" project (the one that I made yesterday where I don't have the bug, see my previous comment), and the code of the app where this bug shows up, and the only difference I see is that my app is connected to the redux store.

My guess is that it is some sort of weird clash between the Amplify code and my app code which only causes problems in Safari on iOS. Please re-read my very first comment and the description of the bug. Maybe you can make an educated guess as to what might be worth trying.

Any ideas or advice how I could debug this?

I am skeptical about window.LOG_LEVEL = 'DEBUG';. It is partly because I would have to hack (monkey patch) ConsoleLogger since I cannot debug on the device, but mainly because I suspect the cause won't be logged.

[baharev]

OK, I monkey patched the console.log, console.error, console.warn functions and I also log window.onerror. I set window.LOG_LEVEL = 'DEBUG'; in the <head>.

The log file is ca. 34KB and there is information in it that I do not want to post publicly here. The stripped down version of it:

[object Object]
[DEBUG] 25:21.127 I18n - configure I18n
[DEBUG] 25:21.128 I18n - create I18n instance
[DEBUG] 25:21.129 AnalyticsClass - configure Analytics
[DEBUG] 25:21.141 AuthClass - configure Auth
[DEBUG] 25:21.155 Credentials - picking up credentials
[DEBUG] 25:21.145 AnalyticsClass - configure Analytics
[DEBUG] 25:21.154 Credentials - getting credentials
[DEBUG] 25:21.156 Credentials - need to get a new credential or refresh the existing one
[DEBUG] 25:21.156 Credentials - checking if credentials exists and not expired
[DEBUG] 25:21.155 Credentials - getting new cred promise
[DEBUG] 25:21.158 AuthClass - Getting current session
[DEBUG] 25:21.157 AuthClass - Getting current user credentials
[DEBUG] 25:21.160 Storage - configure called
[DEBUG] 25:21.161 StorageClass - configure Storage
[DEBUG] 25:21.163 API - create API instance
@@redux/INITk.c.g.o.y (action.type in the root reducer)
[DEBUG] 25:21.253 Hub - noname listening auth
[DEBUG] 25:21.359 AuthClass - getting current authenticted user
[DEBUG] 25:21.360 AuthClass - cannot load federated user from auth storage
[DEBUG] 25:21.361 AuthClass - get current authenticated userpool user
[DEBUG] 25:21.412 AuthClass - Failed to get user from user pool
[DEBUG] 25:21.414 AuthClass - Failed to get user from user pool
[DEBUG] 25:21.419 Credentials - getting credentials
[DEBUG] 25:21.420 Credentials - picking up credentials
[DEBUG] 25:21.421 Credentials - getting old cred promise
[DEBUG] 25:21.429 Credentials - setting credentials for guest

Logging stops here for good. Only a re-load starts it again.

Sign in is required for this app.

As far as I can tell, the first line, the [object Object] would show the amplify configs that I don't want to post here publicly. I am happy to send it to you privately, or provide more information as necessary.

Is this any help?

How can I resolve this issue?

[powerful23]

@baharev sorry but seems like the logging info is helpless to your issue. I think the issue is mainly about the UI component SignIn doesn't work in your code. Maybe you could try to replace the component with your own to see if it works: https://aws-amplify.github.io/amplify-js/media/authentication_guide.html#customize-withauthenticator or you could try signing up to see if it has the same issue like signing in.

[baharev]

@powerful23 Tried signing up, and that does not work either. Exactly the same buggy behavior.

Maybe you could try to replace the component with your own to see if it works

Sorry, I don't follow.

• What do we expect from that experiment?
• What should I try exactly?

The bug does not seem to be logged as I feared ("I suspect the cause won't be logged"). Poking around blindly does not sound like a good idea to me.

[jordanranz]

Hey @baharev, apologies for the lack of response before.

I would like to try and reproduce your issue on the iPhone 8 and X.

To refresh my context:

• You are using the amplify and amplify-react version 1.0.2 in your real app.
• You created a "Hello World" app that works properly with the only difference being that you are using redux.
• Using Safari, you are experiencing the same issue initially mentioned and cannot enter anything into the input boxes.
• The problem occurs on an iPhone 8 and X or any modern Apple phone.

Are these assumptions correct?

Is the redux store the only difference between your "hello world" app and your real app?

[baharev]

@jordanranz Thanks for the feedback. I thought this issue was neglected... :(

You are using the amplify and amplify-react version 1.0.2 in your real app.

Correct. (Double-checked.)

You created a "Hello World" app that works properly with the only difference being that you are using redux.

Not quite.

The "Hello World" app works 100% OK, that is correct.

In the real app I do use redux, but I use several other packages, and some hand-written CSS (but that CSS is NOT used on the login page).

The dependencies of the real app are:

  "dependencies": {
    "aws-amplify": "^1.0.2",
    "aws-amplify-react": "^1.0.2",
    "aws-sdk": "^2.279.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0",
    "shortid": "^2.2.12"
  },

So, redux is not the only difference.

Using Safari, you are experiencing the same issue initially mentioned and cannot enter anything into the input boxes.

More or less correct. I usually (but not always) can enter the first letter. Then it does not get the remaining letters. For example I typed everything (even if it is not shown) and then tried to login. The fields did not get those keystrokes because the login fails. I tried it several times.

It only happens in Safari. The real app works just fine in other browsers too.

The problem occurs on an iPhone 8 and X or any modern Apple phone.

No. It is an iPhone 5s, but the software is up-to-date.

Is the redux store the only difference between your "hello world" app and your real app?

No. See above the dependencies.

Any ideas why I see this awkward behavior?

[baharev]

@mlabieniec Hmmm, why did this question get the react native label? I am not using react native.

[baharev]

@jordanranz If rumors are to be believed, iOS 12 will still support the iPhone 5s. JavaScript sees an impressive screen size of 320x454 pixels on this device.

[jordanranz]

Hey @baharev,

Wanted to revisit this issue. I have tested on multiple real devices and cannot reproduce the same issue :(

My theory is that there may be some conflict with the hand-written CSS and the Amplify Auth component but it is impossible to tell without seeing the css that is defined in the DOM.

As a final try to attempt to reproduce, are you still experiencing this issue with the latest version of aws-amplify-react (2.1.4)?

[baharev]

@jordanranz Thanks for the feedback. I will test it again later this week with the latest amplify-react. I am busy at the moment.

The good news is that now I will be able to do some on device debugging.

Yes, the hand written CSS could be the problem.

[jordanranz]

Fantastic. I could take a look at the hand written css if you would like me to help you debug. I'd also be interested to investigate the css specifically on that input field to see what styles are being applied to it. Let me know what you see.

[haverchuck]

@baharev - Just checking in. Are you still seeing this issue?

[baharev]

@haverchuck I am terribly sorry, I could not get to it. I will do my best during the week-end to produce some feedback.

It is the first item for tomorrow.

[baharev]

Yes, I am still seeing this behavior with the latest version of everything. From the package.json:

  "dependencies": {
    "aws-amplify": "^1.1.19",
    "aws-amplify-react": "^2.3.0",
    "aws-sdk": "^2.391.0",
    "idb-keyval": "^3.1.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-saga": "^0.16.2",
    "shortid": "^2.2.14"
  },
  "devDependencies": {
    "react-scripts": "^2.1.3",
    "redux-devtools-extension": "^2.13.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]

$ npm --version
6.5.0
$ node --version
v8.12.0

iPhone OS 12.1.2 Safari mobile 12.0

The device is an iPhone 5S.

My theory is that there may be some conflict with the hand-written CSS and the Amplify Auth component but it is impossible to tell without seeing the css that is defined in the DOM.

@jordanranz Yes, that occurred to me too. What information would you need exactly to check this?

[baharev]

I figured very little of the application code is relevant since we already fail on the login page; practically only CSS of the app is involved. So I started deleting the irrelevant application code. When I arrived at basically just the hello world application, I started deleting the irrelevant CSS as well.

The culprit is this part of the CSS, double-checked:

* {
  user-select: none;
}

I can fix it in my application, no problem, but it would be nice to fix it in such a way that others won't run into this weird issue either if they have such a (questionable) CSS.

Please provide feedback.

[jordanranz]

@baharev For this specific case maybe we can apply a user-select override property to the input field to attempt to prevent this problem from happening. The only way to prevent problems like this from happening are to override specific existing properties (like global selectors *) so in the end it is the application developers responsibility to ensure they are not applying global styling they do not want to elements inside of their application.

I'll mark this as a feature request to add the user-select override.

[baharev]

@jordanranz OK. My proposed solution would be to use !important on user-select for those fields on the login page. As far as I am concerned, you can close this issue.

[jordanranz]

Using !important is generally bad practice. Adding these without !important should work fine since it is more specific than the global property. I have a branch with this fix, just need to test it.

I appreciate you working through this with us.

[baharev]

@jordanranz Perfect, thank you! And I appreciate your patience and support.

[haverchuck]

Closing this issue per @baharev saying the issue can be closed. Please feel free to reopen.

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.