first commit

common/resources/client/auth/guards/auth-route.tsx

@@ -0,0 +1,29 @@
+import {ReactElement} from 'react';
+import {Navigate, Outlet} from 'react-router-dom';
+import {useAuth} from '../use-auth';
+import {NotFoundPage} from '@common/ui/not-found-page/not-found-page';
+import {useSettings} from '@common/core/settings/use-settings';
+
+interface Props {
+  children?: ReactElement;
+  permission?: string;
+  requireLogin?: boolean;
+}
+export function AuthRoute({children, permission, requireLogin = true}: Props) {
+  const {isLoggedIn, hasPermission, isSubscribed} = useAuth();
+  const {billing} = useSettings();
+  if (
+    (requireLogin && !isLoggedIn) ||
+    (permission && !hasPermission(permission))
+  ) {
+    if (isLoggedIn) {
+      return billing.enable && !isSubscribed ? (
+        <Navigate to="/pricing" replace />
+      ) : (
+        <NotFoundPage />
+      );
+    }
+    return <Navigate to="/login" replace />;
+  }
+  return children || <Outlet />;
+}

common/resources/client/auth/guards/guest-route.tsx

@@ -0,0 +1,27 @@
+import {useAuth} from '../use-auth';
+import {ReactElement, useContext} from 'react';
+import {Navigate, Outlet, useLocation} from 'react-router-dom';
+import {useAppearanceEditorMode} from '../../admin/appearance/commands/use-appearance-editor-mode';
+import {SiteConfigContext} from '@common/core/settings/site-config-context';
+
+interface GuestRouteProps {
+  children: ReactElement;
+}
+export function GuestRoute({children}: GuestRouteProps) {
+  const {isLoggedIn, getRedirectUri} = useAuth();
+  const {isAppearanceEditorActive} = useAppearanceEditorMode();
+  const redirectUri = getRedirectUri();
+  const {auth} = useContext(SiteConfigContext);
+  const {pathname} = useLocation();
+
+  if (isLoggedIn && !isAppearanceEditorActive) {
+    // prevent recursive redirects
+    if (redirectUri !== pathname) {
+      return <Navigate to={redirectUri} replace />;
+    } else if (auth.secondaryRedirectUri) {
+      return <Navigate to={auth.secondaryRedirectUri} replace />;
+    }
+  }
+
+  return children || <Outlet />;
+}

common/resources/client/auth/guards/not-subscribed-route.tsx

@@ -0,0 +1,20 @@
+import {useAuth} from '../use-auth';
+import {ReactElement} from 'react';
+import {Navigate, Outlet} from 'react-router-dom';
+
+interface GuestRouteProps {
+  children: ReactElement;
+}
+export function NotSubscribedRoute({children}: GuestRouteProps) {
+  const {isLoggedIn, isSubscribed} = useAuth();
+
+  if (!isLoggedIn) {
+    return <Navigate to="/register" replace />;
+  }
+
+  if (isLoggedIn && isSubscribed) {
+    return <Navigate to="/billing" replace />;
+  }
+
+  return children || <Outlet />;
+}

common/resources/client/auth/guards/subscribed-route.tsx

@@ -0,0 +1,16 @@
+import {useAuth} from '../use-auth';
+import {ReactElement} from 'react';
+import {Navigate, Outlet} from 'react-router-dom';
+
+interface GuestRouteProps {
+  children: ReactElement;
+}
+export function SubscribedRoute({children}: GuestRouteProps) {
+  const {isSubscribed} = useAuth();
+
+  if (!isSubscribed) {
+    return <Navigate to="/pricing" replace />;
+  }
+
+  return children || <Outlet />;
+}