Clear Auth History Stack With 'react-router-dom'

Ionic Framework Ionic React
1

Hello,

I was wondering if there is a way to clear the history of my auth stack before I navigate to my app stack.
I have 3 pages in the auth stack I have to pass through before authenticating. The code below only remove the last page as expected, but is there a way to remove all the past pages?

import { useHistory } from 'react-router-dom'

const Component = () => {

const history = useHistory();

const handleAuthentication = () => {
  // logic
  history.replace('/app');
}
}

The reason for this is that “swipe back” on phone is making the app go back to auth stack. I override the hardware back button listener to not do that. However, the “swipe back” on IOS and android were not overridden

Thanks!

ionic info:

Packages:
“@ionic/react”: “^7.4.2”,
“@ionic/react-router”: “^7.4.2”,
“react-router”: “^5.3.4”,
“react-router-dom”: “^5.3.4”,
“@types/react-router”: “^5.1.20”,
“@types/react-router-dom”: “^5.3.3”,

Ionic:

Ionic CLI : 7.1.1
Ionic Framework : @ionic/react 7.5.6

Capacitor:

Capacitor CLI : 5.4.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : 5.5.1

Utility:

cordova-res : 0.15.4
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v20.10.0
npm : 10.2.3
OS : macOS Unknown

───────────────────────────────────────────────

 Ionic CLI update available: 7.1.1 → 7.1.5
     Run npm i -g @ionic/cli to update

───────────────────────────────────────────────

2

I don’t know how to clear the auth history stack, but it is possible to disable the swipe back gesture on specific pages.

Here is the code I use for that (original idea here):

useGestureDisableSwipeBack.ts

import { useEffect } from 'react';
import { createGesture } from '@ionic/react';

// https://forum.ionicframework.com/t/how-to-disable-swipe-to-go-back-gesture-on-one-page-only-ionic-v5-react/196795/4
const useGestureDisableSwipeBack = (): void => {
  useEffect(() => {
    const pageSelector = document.querySelector('my-example-selector');
    if (pageSelector) {
      const gesture = createGesture({
        el: pageSelector,
        threshold: 0,
        gestureName: 'disable-swipe-back',
        gesturePriority: 40.5, // Priority of swipe to go back is 40.
        // onMove: (event) => console.log(event),
      });
      gesture.enable(true);
    }
    return () => {
      // TODO: Destroy gesture.
      // console.log('gesture clear placeholder');
      // gesture.destroy;
    };
  }, []);
};

export default useGestureDisableSwipeBack;
1 Like
3

Worked perfectly as intended Thanks!