Merge pull request #463 from Open-Earth-Foundation/fix/logout-redirect

fix(ui): redirecting unauthenticated users to login page
Open-Earth-Foundation · Apr 29, 2024 · 9731dd9 · 9731dd9
2 parents 9c919f5 + 745b080
commit 9731dd9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/app/src/app/[lng]/[inventory]/page.tsx b/app/src/app/[lng]/[inventory]/page.tsx
@@ -9,6 +9,7 @@ import { CircleIcon } from "@/components/icons";
 import { NavigationBar } from "@/components/navigation-bar";
 import { useTranslation } from "@/i18n/client";
 import { api, useGetCityPopulationQuery } from "@/services/api";
+import { CheckUserSession } from "@/util/check-user-session";
 import {
   formatPercent,
   getShortenNumberUnit,
@@ -36,6 +37,7 @@ import {
   Tooltip,
   useToast,
 } from "@chakra-ui/react";
+import { signIn, useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import NextLink from "next/link";
 import { useRouter, useParams } from "next/navigation";
@@ -76,6 +78,8 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) {
   const { t } = useTranslation(lng, "dashboard");
   const toast = useToast();
   const router = useRouter();
+  // Check if user is authenticated otherwise route to login page
+  CheckUserSession();
   const { inventory: inventoryParam } = useParams();
   let inventoryId = inventoryParam as string | null;
   if (inventoryId === "null" || inventoryId === "undefined") {
@@ -384,24 +388,25 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) {
                     />
                     <Box>
                       <Box className="flex gap-1">
-                        {inventory?.city.area! == 0 || inventory?.city.area === null ? (
-                           <Text
-                           fontFamily="heading"
-                           color="border.neutral"
-                           fontSize="headline.sm"
-                           fontWeight="semibold"
-                           lineHeight="32"
-                         >
-                           N/A
-                         </Text>
+                        {inventory?.city.area === null ||
+                        inventory?.city.area! === 0 ? (
+                          <Text
+                            fontFamily="heading"
+                            color="border.neutral"
+                            fontSize="headline.sm"
+                            fontWeight="semibold"
+                            lineHeight="32"
+                          >
+                            N/A
+                          </Text>
                         ) : (
                           <Text
                             fontFamily="heading"
                             color="base.light"
                             fontSize="headline.sm"
                             fontWeight="semibold"
                             lineHeight="32"
-                            >
+                          >
                             {Math.round(inventory?.city.area!)}
                             <span className="text-[16px]">km2</span>
                           </Text>

diff --git a/app/src/app/[lng]/page.tsx b/app/src/app/[lng]/page.tsx
@@ -4,6 +4,8 @@ import { Box, Spinner, Text } from "@chakra-ui/react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { useTranslation } from "@/i18n/client";
+import { useSession } from "next-auth/react";
+import { CheckUserSession } from "@/util/check-user-session";
 
 export default function HomePage({
   params: { lng },
@@ -15,6 +17,8 @@ export default function HomePage({
   const { data: userInfo, isLoading: isUserInfoLoading } =
     api.useGetUserInfoQuery();
 
+  // Check if user is authenticated otherwise route to login page
+  CheckUserSession();
   useEffect(() => {
     const defaultInventoryAvailable = !!userInfo?.defaultInventoryId;
     const defaultInventoryPath = `/${userInfo?.defaultInventoryId}`;

diff --git a/app/src/util/check-user-session.ts b/app/src/util/check-user-session.ts
@@ -0,0 +1,13 @@
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+
+export const CheckUserSession = () => {
+  const router = useRouter();
+
+  const { data, status } = useSession({
+    required: true,
+    onUnauthenticated() {
+      router.push("/auth/login");
+    },
+  });
+};