Add route protection

src/components/Authenticator/authenticator.ts

@@ -29,20 +29,33 @@ function showHideGuestElements(hideOrShow: 'hide' | 'show' = 'hide') {
   });
 }
 
-/**
+// Prepares the UI for the user who is logged in
- * Prepares the UI for the user who is logged in
- */
 function handleGuest() {
+  const authenticatedRoutes = [
+    '/settings/profile',
+    '/settings/change-password',
+  ];
+
   showHideAuthElements('hide');
   showHideGuestElements('show');
+
+  // If the user is on an authenticated route, redirect them to the home page
+  if (authenticatedRoutes.includes(window.location.pathname)) {
+    window.location.href = '/';
+  }
 }
 
-/**
+// Prepares the UI for the user who is logged out
- * Prepares the UI for the user who is logged out
- */
 function handleAuthenticated() {
+  const guestRoutes = ['/login', '/signup'];
+
   showHideGuestElements('hide');
   showHideAuthElements('show');
+
+  // If the user is on a guest route, redirect them to the home page
+  if (guestRoutes.includes(window.location.pathname)) {
+    window.location.href = '/';
+  }
 }
 
 export function handleAuthRequired() {

src/components/Navigation/navigation.ts

@@ -4,7 +4,7 @@ import { handleAuthRequired } from '../Authenticator/authenticator';
 
 function logout() {
   Cookies.remove(TOKEN_COOKIE_NAME);
-  handleAuthRequired();
+  // Reloading will automatically redirect the user if required
   window.location.reload();
 }
 

src/pages/signup.astro

@@ -15,16 +15,17 @@ import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
 >
   <div class='container'>
     <div
-      class='mx-auto flex flex-col items-start justify-start pt-10 sm:pt-20 pb-28 sm:max-w-[400px] sm:items-center sm:justify-center'
+      class='mx-auto flex flex-col items-start justify-start pb-28 pt-10 sm:max-w-[400px] sm:items-center sm:justify-center sm:pt-20'
     >
       <div class='mb-2 text-left sm:mb-5 sm:text-center'>
         <h1 class='mb-2 text-3xl font-semibold sm:mb-5 sm:text-5xl'>Sign Up</h1>
-        <p class='text-base hidden text-gray-600 sm:block leading-6 mb-3'>
+        <p class='mb-3 hidden text-base leading-6 text-gray-600 sm:block'>
-          Create an account to track your progress, showcase your skill-set and be a part of the community.
+          Create an account to track your progress, showcase your skill-set and
+          be a part of the community.
         </p>
-        <p class='block text-sm text-gray-600 mb-3 sm:hidden'>
+        <p class='mb-3 block text-sm text-gray-600 sm:hidden'>
-          Create an account to track your progress, showcase your skill-set and be a part of the community.
+          Create an account to track your progress, showcase your skill-set and
-          videos.
+          be a part of the community. videos.
         </p>
       </div>
 
@@ -46,12 +47,3 @@ import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
     </div>
   </div>
 </SettingLayout>
-
-<script>
-  import Cookies from 'js-cookie';
-  import { TOKEN_COOKIE_NAME } from '../lib/constants';
-  const token = Cookies.get(TOKEN_COOKIE_NAME);
-  if (token) {
-    window.location.href = '/';
-  }
-</script>