I am using React + Ionic/Capacitor for my iOS app and keep getting my app rejected due to the reviewer being unable to login with my provided credentials. I have tested inputting the credentials using a real device and iOS simulator with no issues (including copy/pasting the provided values). Based on the screenshots provided by the reviewer, my state variables are not being updated as the strings lengths are 0 ("enter both an email and password error")
Here is my "Login" page and the relevant TypeScript code:
/* React imports */
import React, { useEffect, useState } from 'react';
import { Link } from "react-router-dom";
import { useHistory } from 'react-router';
import { useDispatch, useSelector } from "react-redux"
import { setUserState } from '../redux/actions';
/* Ionic/Capacitor */
import { IonContent, IonHeader, IonButton, IonInput, IonItem, IonSpinner, IonList, IonPage, IonLoading, IonTitle, InputChangeEventDetail } from '@ionic/react';
import { useToast } from "@agney/ir-toast";
const LandingPage: React.FC = () => {
// state variables
const [busy, setBusy] = useState<boolean>(false);
const [emailSignIn, setEmailSignIn] = useState("");
const [passwordSignIn, setPasswordSignIn] = useState("");
const [loggingIn, setLoggingIn] = useState<boolean>(false);
const Toast = useToast();
const history = useHistory();
// updates emailSignIn state variable on input
const updateEmailSignIn = React.useCallback(
async (e: CustomEvent<InputChangeEventDetail>) => {
const ionInput = e.detail;
if (!ionInput) {
return;
}
const input = ionInput.value;
setEmailSignIn(input || "");
console.log(input);
},
[],
);
// updates passwordSignIn state variable on input
const updatePassword = React.useCallback(
async (e: CustomEvent<InputChangeEventDetail>) => {
const ionInput = e.detail;
if (!ionInput) {
return;
}
const input = ionInput.value;
setPasswordSignIn(input || "");
console.log(input);
},
[],
);
// REVIEWER IS GETTING THIS ERROR!!!!
async function logIn() {
if (emailSignIn.trim().length == 0 ||
passwordSignIn.length == 0) {
Toast.error("Enter both an email and a password");
setLoggingIn(false);
return;
}
// handle login with firebase, code excluded
}
return (
<IonPage className='app-root'>
<IonContent>
<IonList inset={true} mode='ios'
className='sign-in-sign-up-list'>
<IonItem mode='ios' >
<IonInput
clearInput={true}
color="transparent"
mode='ios'
value={emailSignIn}
type="email"
placeholder="Email"
id="emailSignIn"
onIonChange={updateEmailSignIn}
></IonInput>
</IonItem>
<IonItem mode='ios' >
<IonInput
color="transparent"
mode='ios'
clearOnEdit={false}
value={passwordSignIn}
type="password"
placeholder="Password"
id="passwordSignIn"
onIonChange={updatePassword} >
</IonInput>
</IonItem>
<br />
<IonButton mode='ios' onClick={() => {
setLoggingIn(true); logIn();
}}>Sign In</IonButton>
<br />
<br />
</IonList>
</IonContent>
</IonPage>
)
}
export default React.memo(LandingPage);
So... I have a few questions:
- Are the reviewers using a simulator or real device?
- Why do my state variables update on my end but the reviewer is having login issues?
- Is it okay to post code here that ISN'T native code but directly related to the app? (I am assuming so but please let me know otherwise).