prevent authenticated user to access the Intro route

src/App/App.js

@@ -6,13 +6,16 @@ const { useTranslation } = require('react-i18next');
 const { Router } = require('stremio-router');
 const { Core, Shell, Chromecast, DragAndDrop, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
 const { NotFound } = require('stremio/routes');
-const { ToastProvider, CONSTANTS } = require('stremio/common');
+const { ToastProvider, CONSTANTS, withCoreSuspender } = require('stremio/common');
 const ServicesToaster = require('./ServicesToaster');
 const DeepLinkHandler = require('./DeepLinkHandler');
 const ErrorDialog = require('./ErrorDialog');
+const withProtectedRoutes = require('./withProtectedRoutes');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
+const RouterWithProtectedRoutes = withCoreSuspender(withProtectedRoutes(Router));
+
 const App = () => {
     const { i18n } = useTranslation();
     const onPathNotMatch = React.useCallback(() => {
@@ -152,7 +155,7 @@ const App = () => {
                             <ToastProvider className={styles['toasts-container']}>
                                 <ServicesToaster />
                                 <DeepLinkHandler />
-                                <Router
+                                <RouterWithProtectedRoutes
                                     className={styles['router']}
                                     viewsConfig={routerViewsConfig}
                                     onPathNotMatch={onPathNotMatch}

src/App/withProtectedRoutes.js

@@ -0,0 +1,20 @@
+const React = require('react');
+const { Intro } = require('stremio/routes');
+const { useProfile } = require('stremio/common');
+
+const withProtectedRoutes = (Component) => {
+    return function withProtectedRoutes(props) {
+        const profile = useProfile();
+        const onRouteChange = React.useCallback((routeConfig) => {
+            if (profile.auth !== null && routeConfig.component === Intro) {
+                window.location.replace('#/');
+                return true;
+            }
+        }, [profile]);
+        return (
+            <Component {...props} onRouteChange={onRouteChange} />
+        );
+    }
+};
+
+module.exports = withProtectedRoutes;

src/router/Router/Router.js

@@ -11,7 +11,7 @@ const Route = require('../Route');
 const routeConfigForPath = require('./routeConfigForPath');
 const urlParamsForPath = require('./urlParamsForPath');
 
-const Router = ({ className, onPathNotMatch, ...props }) => {
+const Router = ({ className, onPathNotMatch, onRouteChange, ...props }) => {
     const viewsConfig = React.useMemo(() => props.viewsConfig, []);
     const [views, setViews] = React.useState(() => {
         return Array(viewsConfig.length).fill(null);
@@ -42,37 +42,40 @@ const Router = ({ className, onPathNotMatch, ...props }) => {
             const urlParams = urlParamsForPath(routeConfig, typeof pathname === 'string' ? pathname : '');
             const routeViewIndex = viewsConfig.findIndex((vc) => vc.includes(routeConfig));
             const routeIndex = viewsConfig[routeViewIndex].findIndex((rc) => rc === routeConfig);
-            setViews((views) => {
+            const handled = typeof onRouteChange === 'function' && onRouteChange(routeConfig, urlParams, queryParams);
-                return views
+            if (!handled) {
-                    .slice(0, viewsConfig.length)
+                setViews((views) => {
-                    .map((view, index) => {
+                    return views
-                        if (index < routeViewIndex) {
+                        .slice(0, viewsConfig.length)
-                            return view;
+                        .map((view, index) => {
-                        } else if (index === routeViewIndex) {
+                            if (index < routeViewIndex) {
-                            return {
+                                return view;
-                                key: `${routeViewIndex}${routeIndex}`,
+                            } else if (index === routeViewIndex) {
-                                component: routeConfig.component,
+                                return {
-                                urlParams: view !== null && isEqual(view.urlParams, urlParams) ?
+                                    key: `${routeViewIndex}${routeIndex}`,
-                                    view.urlParams
+                                    component: routeConfig.component,
-                                    :
+                                    urlParams: view !== null && isEqual(view.urlParams, urlParams) ?
-                                    urlParams,
+                                        view.urlParams
-                                queryParams: view !== null && isEqual(Array.from(view.queryParams.entries()), Array.from(queryParams.entries())) ?
+                                        :
-                                    view.queryParams
+                                        urlParams,
-                                    :
+                                    queryParams: view !== null && isEqual(Array.from(view.queryParams.entries()), Array.from(queryParams.entries())) ?
-                                    queryParams
+                                        view.queryParams
-                            };
+                                        :
-                        } else {
+                                        queryParams
-                            return null;
+                                };
-                        }
+                            } else {
-                    });
+                                return null;
-            });
+                            }
+                        });
+                });
+            }
         };
         window.addEventListener('hashchange', onLocationHashChange);
         onLocationHashChange();
         return () => {
             window.removeEventListener('hashchange', onLocationHashChange);
         };
-    }, [onPathNotMatch]);
+    }, [onPathNotMatch, onRouteChange]);
     return (
         <div className={classnames(className, 'routes-container')}>
             {
@@ -93,6 +96,7 @@ const Router = ({ className, onPathNotMatch, ...props }) => {
 Router.propTypes = {
     className: PropTypes.string,
     onPathNotMatch: PropTypes.func,
+    onRouteChange: PropTypes.func,
     viewsConfig: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.exact({
         regexp: PropTypes.instanceOf(RegExp).isRequired,
         urlParamsNames: PropTypes.arrayOf(PropTypes.string).isRequired,