Merge pull request #406 from panoratech/feat/fix-auth-routes

✨ Protect front routes

apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx

@@ -36,7 +36,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import { DataTableLoading } from "@/components/shared/data-table-loading";
 import { Heading } from "@/components/ui/heading";
-
+import Cookies from 'js-cookie';
 
 const formSchema = z.object({
   apiKeyIdentifier: z.string().min(2, {
@@ -54,11 +54,13 @@ export default function Page() {
   const [open,setOpen] = useState(false)
   const [tsApiKeys,setTSApiKeys] = useState<TSApiKeys[] | undefined>([])
 
-  const { data: apiKeys, isLoading, error } = useApiKeys();
+  const {idProject} = useProjectStore();
+  const {profile} = useProfileStore();
+
+  const { data: apiKeys, isLoading, error } = useApiKeys(idProject);
   const { mutate } = useApiKeyMutation();
 
   useEffect(() => {
-
     const temp_tsApiKeys = apiKeys?.map((key) => ({
       name: key.name || "",
       token: key.api_key_hash,
@@ -69,8 +71,7 @@ export default function Page() {
 
   },[apiKeys])
 
-  const {idProject} = useProjectStore();
-  const {profile} = useProfileStore();
+
 
   const posthog = usePostHog()
 

apps/client-ts/src/app/(Dashboard)/configuration/page.tsx

@@ -46,8 +46,8 @@ import { Heading } from "@/components/ui/heading";
 export default function Page() {
   const {idProject} = useProjectStore();
 
-  const { data: linkedUsers, isLoading, error } = useLinkedUsers();
-  const { data: webhooks, isLoading: isWebhooksLoading, error: isWebhooksError } = useWebhooks();
+  const { data: linkedUsers, isLoading, error } = useLinkedUsers(idProject);
+  const { data: webhooks, isLoading: isWebhooksLoading, error: isWebhooksError } = useWebhooks(idProject);
   const {data: ConnectionStrategies, isLoading: isConnectionStrategiesLoading,error: isConnectionStategiesError} = useConnectionStrategies(idProject)
 
   const { data: mappings, isLoading: isFieldMappingsLoading, error: isFieldMappingsError } = useFieldMappings();

apps/client-ts/src/app/b2c/login/page.tsx

@@ -1,17 +1,6 @@
 'use client';
 import CreateUserForm from "@/components/Auth/CustomLoginComponent/CreateUserForm";
 import LoginUserForm from "@/components/Auth/CustomLoginComponent/LoginUserForm";
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
 import {
   Tabs,
   TabsContent,
@@ -24,8 +13,6 @@ import Cookies from 'js-cookie';
 import useProfileStore from "@/state/profileStore";
 import useFetchUserMutation from "@/hooks/mutations/useFetchUserMutation";
 
-
-
 export default function Page() {
 
     const [userInitialized,setUserInitialized] = useState(true)

apps/client-ts/src/components/Configuration/AddAuthCredentials.tsx

@@ -15,28 +15,19 @@ import { cn } from "@/lib/utils"
 
 import { usePostHog } from 'posthog-js/react'
 import config from "@/lib/config"
-// import { toast } from "@/components/ui/use-toast"
 
 import AddAuthCredentialsForm from "./AddAuthCredentialsForm"
 
-
-
-
 const AddAuthCredentials = () => {
-    const [open, setOpen] = useState(false);
-    const posthog = usePostHog()
-    const {idProject} = useProjectStore();
-
-
-
+  const [open, setOpen] = useState(false);
+  const posthog = usePostHog()
+  const {idProject} = useProjectStore();
 
-    const handleOpenChange = (open: boolean) => {
-        setOpen(open)
-        // form.reset()
-      };
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open)
+    // form.reset()
+  };
 
-
-
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
         <DialogTrigger asChild>

apps/client-ts/src/components/Configuration/AddAuthCredentialsForm.tsx

@@ -35,20 +35,13 @@ import {
 import {
     Form,
     FormControl,
-    FormDescription,
     FormField,
     FormItem,
     FormLabel,
     FormMessage,
 } from "@/components/ui/form"
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-  } from "@/components/ui/tooltip"
 import {PasswordInput} from '@/components/ui/password-input'
-import { ALL_PROVIDERS,getLogoURL,getProviderVertical,providerToType,AuthStrategy } from "@panora/shared"
+import { ALL_PROVIDERS,getLogoURL,providerToType,AuthStrategy } from "@panora/shared"
 import * as z from "zod"
 import { cn } from "@/lib/utils"
 import useProjectStore from "@/state/projectStore"
@@ -103,17 +96,13 @@ const formSchema = z.object({
         // api_key?:string,
         // username?:string,
         // secret?:string,
-
-
     }
 
   }
 
 const AddAuthCredentialsForm = (prop : propType) => {
-
     const [copied, setCopied] = useState(false);
     const [popoverOpen,setPopOverOpen] = useState(false);
-    // const [olddata,setOldData] = useState(prop.data)
     const {idProject} = useProjectStore()
     const {mutate : createCS} = useConnectionStrategyMutation();
     const {mutate :updateCS} = useUpdateConnectionStrategyMutation()
@@ -134,8 +123,6 @@ const AddAuthCredentialsForm = (prop : propType) => {
 
     })
 
-
-
     const posthog = usePostHog()
 
     useEffect(() => {
@@ -181,10 +168,6 @@ const AddAuthCredentialsForm = (prop : propType) => {
 
 },[])
 
-
-
-
-
     const handlePopOverClose = () => {
         setPopOverOpen(false);
     }
@@ -203,8 +186,6 @@ const AddAuthCredentialsForm = (prop : propType) => {
 
     const Watch = form.watch()
 
-
-
     function onSubmit(values: z.infer<typeof formSchema>) {
 
 

apps/client-ts/src/components/Configuration/AddWebhook.tsx

@@ -59,7 +59,6 @@ const AddWebhook = () => {
     const handleClose = () => {
       setOpen(false);
     };
-    //const [secret, setSecret] = useState('');
     const posthog = usePostHog()
 
     const {idProject} = useProjectStore();

apps/client-ts/src/components/Configuration/FieldMappingModal.tsx

@@ -109,7 +109,7 @@ export function FModal({ onClose }: {onClose: () => void}) {
   const { data: mappings } = useFieldMappings();
   const { mutate: mutateDefineField } = useDefineFieldMutation();
   const { mutate: mutateMapField } = useMapFieldMutation();
-  const { data: linkedUsers } = useLinkedUsers();
+  const { data: linkedUsers } = useLinkedUsers(idProject);
   const { data: sourceCustomFields, error, isLoading } = useProviderProperties(linkedUserId,sourceProvider);
 
   const posthog = usePostHog()

apps/client-ts/src/components/Connection/ConnectionTable.tsx

@@ -21,16 +21,18 @@ import useMagicLinkStore from "@/state/magicLinkStore";
 import useOrganisationStore from "@/state/organisationStore";
 import { usePostHog } from 'posthog-js/react'
 import useProjectStore from "@/state/projectStore";
+import Cookies from 'js-cookie';
 
 export default function ConnectionTable() {
-  const { data: connections, isLoading, error } = useConnections();
+
+  const {idProject} = useProjectStore();
+  const { data: connections, isLoading, error } = useConnections(idProject);
   const [isGenerated, setIsGenerated] = useState(false);
 
   const posthog = usePostHog()
 
   const {uniqueLink} = useMagicLinkStore();
   const {nameOrg} = useOrganisationStore();
-  const {idProject} = useProjectStore();
 
   if(isLoading){
     return (

apps/client-ts/src/components/Events/EventsTable.tsx

@@ -5,11 +5,13 @@ import { DataTableLoading } from "../shared/data-table-loading";
 import { events as Event } from "api";
 import { useEventsCount } from '@/hooks/useEventsCount';
 import { useQueryPagination } from '@/hooks/useQueryPagination';
+import useProjectStore from "@/state/projectStore";
 
 export default function EventsTable() {
   const { data: eventsCount } = useEventsCount();
 
   const pagination = useQueryPagination({ totalItems: eventsCount });
+  const {idProject} = useProjectStore();
 
   const {
     data: events,
@@ -19,7 +21,7 @@ export default function EventsTable() {
   } = useEvents({
     page: pagination.page,
     pageSize: pagination.pageSize,
-  });
+  }, idProject);
 
   //TODO
   const transformedEvents = events?.map((event: Event) => ({

apps/client-ts/src/components/Nav/user-nav.tsx

@@ -13,41 +13,20 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Skeleton } from "@/components/ui/skeleton";
-import useProfile from "@/hooks/useProfile";
 import useProfileStore from "@/state/profileStore";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { useEffect } from "react";
 import Cookies from 'js-cookie';
 import useProjectStore from "@/state/projectStore"
 import { useQueryClient } from '@tanstack/react-query';
 
 
 export function UserNav() {
-  // const stytch = useStytch();
-  // const { user } = useStytchUser();
   const router = useRouter();
-  //const {data, isLoading, isError, error} = useProfile(user?.user_id!);
   const { profile, setProfile } = useProfileStore();
   const { idProject, setIdProject } = useProjectStore();
   const queryClient = useQueryClient();
 
-
-
-  /*useEffect(()=> {
-    if(data){
-      console.log("data is "+ JSON.stringify(data));
-      setProfile({
-        id_user: data.id_user,
-        email: data.email!,
-        first_name: data.first_name,
-        last_name: data.last_name,
-        //id_organization: data.id_organization as string,
-      })
-    }
-  }, [data, setProfile]);*/
-
   const onLogout = () => {
     router.push('/b2c/login')
     Cookies.remove("access_token")

apps/client-ts/src/components/RootLayout/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { MainNav } from '@/components/Nav/main-nav';
 import { SmallNav } from '@/components/Nav/main-nav-sm';
 import { UserNav } from '@/components/Nav/user-nav';
@@ -11,26 +11,15 @@ import { cn } from "@/lib/utils";
 import useProfileStore from '@/state/profileStore';
 import useProjectStore from '@/state/projectStore';
 import { ThemeToggle } from '@/components/Nav/theme-toggle';
-import { projects as Project } from 'api';
-import useFetchUserMutation from "@/hooks/mutations/useFetchUserMutation";
-import useProjectsByUser from '@/hooks/useProjectsByUser';
-
-
-type User = {
-  id_user: string;
-  email: string;
-  first_name: string;
-  last_name: string;
-  id_organization?: string;
-}
+import useProjects from '@/hooks/useProjects';
 
 export const RootLayout = ({children}:{children:React.ReactNode}) => {
   const router = useRouter()
   const base = process.env.NEXT_PUBLIC_WEBAPP_DOMAIN;
 
 
   const {profile} = useProfileStore()
-  const {data : projectsData} = useProjectsByUser(profile?.id_user)
+  const {data : projectsData} = useProjects();
   const { idProject, setIdProject } = useProjectStore();
 
 

apps/client-ts/src/hooks/mutations/useApiKeyMutation.tsx

@@ -12,21 +12,6 @@ const useApiKeyMutation = () => {
     const queryClient = useQueryClient();
 
     const addApiKey = async (data: IApiKeyDto) => {
-        //TODO: in cloud environment this step must be done when user logs in directly inside his dashboard
-        // Fetch the token
-        // const loginResponse = await fetch(`${config.API_URL}/auth/login`, {
-        //     method: 'POST',
-        //     body: JSON.stringify({ id_user: data.userId.trim(), password_hash: 'my_password' }),
-        //     headers: {
-        //         'Content-Type': 'application/json', 
-        //     },
-        // });
-
-        // if (!loginResponse.ok) {
-        //     throw new Error('Failed to login');
-        // }
-        // const { access_token } = await loginResponse.json();
-
         const response = await fetch(`${config.API_URL}/auth/generate-apikey`, {
             method: 'POST',
             body: JSON.stringify(data),
@@ -35,7 +20,7 @@ const useApiKeyMutation = () => {
             'Authorization': `Bearer ${Cookies.get('access_token')}`,
             },
         });
-
+         
         if (!response.ok) {
             throw new Error('Failed to add api key');
         }

apps/client-ts/src/hooks/mutations/useConnectionStrategy.tsx

@@ -1,6 +1,7 @@
 import config from '@/lib/config';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from "sonner"
+import Cookies from 'js-cookie';
 
 interface IConnectionStrategyDto {
     projectId: string,
@@ -27,6 +28,7 @@ const useConnectionStrategyMutation = () => {
             body: JSON.stringify(connectionStrategyData),
             headers: {
             'Content-Type': 'application/json',
+            'Authorization': `Bearer ${Cookies.get('access_token')}`,
             },
         });
 

apps/client-ts/src/hooks/mutations/useConnectionStrategyAuthCredentials.tsx

@@ -1,6 +1,7 @@
 import config from '@/lib/config';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from "sonner"
+import Cookies from 'js-cookie';
 
 interface IFetchedData {
     authValues:string[]
@@ -22,6 +23,7 @@ const useConnectionStrategyAuthCredentialsMutation = () => {
           body: JSON.stringify(GetCSCredentialsData),
           headers: {
           'Content-Type': 'application/json',
+          'Authorization': `Bearer ${Cookies.get('access_token')}`,
           },
         })
           if (!response.ok) {

apps/client-ts/src/hooks/mutations/useDefineFieldMutation.tsx

@@ -1,6 +1,7 @@
 import config from '@/lib/config';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from "sonner"
+import Cookies from 'js-cookie';
 
 interface IDefineTargetFieldDto{
     object_type_owner: string;
@@ -18,6 +19,7 @@ const useDefineFieldMutation = () => {
             body: JSON.stringify(data),
             headers: {
             'Content-Type': 'application/json',
+            'Authorization': `Bearer ${Cookies.get('access_token')}`,
             },
         });