add login

app/api/auth/[...nextauth]/options.ts

@@ -0,0 +1,80 @@
+import { createClient } from "falkordb";
+import CredentialsProvider from "next-auth/providers/credentials"
+import { AuthOptions } from "next-auth"
+
+const authOptions : AuthOptions = {
+    providers: [
+        CredentialsProvider({
+            // The name to display on the sign in form (e.g. 'Sign in with...')
+            name: 'Credentials',
+            // The credentials is used to generate a suitable form on the sign in page.
+            // You can specify whatever fields you are expecting to be submitted.
+            // e.g. domain, username, password, 2FA token, etc.
+            // You can pass any HTML attribute to the <input> tag through the object.
+            credentials: {
+                host: { label: "Host", type: "text", placeholder: "localhost" },
+                port: { label: "Port", type: "number", placeholder: "6379" },
+                username: { label: "Username", type: "text" },
+                password: { label: "Password", type: "password" }
+            },
+            async authorize(credentials, req) {
+
+                if (!credentials) {
+                    return null
+                }
+
+                try {
+                    let client = await createClient({
+                        socket: {
+                            host: credentials.host ?? "localhost",
+                            port: credentials.port ? parseInt(credentials.port) : 6379,
+                            reconnectStrategy: false
+                        },
+                        password: credentials.password ?? undefined,
+                        username: credentials.username ?? undefined
+                    })
+                    .on('error', err => console.log('FalkorDB Client Error', err))
+                    .connect();
+
+                    let res : any = {
+                        host: credentials.host,
+                        port: credentials.port,
+                        password: credentials.password,
+                        username: credentials.username,
+                    }
+                    return res
+                } catch (err) {
+                    console.log(err)
+                    return null;
+                }
+            }
+
+        })
+    ],
+    callbacks: {
+        async jwt({ token, user }) {
+            if (user) {
+                token.host = user.host;
+                token.port = user.port;
+                token.username = user.username;
+                token.password = user.password;
+            }
+
+            return token;
+        },
+        async session({ session, token, user }) {
+            if (session.user) {
+                session.user.host = token.host as string;
+                session.user.port = parseInt(token.port as string);
+                session.user.username = token.username as string;
+                session.user.password = token.password as string;
+
+            }
+            return session;
+        }
+    }
+}
+
+
+
+export default authOptions

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,7 @@
+import NextAuth from "next-auth"
+import authOptions from "./options";
+
+
+const handler = NextAuth(authOptions)
+
+export { handler as GET, handler as POST }

app/api/graph/route.ts

@@ -1,11 +1,17 @@
 import { NextRequest, NextResponse } from "next/server";
 import { Graph, RedisClientType, RedisDefaultModules, createClient } from 'falkordb';
+import { getServerSession } from "next-auth/next";
+import authOptions from "../auth/[...nextauth]/options";
+import { cookies } from 'next/headers'
 
 const client = createClient();
 client.connect()
 
 export async function GET(request: NextRequest) {
 
+    const session = await getServerSession(authOptions)
+    console.log(JSON.stringify( session))
+
     const graphID = request.nextUrl.searchParams.get("graph");
     try {
         if (graphID) {

app/layout.tsx

@@ -3,6 +3,8 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 import Navbar from '@/components/custom/navbar'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
+import NextAuth from 'next-auth'
+import { NextAuthProvider } from './providers'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -20,13 +22,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <div className="flex h-screen min-h-screen w-full overflow-hidden">
-          <ResizablePanelGroup direction="horizontal" className='w-full h-full overflow-hidden'>
-            <ResizablePanel defaultSize={10} maxSize={30} collapsible={true} minSize={10}>
-              <Navbar />
-            </ResizablePanel>
-            <ResizableHandle withHandle/>
-            <ResizablePanel  defaultSize={90}>{children}</ResizablePanel>
-          </ResizablePanelGroup>
+          <NextAuthProvider>{children}</NextAuthProvider>
         </div>
       </body>
     </html>

app/login/page.tsx

@@ -1,46 +1,54 @@
+'use client'
+
 import { CardTitle, CardDescription, CardHeader, CardContent, CardFooter, Card } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
+import { FormEvent } from "react"
 
 export default function Page() {
+    function handleSubmit(event: FormEvent<HTMLFormElement>): void {
+        event.preventDefault();
+
+        // Read the form data
+        const form: any = event.target;
+        const formData = new FormData(form);
+        console.log(formData);
+    }
+
     return (
-        <Card>
-            <CardHeader>
+        <form className="flex flex-col gap-2" onSubmit={handleSubmit}>
+            <div className="p-4">
                 <CardTitle className="text-2xl font-semibold">Login FalkorDB server</CardTitle>
                 <CardDescription className="text-gray-500">
                     Fill in the form below to login to your FalkorDB server.
                 </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
+            </div>
+            <div className="space-y-4 flex flex-col p-4">
                 <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-2">
-                        <Label htmlFor="username">User Name</Label>
-                        <Input id="username" placeholder="Enter username if exits" type="text" />
+                        <Label htmlFor="server">Server</Label>
+                        <Input id="server" placeholder="localhost" type="text" defaultValue="localhost" />
                     </div>
                     <div className="space-y-2">
-                        <Label htmlFor="password">Password</Label>
-                        <Input id="password" placeholder="Enter password if exits" type="password" />
+                        <Label htmlFor="port">Port</Label>
+                        <Input id="port" placeholder="6379" type="number" min={1} max={65535} defaultValue={6379} />
                     </div>
                 </div>
                 <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-2">
-                        <Label htmlFor="server">Server</Label>
-                        <Input id="server" placeholder="Enter your email" type="text" />
+                        <Label htmlFor="username">User Name</Label>
+                        <Input id="username" type="text" />
                     </div>
                     <div className="space-y-2">
-                        <Label htmlFor="port">Port</Label>
-                        <Input id="port" placeholder="Enter your email" type="number" />
+                        <Label htmlFor="password">Password</Label>
+                        <Input id="password" type="password" />
                     </div>
                 </div>
-                <div className="space-y-2">
-                    <Label htmlFor="url">URL</Label>
-                    <Input id="url" placeholder="Enter connection URL" type="url" />
-                </div>
-            </CardContent>
-            <CardFooter className="flex justify-end">
-                <Button>Login</Button>
-            </CardFooter>
-        </Card>
+            </div>
+            <div className="flex justify-end p-4">
+                <Button type="submit">Connect</Button>
+            </div>
+        </form>
     )
 }

app/page.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { signIn } from "next-auth/react";
 import Link from "next/link";
 
 
@@ -7,7 +11,7 @@ export default function Home() {
       <main className="flex flex-col items-center justify-center flex-1 px-20 text-center">
         <h1 className="text-6xl font-bold">
           Welcome to{' '}
-          <Link className="text-blue-600 underline underline-offset-2" href="/graph">
+          <Link className="text-blue-600 underline underline-offset-2" onClick={() => signIn("Credentials", { callbackUrl: '/graph' })} href="/">
             FalkorDB Browser
           </Link>
         </h1>

app/providers.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import Navbar from "@/components/custom/navbar";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { SessionProvider } from "next-auth/react";
+// import Navigation from "./components/navigation";
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+export const NextAuthProvider = ({ children }: Props) => {
+  return (
+    <SessionProvider>
+      <ResizablePanelGroup direction="horizontal" className='w-full h-full overflow-hidden'>
+        <ResizablePanel defaultSize={10} maxSize={30} collapsible={true} minSize={10}>
+          <Navbar />
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={90}>{children}</ResizablePanel>
+      </ResizablePanelGroup>
+    </SessionProvider>
+  )
+};

components/custom/navbar.tsx

@@ -1,4 +1,6 @@
 import { AirVentIcon } from "lucide-react";
+import { signOut } from "next-auth/react";
+import Link from "next/link";
 
 export default function Navbar() {
   return (
@@ -33,7 +35,9 @@ export default function Navbar() {
           </li>
           <li className="flex items-center space-x-2">
             <AirVentIcon className="h-6 w-6" />
-            <span>Setting</span>
+            <Link className="text-blue-600 underline underline-offset-2" onClick={() => signOut({ callbackUrl: '/' })} href="/">
+            Sign Out
+          </Link>
           </li>
         </ul>
       </div>