Solve issue with protected route (#4413)

app/javascript/App.jsx

 import React, { useEffect } from 'react';
 import { Container } from 'react-bootstrap';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import Header from './components/shared_components/Header';
@@ -12,6 +12,7 @@ import BackgroundBuffer from './components/shared_components/BackgroundBuffer';
 export default function App() {
   const currentUser = useAuth();
   const pageHeight = currentUser?.signed_in ? 'regular-height' : 'no-header-height';
+  const location = useLocation();
 
   // //i18n
   const { i18n } = useTranslation();
@@ -29,7 +30,7 @@ export default function App() {
 
   return (
     <>
-      {currentUser?.signed_in && <Header /> }
+      {location.pathname !== '/' && currentUser?.signed_in && <Header /> }
       {currentUser?.verified && <BackgroundBuffer /> }
       <Container className={pageHeight}>
         <Outlet />

app/javascript/components/home/HomePage.jsx

 import React, { useEffect } from 'react';
 import { Card, Form } from 'react-bootstrap';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Button from 'react-bootstrap/Button';
 import ButtonLink from '../shared_components/utilities/ButtonLink';
 import useEnv from '../../hooks/queries/env/useEnv';
 import Logo from '../shared_components/Logo';
 import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting';
+import { useAuth } from '../../contexts/auth/AuthProvider';
 
 export default function HomePage() {
   const { data: env } = useEnv();
   const { t } = useTranslation();
   const { search } = useLocation();
+  const currentUser = useAuth();
+  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const inviteToken = searchParams.get('inviteToken');
   const { data: registrationMethod } = useSiteSetting('RegistrationMethod');
@@ -20,6 +23,18 @@ export default function HomePage() {
     document.cookie = `token=${inviteToken};path=/;`;
   }, [inviteToken]);
 
+  // redirect user to correct page based on signed in status and CreateRoom permission
+  useEffect(
+    () => {
+      if (!currentUser.stateChanging && currentUser.signed_in && currentUser.permissions.CreateRoom === 'true') {
+        navigate('/rooms');
+      } else if (!currentUser.stateChanging && currentUser.signed_in && currentUser.permissions.CreateRoom === 'false') {
+        navigate('/home');
+      }
+    },
+    [currentUser.signed_in],
+  );
+
   function showSignUp() {
     return registrationMethod !== 'invite' || !!inviteToken;
   }

app/javascript/contexts/auth/AuthProvider.jsx

@@ -27,6 +27,7 @@ export default function AuthProvider({ children }) {
     permissions: currentUser?.permissions,
     role: currentUser?.role,
     verified: currentUser?.verified,
+    stateChanging: false,
   };
 
   const memoizedCurrentUser = useMemo(() => user, [user]);

app/javascript/hooks/mutations/sessions/useDeleteSession.jsx

@@ -3,19 +3,23 @@ import { toast } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import axios from '../../../helpers/Axios';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function useDeleteSession() {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
+  const currentUser = useAuth();
 
   return useMutation(
     () => axios.delete('/sessions/signout.json'),
     {
       onSuccess: async () => {
-        await navigate('/');
+        currentUser.stateChanging = true;
         queryClient.refetchQueries('useSessions');
+        await navigate('/');
         toast.success(t('toast.success.session.signed_out'));
+        currentUser.stateChanging = false;
       },
       onError: () => {
         toast.error(t('toast.error.problem_completing_action'));