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
CodePudding user response:
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;