I have a login button in a React component that works perfectly in desktop browsers but not on mobile. I'm finding it hard to debug.

This is the form.

 <form className="signin_form" onSubmit={onLogin}>
          <label className="sr-only" htmlFor="email"></label>
          <input
            onChange={(e) => {
              setEmail(e.target.value);
            }}
            className="form_input"
            type="text"
            name="email"
            placeholder="Email"
            autoFocus
          />

          <label className="sr-only" htmlFor="password"></label>
          <input
            onChange={(e) => {
              setPassword(e.target.value);
            }}
            className="form_input"
            type="password"
            name="password"
            placeholder="Password"
          />
          {error && (
            <p className="error error_message">
              Username or password is incorrect
            </p>
          )}
          <button type="submit" className="btn btn_primary">
            Sign In
          </button>
        </form>

And here is the function that is called on submit

const onLogin = async (e) => {
    e.preventDefault();
    try {
      const result = await axios.post(`${url}/login`, {
        email,
        password,
      });

      dispatch({ type: SET_TOKEN, payload: result.data.token });

      if (result.data.status === 1) {
        const newData = await axios.get(`${url}/syncStore`, {
          headers: { token: result.data.token },
        });

        dispatch({
          type: UPDATE_STORE,
          payload: newData.data,
        });

        navigate("/dashboard");
      } else {
        showError();
      }
    } catch (error) {
      console.log(error);
    }
  };

Any help greatly appreciated

The button call the backend api and check creds. Then log in the user. It just won't work on mobile.

I've tested on Safari, Chrome and Firefox

CodePudding user response：

Check to see if some other div elements are overlapping the button in mobile device, if you are using responsive css. Sometimes problem was in styles of div elements.

CodePudding user response：

Code-related answer

In my opinion, the bug can be related to the submit callback being async. As such, it returns a Promise that may remain in its initial state without being ever fired thus, your code is never executed.

First thing you can do is wrap your code this way:

const onLogin = (e) => {
  (async function() {
    // your code here
  })().catch(console.error)
}

General debugging on Mobile

The bug you're experiencing may be related to how you're code is transpiled: if you're using ES2015 features without polyfilling them, may be unsupported in some mobile browsers. If you're using CRA, this GitHub issue may help you, otherwise you can take a look at Core JS and Babel. Also, I'd suggest to check for unsupported features on Can I Use.

It may also be related to some race conditions which, by chance, you didn't ever see during development. To try spot them you can try throttling network speed and CPU (Chrome docs as an example).

If the steps above didn't work, you can:

• simulate mobile with Chrome's mobile view;
• debug on physical device or using an emulator (links for convenience: Android Studio, XCode) either by:
  • debug directly on mobile using Chrome, see this SO answer;
  • use remote debbugging with a PC or Mac:
    • Chrome for Android docs;
    • outdated Safari Docs which should still hold (didn't try myself).

CodePudding user response：

I had redeployed the frontend without changing a url variable so it was pointing to localhost on the server! School boy error!