Handle Login/Sign Up in PWA mobile app with Tabs using Ionic

Question

Problem: I am building an Ionic PWA React mobile app and I am facing a problem here. I want to show login/signUp page/modal when there is no userToken in the localStorage. As mentioned in ionic docs I have to put all pages under a tab's sub group and login/signUp is not one of them so I decided to use modal which Ionic it self suggests using modal for login/signUp but when I am using modal, the modal will cover the whole app and user wont be able to interact with app any more. If I allow them to dismiss the modal then I have to redirect them to another tab (because user does not have permission to see the prev tab) which is not correct from user experience perspective and will confuse user or I wont allow user to dismiss the modal which user wont be able to interact with tabs any more!.

Question: I have a tab based PWA mobile application which users can visit the app but in order to access Porfile Tab, they have to login/signUp. How can I implement login/signUp?

My App Component

export default function App() {
    
    return (
        <IonApp>
            <IonReactRouter>
                <IonRouterOutlet>
                    <Route path="/tabs" render={() => <Tabs />} />
                    <Route exact path="/">
                        <Redirect to="/tabs" />
                    </Route>
                </IonRouterOutlet>
            </IonReactRouter>
        </IonApp>
    )
}

My Tabs Component

return (
<IonContent>
    <IonTabs>
        <IonRouterOutlet>
            <Redirect exact path="/tabs" to="/tabs/home"/> // Public Tab
            <Route exact path={routes.home} component={HomeTab}/> // public Tab
            <Route exact path={routes.myPrograms} component={MyProgramTab}/> // need login to see this tab
            <Route exact path={routes.etiquette} component={EtiquettesTab}/> // Public Tab
            <Route path={routes.profile} component={ProfileTab}/> // need login to see this tab
            
            <Route exact path="/tabs">
                <Redirect to={routes.home}/>
            </Route>
            <Redirect exact path="/" to="/tabs/home"/>
            <Route component={NotFound}/>
        </IonRouterOutlet>
                
        <IonTabBar slot="bottom">
            <IonTabButton tab="profile" href={routes.profile}>
                <IonIcon aria-hidden="true" icon={personSharp} size='small'/>
                <IonLabel>Profile</IonLabel>
            </IonTabButton>
            <IonTabButton tab="etiquette" href={routes.etiquette}>
                <IonIcon aria-hidden="true" icon={readerSharp} size='small'/>
                <IonLabel>Etiquette</IonLabel>
            </IonTabButton>
            <IonTabButton tab="my-program" href={routes.myPrograms}>
                <IonIcon aria-hidden="true" icon={barbellSharp} size='small'/>
                <IonLabel>My Program</IonLabel>
            </IonTabButton>
            <IonTabButton tab="home" href={routes.home}>
                <IonIcon aria-hidden="true" icon={homeSharp} size='small'/>
                <IonLabel>Home</IonLabel>
            </IonTabButton>
        </IonTabBar>
    </IonTabs>
</IonContent>
)