Merge pull request #400 from mit-27/remove-stytch-add-auth

Remove stytch auth and implement custom Auth

apps/client-ts/next.config.mjs

@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'standalone'
+    output: 'standalone',
+    async redirects() {
+        return [
+            {
+                source: '/',
+                destination: '/connections',
+                permanent: true
+            }
+        ]
+    }
 };
 
 export default nextConfig;

apps/client-ts/package.json

@@ -27,8 +27,6 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-scroll-area": "^1.0.5",
-    "@stytch/nextjs": "^18.0.0",
-    "@stytch/vanilla-js": "^4.7.1",
     "@tanstack/react-query": "^5.12.2",
     "@tanstack/react-query-devtools": "^5.25.0",
     "@tanstack/react-query-next-experimental": "^5.25.0",
@@ -50,14 +48,15 @@
     "react-hook-form": "^7.51.0",
     "recharts": "^2.10.1",
     "sonner": "^1.4.3",
-    "stytch": "^10.5.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4",
-    "zustand": "^4.4.7"
+    "zustand": "^4.4.7",
+    "js-cookie": "^3.0.5"
   },
   "devDependencies": {
     "@types/cookies": "^0.9.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

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

@@ -34,7 +34,8 @@ import config from "@/lib/config";
 import * as z from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
-import { DataTableLoading } from "../../components/shared/data-table-loading";
+import { DataTableLoading } from "@/components/shared/data-table-loading";
+import { Heading } from "@/components/ui/heading";
 
 
 const formSchema = z.object({
@@ -116,13 +117,15 @@ export default function Page() {
   };
 
   return (
-    <div className="flex flex-col items-center justify-between space-y-2 w-full">
-      <div className="flex-1 space-y-4 pt-6">
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+      <div className="flex-1 space-y-4 p-8 pt-6">
         <div className="flex flex-col items-start justify-between space-y-2">
-          <h2 className="text-3xl font-bold tracking-tight">Api Keys</h2>
-          <h2 className="text-lg font-bold tracking-tight">Manage your api keys.</h2>
+          <Heading
+          title="Api Keys"
+          description="Manage your api keys."
+          />
         </div>          
-        <div className="flex space-y-8 md:flex pb-4">
+        <div>
           <Dialog open={open} onOpenChange={handleOpenChange}>
             <DialogTrigger asChild>
             <Button
@@ -141,44 +144,60 @@ export default function Page() {
             </Button>
             </DialogTrigger>
             <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Add New Api Key</DialogTitle>
-                <DialogDescription>
-                  Never share this key, you must saved it it will be displayed once !
-                </DialogDescription>
-              </DialogHeader>
-
-              <Form {...form}>
-                <form onSubmit={form.handleSubmit(onSubmit)}>
-                <div className="grid gap-4 py-4">
-                  <div className="grid gap-2">
-                  <FormField
-                        control={form.control}
-                        name="apiKeyIdentifier"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>API Key Identifier</FormLabel>
-                            <FormControl>
-                              <Input 
-                              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
-                              placeholder="My Best Key For Finance Data" {...field}
-                              />
-                            </FormControl>
-                            <FormDescription>
-                              This is the API Key Identifier of system.
-                            </FormDescription>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                    />
+              {idProject==="" ? (
+                <>
+                <DialogHeader>
+                  <DialogTitle></DialogTitle>
+                </DialogHeader>
+                <h1>You have to create project in order to create API Key.</h1>
+                <DialogFooter>
+                  <Button variant='outline' type="reset" onClick={() => onCancel()}>Close</Button>
+                </DialogFooter>
+                </>
+              )
+              :
+              (
+                <>
+                <DialogHeader>
+                  <DialogTitle>Add New Api Key</DialogTitle>
+                  <DialogDescription>
+                    Never share this key, you must saved it it will be displayed once !
+                  </DialogDescription>
+                </DialogHeader>
+
+                <Form {...form}>
+                  <form onSubmit={form.handleSubmit(onSubmit)}>
+                  <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                    <FormField
+                          control={form.control}
+                          name="apiKeyIdentifier"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>API Key Identifier</FormLabel>
+                              <FormControl>
+                                <Input 
+                                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
+                                placeholder="My Best Key For Finance Data" {...field}
+                                />
+                              </FormControl>
+                              <FormDescription>
+                                This is the API Key Identifier of system.
+                              </FormDescription>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                      />
+                    </div>
                   </div>
-                </div>
-              <DialogFooter>
-                <Button variant='outline' type="reset" onClick={() => onCancel()}>Cancel</Button>
-                <Button type='submit'>Create</Button>
-              </DialogFooter>
-                </form>
-              </Form>
+                <DialogFooter>
+                  <Button variant='outline' type="reset" onClick={() => onCancel()}>Cancel</Button>
+                  <Button type='submit'>Create</Button>
+                </DialogFooter>
+                  </form>
+                </Form>
+                </>
+              )}
             </DialogContent>
           </Dialog>
         </div>

apps/client-ts/src/app/b2c/profile/page.tsx → apps/client-ts/src/app/(Dashboard)/b2c/profile/page.tsx

@@ -11,42 +11,54 @@ import {
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator"
 import { useRouter } from "next/navigation";
-import { useStytch, useStytchSession, useStytchUser } from "@stytch/nextjs";
+import Cookies from 'js-cookie';
+import useProfileStore from "@/state/profileStore";
+import useProjectStore from "@/state/projectStore"
+import { useQueryClient } from '@tanstack/react-query';
+
 
 const Profile = () => {
-    const stytch = useStytch();
-    // Get the Stytch User object if available
-    const { user } = useStytchUser();
-    // Get the Stytch Session object if available
-    const { session } = useStytchSession();
+
+    const {profile,setProfile} = useProfileStore();
+    const { idProject, setIdProject } = useProjectStore();
+    const queryClient = useQueryClient();
+
+
+
     const router = useRouter();
 
+    const onLogout = () => {
+        router.push('/b2c/login')
+        Cookies.remove("access_token")
+        setProfile(null)
+        setIdProject("")
+        queryClient.clear()
+
+    }
+
     return (
         <div className="ml-[200px] p-10">
         <Card>
         <CardHeader>
             <CardTitle>Profile</CardTitle>
             <CardDescription>
             <div className="flex items-center">
-                {user?.name.first_name} {user?.name.last_name}
+                {profile?.first_name} {profile?.last_name}
             </div>
             </CardDescription>
         </CardHeader>
         <CardContent>
             <h4 className="text-sm font-medium mb-2">Connected user</h4>
 
             <div className="flex space-x-2">
-            <Input value={`${user?.emails[0].email}`} readOnly />
+            <Input value={`${profile?.email}`} readOnly />
             <Button variant="secondary" className="shrink-0">
                 Copy
             </Button>
             </div>
             <Separator className="my-4" />
             <div className="pt-4">
-            <Button onClick={() => {
-                stytch.session.revoke()
-                router.push('/b2c/login');
-            }}>
+            <Button onClick={() => onLogout()}>
                 Log Out
             </Button>
             </div>

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

@@ -41,6 +41,7 @@ import AddAuthCredentials from "@/components/Configuration/AddAuthCredentials";
 import AuthCredentialsTable from "@/components/Configuration/AuthCredentialsTable";
 import useConnectionStrategies from "@/hooks/useConnectionStrategies";
 import { extractAuthMode,extractProvider,extractVertical} from '@panora/shared'
+import { Heading } from "@/components/ui/heading";
 
 export default function Page() {
   const {idProject} = useProjectStore();
@@ -112,10 +113,13 @@ export default function Page() {
 
   return (
 
-    <div className="flex flex-col pl-[200px] items-center justify-between space-y-2">
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
         <div className="flex-1 space-y-4 p-8 pt-6">
           <div className="flex items-center justify-between space-y-2">
-            <h2 className="text-3xl font-bold tracking-tight">Configuration</h2>
+            <Heading
+            title="Configuration"
+            description=""
+            />
           </div>
           <Tabs defaultValue="linked-accounts" className="space-y-4">
             <TabsList>

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

@@ -1,14 +1,17 @@
 'use client';
 
 import ConnectionTable from "@/components/Connection/ConnectionTable";
+import { Heading } from "@/components/ui/heading";
 
 export default function ConnectionPage() {
     return (
-      <div className="flex flex-col items-center justify-between space-y-2 w-full">
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
         <div className="flex-1 space-y-4 p-8 pt-6">
         <div className="flex flex-col justify-between space-y-2">
-          <h2 className="text-3xl font-bold tracking-tight">Connections</h2>
-          <h2 className="text-lg font-bold tracking-tight">Connections between your product and your users’ accounts on third-party software.</h2>
+          <Heading
+          title="Connections"
+          description="Connections between your product and your users’ accounts on third-party software."
+          />
         </div>         
         <ConnectionTable />
         </div>

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

@@ -1,14 +1,18 @@
 'use client';
 
 import EventsTable from "@/components/Events/EventsTable";
+import { Heading } from "@/components/ui/heading";
 import { Suspense } from 'react'
 
 export default function Page() {
     return (
-      <div className="flex flex-col items-center justify-between space-y-2 w-full">
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
         <div className="flex-1 space-y-4 p-8 pt-6">
         <div className="flex items-center justify-between space-y-2">
-          <h2 className="text-3xl font-bold tracking-tight">Events</h2>
+          <Heading
+          title="Events"
+          description=""
+          />
         </div>   
         <Suspense>
           <EventsTable/>

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

@@ -0,0 +1,59 @@
+'use client'
+import { Inter } from "next/font/google";
+import "./../globals.css";
+import { RootLayout } from "@/components/RootLayout";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Cookies from 'js-cookie';
+import useFetchUserMutation from "@/hooks/mutations/useFetchUserMutation";
+
+
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+
+  const [userInitialized,setUserInitialized] = useState(false)
+  const router = useRouter()
+  const {mutate: fetchUserMutate} = useFetchUserMutation()
+
+
+
+  useEffect(() => {
+    if(!Cookies.get('access_token'))
+    {
+        router.replace("/b2c/login")
+    }
+    else
+    {
+
+      fetchUserMutate(Cookies.get('access_token'),{
+        onError: () => router.replace("/b2c/login"),
+        onSuccess: () => setUserInitialized(true)
+      })
+    }
+  },[])
+
+
+
+
+  return (
+    <>   {userInitialized ? (
+      <>
+        <RootLayout>
+          {children}
+        </RootLayout> 
+      </>
+    ) : (
+      <>
+
+      </>
+    )}
+
+    </>
+  );
+}