IOS Physical Device - History.replace after successful login is not working

Ionic Framework Ionic React
1

Hello, so I am running into an issue and I cannot understand what seems to be the problem.

I have integrated Firebase into my application and it is working great.

const App: React.FC = () => {

  const [authValue, setAuthValue] = useState(false)

useEffect(() => {
    onAuthStateChanged(auth, (currentUser) => {
      if (currentUser) {
          setAuthValue(true)                   
      } 
      else {
        setAuthValue(false)
      }
    });
}, []);


  return (
  
    <IonApp>
        <IonReactRouter>
          <Switch>
            {authValue? <TabRoot /> : <LoginRoot />}
          </Switch>
        </IonReactRouter>   
    </IonApp>

  )
};

export default App

As you can see above, I have set up two different route roots, one if a user is logged in (TabRoot) and another if a user is not (LoginRoot)

Using Firebase’s Auth State, when a user is logged in they have access to the TabRoot. Everything is working great on Web and IOS Simulator.

However, on my physical IOS device when I attempt to switch roots by logging in, nothing happens. The page remains stuck on the Login Page. See code below for the login page:

const Login: React.FC = () => {

  const [loginEmail, SetLoginEmail] = useState("")
  const [loginPassword, SetLoginPassword] = useState("")
  const [error, SetError] = useState("")
  const [signingIn, setSigningIn] = useState(false)
  const history = useHistory()



  function SignIn() {
    if (error !== '') SetError('');

    setSigningIn(true)

    signInWithEmailAndPassword(auth, loginEmail, loginPassword)
  .then((userCredential) => {
    history.replace("../d.Home")   
  })
  .catch((error) => {
    setSigningIn(false)
    SetError('Unable to sign in. Please try again.')
  });
  }


  


  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle className="notif--header--name">Login</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        
      <IonList>
          <IonItem>
            <IonLabel position="floating">Email</IonLabel>
            <IonInput onIonChange={e => SetLoginEmail(e.detail.value!)} />
          </IonItem>
          <IonItem>
          <IonLabel position="floating">Password</IonLabel>
          <IonInput onIonChange={e => SetLoginPassword(e.detail.value!)} />
          </IonItem>
        </IonList>


        <div className="error--text">
          <ErrorText error={error} />
        </div>
        <a className="login--forgot--password" href='/forgotpasswordpage'>Forgot Password?</a>
        <div className='page--container'>
          <IonButton className="login--button page" onClick={SignIn} fill='clear'>Login</IonButton>
          <div className='small--container page'>
            <p>or</p>
          <a className="login--button--small" href='/register'>Register</a>
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};


export default Login

I am not sure why on the IOS physical device it does nothing. History.replace is working fine on web on the IOS simulator.

Please help me out if you have any ideas, thanks!

2

I was able to solve this issue. Firstly, I watched Aaron Saunder’s video on youtube using ReactFire and I changed the way my app is routed:

const App: React.FC = () => {

  return (
    <IonApp>
      <AuthProvider sdk={auth}>
        <FirestoreProvider sdk={db}>
          <IonReactRouter>
            <IonRouterOutlet>
              <AuthWrapper fallback={<LoginRoot />}>
                <TabRoot />
              </AuthWrapper>
            </IonRouterOutlet>
          </IonReactRouter>
        </FirestoreProvider> 
      </AuthProvider>
    </IonApp>
  )
};


export const AuthWrapper = ({
  children,
  fallback,
}: React.PropsWithChildren<{ fallback: JSX.Element }>): JSX.Element => {
  const { status, data: signInCheckResult } = useSigninCheck();
  console.log(signInCheckResult);

  if (!children) {
    throw new Error("Children must be provided");
  }
  if (status === "loading") {
    return <IonLoading isOpen={status === "loading"} />;
  } else if (signInCheckResult.signedIn === true) {
    return children as JSX.Element;
  }

  return fallback;
}


export default App

when I did this, initially I got a stuck error on the IOS physical device, again I don’t know why.

So what I did was instead of syncing to Xcode and running the project through Xcode, I used the official Ionic Plugin and deployed onto my Iphone directing from there. For whatever reason, this seamed to sync better and clean up whatever bug that was persisting through running the app on Xcode.

I think some data just got permanently looped or something that prevented the app to ever get into a useable state from running through Xcode, but when deployed from the Ionic IOS plugin unto my physical phone it worked great!

1 Like