Unable to redirect after authentication Ionic React private routes

Issue

I want to create a ProtectedRoute using Ionic react. I have been using this for help How to rewrite the protected/private route using TypeScript and React-Router 4, 5 or 6?

I am close but after successful authentication, navigation does not happen and the page stays on the login page.

for e.g.

http://localhost:8100/ correctly takes me to http://localhost:8100/login

but after successful login i am still in the login page

Can anyone please point me in the right direction? Code below

App.tsx

import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';
import React from 'react';
import { useEffect } from "react";
import { App as CapApp } from "@capacitor/app";
import { Browser } from "@capacitor/browser";
import { useAuth0 } from "@auth0/auth0-react";
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import './theme/theme.css'

import AddReceipt from './pages/AddReceipt';
import EditReceipt from './pages/EditReceipt';
import { callbackUri } from "./auth.config";
import SideDrawer from './components/SideDrawer';
import ProtectedRouteComponent,{ProtectedRouteProps} from './components/ProtectedRouteComponent';
import Login from './pages/Login';

const App: React.FC = () => {
  const { handleRedirectCallback } = useAuth0();

  useEffect(() => {
    CapApp.addListener("appUrlOpen", async ({ url }) => {
      if (url.startsWith(callbackUri)) {
        if (
          url.includes("state") &&
          (url.includes("code") || url.includes("error"))
        ) {
          await handleRedirectCallback(url);
        }

        await Browser.close();
      }
    });
  }, [handleRedirectCallback]);

  return(
  <IonApp>
    <IonReactRouter>
      <SideDrawer/>
      <IonRouterOutlet id="main">
         <ProtectedRouteComponent authenticationPath="/login" exact={true} path="/">
            <Home />
          </ProtectedRouteComponent>
          <ProtectedRouteComponent authenticationPath='/login' exact path="/add-receipt">
            <AddReceipt/>
          </ProtectedRouteComponent>
        <Route exact path="/edit-receipt/:receiptid">
          <EditReceipt></EditReceipt>
        </Route>
        <Route exact path='/login'>
          <Login></Login>
        </Route>      
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>);
};

export default App;

ProtectedRouteComponent.tsx

import React, { useEffect, useState } from "react";
import { Route,Redirect,RouteProps } from "react-router";
import { useAuth0 } from "@auth0/auth0-react";

export type ProtectedRouteProps = {
    //isAuthenticated: boolean;
    authenticationPath: string;
} & RouteProps


export const ProtectedRouteComponent:React.FC<ProtectedRouteProps>=props=>{
    const {isAuthenticated}=useAuth0();
    console.log(isAuthenticated)

    const[autheticated,setAuthenticated]= useState(false);
    useEffect(() => {
        if (isAuthenticated) {
            setAuthenticated(true);
            console.log('authenticated')
        }
    }, [isAuthenticated]);

        if(!autheticated){
            return <Redirect to='/login'></Redirect>
        }else{
            console.log({...props})
            return <Route {...props}/>   
        }
}


export default ProtectedRouteComponent

Solution

This worked for me. Hopefully, this helps someone

Step 1.) Removed the ProtectedRoute file

Step 2.) Changed the App.tsx as follows

import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';
import React from 'react';
import { useEffect } from "react";
import { App as CapApp } from "@capacitor/app";
import { Browser } from "@capacitor/browser";
import { useAuth0 } from "@auth0/auth0-react";
import { Storage } from '@capacitor/storage'
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import './theme/theme.css'

import AddReceipt from './pages/AddReceipt';
import EditReceipt from './pages/EditReceipt';
import { callbackUri } from "./auth.config";
import SideDrawer from './components/SideDrawer';
import ProtectedRouteComponent, { ProtectedRouteProps } from './components/ProtectedRouteComponent';
import Login from './pages/Login';
import Landing from './pages/Landing';

const App: React.FC = () => {
  const { handleRedirectCallback, isAuthenticated } = useAuth0();

  useEffect(() => {
    CapApp.addListener("appUrlOpen", async ({ url }) => {
      console.log('Hello');
      if (url.startsWith(callbackUri)) {
        if (
          url.includes("state") &&
          (url.includes("code") || url.includes("error"))
        ) {
          await handleRedirectCallback(url);
        }

        await Browser.close();
      }
    });
  }, [handleRedirectCallback]);



  return (
    <IonApp>
      <IonReactRouter>
        <SideDrawer />
        <IonRouterOutlet id="main">
          <Route exact path="/home" render={(props) => {
            return isAuthenticated ? <Home /> : <Login />;
          }} />

          <Route exact path="/add-receipt" render={(props) => {
            return isAuthenticated ? <AddReceipt /> : <Login />;
          }} />

          <Route exact path="/edit-receipt/:receiptid" render={(props) => {
            return isAuthenticated ? <EditReceipt /> : <Login />;
          }} />
          
          <Route exact path='/Landing' render={(props)=>{
            return isAuthenticated ? <Landing /> : <Login />;
          }} />

          <Route exact path="/"  render={(props) => {
              return isAuthenticated ? <Home /> : <Login />;
          }} />
            
          <Route exact path='/login'>
            <Login></Login>
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>);
};

export default App;

Answered By - user1131926